前端-笔试刷题-CSS选择器-样式设置-布局
标签、类、ID选择器
- 题目描述
请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)"，"绿色"设置为"rgb(0, 128, 0)"，"黑色"设置为"rgb(0, 0, 0)"，且字体大小都为20px。
点击查看代码
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
div{
font-size:20px;
color:rgb(255,0,0)
}
.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>
伪类选择器
- 题目描述
请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0)"。
点击查看代码
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
ul li:nth-child(2n){
background-color:rgb(255,0,0);
}
或者如下代码：
li:nth-child(2) {
background-color: rgb(255, 0, 0);
}
li:nth-child(4) {
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>
伪元素
- 题目描述
请给html模块的div元素加一个后伪元素，且后伪元素的宽度和高度都是20px，背景颜色为"rgb(255, 0, 0)"。
点击查看代码
<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>
按要求写一个圆
- 题目描述
请将html模块的div元素设置为一个半径是50px的圆，且边框为1px的黑色实线。
要求：
- 圆角属性仅设置一个值
- 圆角属性单位请使用px
注意：由于圆角属性设置广泛且都可以实现题目效果，所以请按照要求规范书写。
点击查看代码
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
div{
width:100px;
height:100px;
border:1px black solid;
border-radius:50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
设置盒子宽高
- 题目描述
请将html模块类为"box"的div元素宽度和高度都设置为100px，且内间距为20px、外间距为10px。
点击查看代码
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
.box{
width:100px;
height:100px;
padding:20px;
margin:10px;
background-color:red;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
浮动和清除浮动
- 题目描述
请将类为"left"的div元素和类为"right"的div元素在同一行上向左浮动，且清除类为"wrap"的父级div元素内部的浮动。
点击查看代码
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.wrap::after{
/*补全代码*/
display:block;
clear:both;
content:"";
}
.left {
width: 100px;
height: 100px;
/*补全代码*/
background-color:purple;
float:left;
}
.right {
width: 100px;
height: 100px;
/*补全代码*/
background-color:green;
float:left;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='left'></div>
<div class='right'></div>
</div>
</body>
</html>
解析：
第一种：在style中，给父元素添加：overflow:hidden; 缺陷：假如父元素有需要溢出的元素显示，当父元素设置了overflow：hidden后，会导致这些溢出的元素内容无法正常显示。
第二种： 给类名wrap添加一个div子元素,然后给这个元素在style中设置"clear:left"; clear：left的作用是 清除左侧内容的浮动效果。
第三种：双伪元素法（个人比较推荐） 在style中父元素，给父元素添加伪元素 代码：
.wrap:after,.wrap:before{ content:' '; display:table; }
.wrap:after{ clear:both; } .wrap{ *zoom:1; }
效果图：
固定定位
- 题目描述
请将html模块类为"box"的div元素固定在视口的左上角。
点击查看代码
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.box {
width: 100px;
height: 100px;
/*补全代码*/
position: fixed;
left: 0px;
top: 0px;
background-color:purple;
}
</style>
</head>
<body>
<div class='box'></div>
</body>
</html>
CSS单位一
- 题目描述
请将html模块中类为"box"的div元素的宽度和高度设置为自身字体大小的4倍。
点击查看代码
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.box {
/*补全代码*/
width:4em;
height:4em;
}
</style>
</head>
<body>
<div class='box'></div>
</body>
</html>
CSS单位二
- 题目描述
请将html模块div元素的宽度和高度设置为html根元素字体大小的4倍。
注意：只需在css模块补全样式内容，请勿修改html模块。
点击查看代码
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
div {
/*补全代码*/
width:4rem;
height:4rem;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
fy权世界
