《牛客网刷题之零基础入门前端之CSS》

news2024/11/17 0:50:06

目录

CSS

选择器

FED9 CSS选择器——标签、类、ID选择器

FED10 CSS选择器——伪类选择器

FED11 CSS选择器——伪元素

样式设置

FED12 按要求写一个圆

FED13 设置盒子宽高

FED74 段落标识

FED75 设置文字颜色

FED76 圣诞树

布局

FED14 浮动和清除浮动

FED15 固定定位

单位

FED18 CSS单位（一）

FED19 CSS单位（二）

CSS

选择器

FED9 CSS选择器——标签、类、ID选择器

题目描述

请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)"，"绿色"设置为"rgb(0, 128, 0)"，"黑色"设置为"rgb(0, 0, 0)"，且字体大小都为20px。

html

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div{
                color:rgb(255,0,0);
                font-size:20px;   
            }
            .green{
                color:rgb(0,128,0);
            }
            #black{
                color:rgb(0,0,0);
            }
        </style>
    </head>
    <body>
        <div>红色</div>
        <div class='green'>绿色</div>
        <div id='black'>黑色</div>
    </body>
</html>

FED10 CSS选择器——伪类选择器

题目描述

请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0)"。

html

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            li:nth-child(even){
                background-color:rgb(255,0,0);
            }
            /*补全代码*/
            
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
</html>

FED11 CSS选择器——伪元素

题目描述

请给html模块的div元素加一个后伪元素，且后伪元素的宽度和高度都是20px，背景颜色为"rgb(255, 0, 0)"。

html

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div::after{
                content:"";
                width:20px;
                height:20px;
                background-color:rgb(255,0,0);
                display:block;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

样式设置

FED12 按要求写一个圆

题目描述

请将html模块的div元素设置为一个半径是50px的圆，且边框为1px的黑色实线。
要求：
1. 圆角属性仅设置一个值
2. 圆角属性单位请使用px
注意：由于圆角属性设置广泛且都可以实现题目效果，所以请按照要求规范书写。

html

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div{
                height:100px;
                width:100px;
                border-radius:50px;
                border:1px solid black;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

FED13 设置盒子宽高

题目描述

请将html模块类为"box"的div元素宽度和高度都设置为100px，且内间距为20px、外间距为10px。

html

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box{
                width:100px;
                height:100px;
                padding:20px;
                margin:10px;
            }
        </style>
    </head>
    <body>
        <div class="box">
        </div>
    </body>
</html>

FED74 段落标识

题目描述

请将下面这句话以段落的形式展示在浏览器中——“牛客网是一个专注于程序员的学习和成长的专业平台。”

html

<p>牛客网是一个专注于程序员的学习和成长的专业平台。</p>

FED75 设置文字颜色

题目描述

请使用嵌入样式将所有p标签设置为红色文字

html

<style type="text/css">
    p{
        color:red;
    }
</style>
<p>欢迎来到牛客网</p>
<p>在这里，我们为你提供了IT名企的笔试面试题库</p>
<p>在这里，我们以题会友</p>

FED76 圣诞树

题目描述

圣诞节来啦！请用CSS给你的朋友们制作一颗圣诞树吧~这颗圣诞树描述起来是这样的：
1. "topbranch"是圣诞树的上枝叶，该上枝叶仅通过边框属性、左浮动、左外边距即可实现。边框的属性依次是：宽度为100px、是直线、颜色为green（未显示的边框颜色都为透明）
2. "middleBranch"是圣诞树的中枝叶，该上枝叶仅通过边框属性即可实现。边框的属性依次是：宽度为200px、是直线、颜色为green（未显示的边框颜色都为透明）
3. "base"是圣诞树的树干，该树干仅通过左外边距实现居中于中枝叶。树干的宽度、高度分别为70px、200px，颜色为gray。
注意：
1. 上枝叶、树干的居中都是通过左外边距实现的
2. 没有显示的边框，其属性都是透明（属性）
3. 仅通过border属性完成边框的所有属性设置
效果如下： 

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .topbranch {
                width: 0px;
                height: 0px;
                /*
                * TODO: 上枝叶效果
                */
                float:left;
                border-bottom:100px solid green;
                border-left:100px solid transparent;
                border-right:100px solid transparent;
                border-top:100px solid transparent;
                margin-left:100px;
            }
            .middleBranch {
                width: 0px;
                height: 0px;
                /*
                * TODO: 中枝叶效果
                */
                border-bottom:200px solid green;
                border-left:200px solid transparent;
                border-right:200px solid transparent; 
                border-top:200px solid transparent;
            }
            .base {
                /*
                * TODO: 树干效果
                */
                width:70px;
                height:200px;
                background-color:gray;
                margin-left:165px;
            }
        </style>
    </head>
    <body>
    	<section class="topbranch"></section>
        <section class="middleBranch"></section>
        <section class="base"></section>
    </body>
</html>

布局

FED14 浮动和清除浮动

题目描述

请将类为"left"的div元素和类为"right"的div元素在同一行上向左浮动，且清除类为"wrap"的父级div元素内部的浮动。

html

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .wrap {
                /*补全代码*/
                content:"";
                background-color:green;
                display:table;
                clear:both;
            }
             .left {
                width: 100px;
                height: 100px;
                /*补全代码*/
                background-color:red;
                float:left;
            }
             .right {
                width: 100px;
                height: 100px;
                /*补全代码*/
                background-color:blue;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class='wrap'>
            <div class='left'></div>
            <div class='right'></div>
        </div>
    </body>
</html>

FED15 固定定位

题目描述

请将html模块类为"box"的div元素固定在视口的左上角。

html

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                /*补全代码*/
                border:1px solid pink;
                border-radius:50px;
                position:fixed;
                top:0;
                left:0;
            }
        </style>
    </head>
    <body>
        <div class='box'></div>
    </body>
</html>

单位

FED18 CSS单位（一）

题目描述

请将html模块中类为"box"的div元素的宽度和高度设置为自身字体大小的4倍。

html

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                /*补全代码*/
                background-color:pink;
                height:4em;
                width:4em;
            }
        </style>
    </head>
    <body>
        <div class='box'></div>
    </body>
</html>

FED19 CSS单位（二）

题目描述

请将html模块div元素的宽度和高度设置为html根元素字体大小的4倍。
注意：只需在css模块补全样式内容，请勿修改html模块。

html

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            div {
                /*补全代码*/
                width:4rem;
                height:4rem;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/174881.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LeetCode刷题模版：162、164-166、168

LeetCode刷题模版：162、164-166、168

目录 简介162. 寻找峰值164. 最大间距【考查排序】165. 比较版本号166. 分数到小数168. Excel表列名称结语简介 Hello！ 非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ ଘ(੭ˊᵕˋ)੭ 昵称：海轰 标签：程序猿｜C++选手｜学生 简介：因C语言结识编程，随后…
阅读更多...
【GlobalMapper精品教程】041：从多波段影像中提取单波段方法

【GlobalMapper精品教程】041：从多波段影像中提取单波段方法

本实验讲解globalmapper中文24软件从多波段遥感影像中提取单波段方法。 参考阅读：【Envi风暴】Envi插件大全：多波段拆分工具的巧妙使用 文章目录 一、多波段影像介绍二、单波段提取方法一、多波段影像介绍 加载实验数据：打开GM软件，加载专栏配套实验数据包中的data041.rar…
阅读更多...
第二章 IOC

第二章 IOC

1.IOC底层原理*什么是IOC&#xff1a;控制反转&#xff0c;把对象创建和对象之间的调用过程交给Spring进行管理*使用IOC的目的&#xff1a;降低耦合度*IOC底层原理&#xff1a;xml解析工厂模式反射*IOC思想基于IOC容器完成&#xff0c;IOC容器底层就是对象工厂*Spring提供IOC容…
阅读更多...
【网络安全】WiFi密码爆破教程

【网络安全】WiFi密码爆破教程

WiFi密码爆破教程前言一、什么是暴力破解&#xff1f;二、准备破解工具1.VMware Pro 16 虚拟机安装2. VMware安装Kali Linux3. kali监听无限网卡三、WiFi密码暴力破解1. 虚拟机连接USB网卡2. 扫描附近WiFi3. 查看目标WiFi连接设备4. 抓包5. 破解前言 暴力破解攻击是指攻击者通…
阅读更多...
代码随想录算法训练营第15天 102. 二叉树的层序遍历、226. 翻转二叉树

代码随想录算法训练营第15天 102. 二叉树的层序遍历、226. 翻转二叉树

代码随想录算法训练营第15天| 102. 二叉树的层序遍历、226. 翻转二叉树 二叉树的层序遍历 学会二叉树的层序遍历&#xff0c;可以一口气打完以下十题&#xff1a; 102.二叉树的层序遍历107.二叉树的层次遍历II199.二叉树的右视图637.二叉树的层平均值429.N叉树的层序遍历515…
阅读更多...
4-3指令系统-CISC和RISC

4-3指令系统-CISC和RISC

文章目录一.复杂指令系统计算机CISC二.精简指令系统计算机RISC三.CISC和RISC比较一.复杂指令系统计算机CISC 为增强原有指令的功能&#xff0c;设置更为复杂的新指令实现软件功能的硬化&#xff0c;这类机器成为复杂指令系统计算机CISC&#xff08;Complex Instruction Set Co…
阅读更多...
Linux下的FTP服务器

Linux下的FTP服务器

目录 总体功能 功能1----------------查看服务器端的文件列表信息 功能2 ---------------从服务器段下载文件到客户端 功能3 ---------------向服务器端上传文件 功能4----------------客户端退出&#xff0c;服务器继续等待链接 总体功能 功能1----------------查看服务器…
阅读更多...
STM32 SPI读写速度评估

STM32 SPI读写速度评估

目的&#xff1a;测试STM32H7 系列芯片的SPI读写速度。 测试环境&#xff1a;使用STM32H743, 逻辑分析仪&#xff0c; cubeIDE&#xff1b; 测试方法&#xff1a;使用了3种方法&#xff1a;软件IO模拟SPI&#xff0c; 软件控制CSMCU的SPI模块&#xff0c;完全使用SPI模块&…
阅读更多...
Android 深入系统完全讲解（30）

Android 深入系统完全讲解（30）

下图是生命周期的说明图&#xff1a;如图可以看到&#xff1a; 当创建编解码器的时候处于未初始化状态。首先你需要调用 configure(…)方法让它处于 Configured 状态&#xff0c;然后调用 start()方法让其处于 Executing 状态。在 Executing 状态下&#xff0c;你就 可以使用…
阅读更多...
LCHub：全新华为云Astro低代码平台，重塑企业数字化转型

LCHub：全新华为云Astro低代码平台，重塑企业数字化转型

为什么技术创新与业务突破难以挂钩？为什么寻求的卓越成果总难以实现？华为云Astro呈上解决之道，抓住重点一招致胜，让人人皆可高效开发，使创新按照你的步调进行。 华为云Astro低代码平台，重塑企业数字化转型 当企业倍受数字化升级困扰时，若仍延用传统编码开发，则会阻碍整…
阅读更多...
Bootstrap4 之栅格系统

Bootstrap4 之栅格系统

Bootstrap4 之栅格系统参考描述栅格系统&#xff08;网格系统&#xff09;原理容器.container 与视口宽度行列样式栅格等级网格宽度特点左对齐另起一行自适应布局对齐垂直对齐行列水平对齐排列响应式优先级偏移显隐参考 项目描述Bootstrap 入门经典珍妮弗、凯瑞恩Bootstrap 基…
阅读更多...
内存屏障由来的理解和使用《编程高手必学的内存知识》学习笔记 Day 5

内存屏障由来的理解和使用《编程高手必学的内存知识》学习笔记 Day 5

系列文章目录 这是本周期内系列打卡文章的所有文章的目录 《Go 并发数据结构和算法实践》学习笔记 Day 1《Go 并发数据结构和算法实践》学习笔记 Day 2《说透芯片》学习笔记 Day 3《深入浅出计算机组成原理》学习笔记 Day 4 文章目录系列文章目录前言一、概念理解&#xff08;…
阅读更多...
JUC面试（六）——Java锁

JUC面试（六）——Java锁

Java锁 公平锁和非公平锁 概念 公平锁 是指多个线程按照申请锁的顺序来获取锁&#xff0c;类似于排队买饭&#xff0c;先来后到&#xff0c;先来先服务&#xff0c;就是公平的&#xff0c;也就是队列 非公平锁 是指多个线程获取锁的顺序&#xff0c;并不是按照申请锁的顺…
阅读更多...
steam搬砖项目，每天1-2小时，月入1w+（内附教学资料）

steam搬砖项目，每天1-2小时，月入1w+（内附教学资料）

steam搬砖就非常合适&#xff0c;最大的优点&#xff0c;操作性简单&#xff0c;0门槛也不用担心&#xff0c;一台电脑就能搞定。利用空余时间完成就可以 话不多说&#xff0c;先上目录&#xff0c;以便大家阅读~ 一.steam搬砖玩法 1、steam搬砖项目介绍 2、项目原理与产出…
阅读更多...
ROS2机器人编程简述humble-第二章-Parameters .3.4

ROS2机器人编程简述humble-第二章-Parameters .3.4

ROS2机器人编程简述humble-第二章-Launchers .3.3机器人程序通常需要配置各类参数&#xff0c;官网和一些书中都有介绍。概述ROS中的参数与各个节点相关。参数用于在启动时&#xff08;以及运行时&#xff09;配置节点&#xff0c;而无需更改代码。参数的生存期与节点的生存期相…
阅读更多...
【区块链】深入剖析免费赚钱app的本质

【区块链】深入剖析免费赚钱app的本质

你对免费赚钱软件好奇吗&#xff1f;前言一、揭开“免费赚钱app”神秘面纱1.常见的赚钱app2.app真的在做慈善吗&#xff1f;3.羊毛党的价值4.真正的游戏规则二、区块链1.哈希算法2.互联网挖矿三、深入探讨“区块链”的套路1.免费赚钱app真正的价值2.虚拟货币的本质3.虚拟货币泡…
阅读更多...
Java设计模式-观察者模式/观察者模式适合那些场景？怎么使用

Java设计模式-观察者模式/观察者模式适合那些场景？怎么使用

继续整理记录这段时间来的收获&#xff0c;详细代码可在我的Gitee仓库SpringBoot克隆下载学习使用&#xff01; 6.7 观察者模式 6.7.1 定义 又称发布-订阅模式&#xff0c;定义了一种一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一个主题对象主体对象在状态变化…
阅读更多...
[前端笔记——CSS] 9.CSS处理文件的标准流程+DOM

[前端笔记——CSS] 9.CSS处理文件的标准流程+DOM

[前端笔记——CSS] 9.CSS处理文件的标准流程DOM1.CSS处理文件的标准流程2.关于DOM2.1 举个例子2.2 应用 CSS 到 DOM1.CSS处理文件的标准流程 当浏览器展示一个文件的时候&#xff0c;它必须兼顾文件的内容和文件的样式信息&#xff0c;CSS处理文件的标准流程如下&#xff1a; …
阅读更多...
06_FreeRTOS临界区代码保护

06_FreeRTOS临界区代码保护

目录 临界段代码保护简介 临界段代码保护函数介绍 任务级临界区函数详解 中断级临界区函数详解 临界段代码保护简介 什么是临界段:临界段代码也叫做临界区,是指那些必须完整运行,不能被打断的代码段 适用场合如: 1.外设:需严格按照时序初始化的外设:IIC、SPI等等 2.系统…
阅读更多...
国家发明专利：基于改进型黏菌优化算法的业务资源分配方法

国家发明专利：基于改进型黏菌优化算法的业务资源分配方法

国家发明专利&#xff1a;基于改进型黏菌优化算法的业务资源分配方法 摘要 本发明公开了一种基于改进型黏菌优化算法的业务资源分配方法&#xff0c;其步骤包括&#xff1a;1将生产任务分成若干个环节&#xff0c;构建有向环状分配网络&#xff1b;2构建工厂参数矩阵并归一化&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023