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">
/*補全代碼*/
li:nth-child(2n){
background: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{
display:block;
content:'';
width:20px;
height:20px;
background:rgb(255,0,0)
}
</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-radius:50px;
border:1px solid #000;
}
</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;
border:1px solid #000;
}
</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">
div{
border:1px solid;
}
.wrap {
/*補全代碼*/
overflow:hidden;
}
/* .wrap::after {
content: '';
display: block;
clear: both;
} */
.left {
width: 100px;
height: 100px;
/*補全代碼*/
float:left;
}
.right {
width: 100px;
height: 100px;
/*補全代碼*/
float:left;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='left'></div>
<div class='right'></div>
</div>
</body>
</html>
絕對定位
請將html模塊類為"btn"的div元素中心定位在類為"wrap"的父級div元素右上頂點處。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.wrap {
width: 100px;
height: 100px;
border: solid 1px black;
/*補全代碼*/
position:relative;
}
.btn {
width: 20px;
height: 20px;
text-align: center;
background-color: red;
/*補全代碼*/
position:absolute;
top:-10px;
right:-10px;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='btn'>X</div>
</div>
</body>
</html>
行內元素垂直水平居中
請將html模塊中p元素的內容設置為垂直水平居中。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
p {
width: 800px;
height: 40px;
border: solid 1px black;
/*補全代碼*/
text-align: center;
line-height:40px;
/* display:flex;
justify-content:center;
align-items:center; */
}
</style>
</head>
<body>
<p>牛客網，是一個集筆面試系統、題庫、課程教育、社群交流、招聘內推於一體的招聘類網站。</p>
</body>
</html>
單位
請將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>
請將html模塊div元素的寬度和高度設置為html根元素字體大小的4倍。
注意：只需在css模塊補全樣式內容，請勿修改html模塊。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
div {
/*補全代碼*/
/* rem針對根元素，em針對父元素*/
height:4rem;
width:4rem;
}
</style>
</head>
<body>
<div></div>
</body>
</html>