收藏
批改狀態(tài)：未批改
老師批語：
重點(diǎn)部分：
樣式分為：內(nèi)聯(lián)樣式、外部樣式、內(nèi)部樣式三種
1、元素選擇器：直接用標(biāo)簽的形式
2、ID 選擇器：#+id
3、類選擇器：class，用.+類
4、父子選擇器：例（ul li）
5、通配選擇器：ul*
6、子元素選擇器：ul>li(鎖定ul下的li標(biāo)簽)
7、相鄰兄弟選擇器：例（#item1+li[選中#item1下面的一個(gè)li標(biāo)簽]）
代碼部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用戶頭像設(shè)計(jì)</title>
<style>
#box1{
height: 50px;
border: dashed 1px;
clear: both;
}
span{
width: 50px;
height: 50px;
border-radius: 50%;
background: #000000;
text-align: center;
line-height: 50px;
color: #FFFFFF;
display: block;
margin: 0px;
float: left;
}
#c2{
width: 50px;
height: 50px;
border-radius: 50%;
background: blueviolet;
text-align: center;
line-height: 50px;
margin: 0px;
float: left;
}
div .c3{
width: 50px;
height: 50px;
border-radius: 50%;
background: #DC143C;
text-align: center;
line-height: 50px;
margin: 0px;
float: left;
}
div>.c4:before{
width: 50px;
height: 50px;
border-radius: 50%;
background: #A52A2A;
text-align: center;
line-height: 50px;
margin: 0px;
float: left;
content:'4';
}
div>.c4+.c5:before{
width: 50px;
height: 50px;
border-radius: 50%;
background: #FFA500;
text-align: center;
line-height: 50px;
margin: 0px;
float: left;
content:'5';}
span*:before{
width: 50px;
height: 50px;
border-radius: 50%;
background: #000000;
text-align: center;
line-height: 50px;
color: #FFFFFF;
display: block;
margin:0px;
float: left;
}
div[class="both7"]:before
{
width: 50px;
height: 50px;
border-radius: 50%;
background: darkcyan;
text-align: center;
line-height: 50px;
color: #FFFFFF;
float: left;
content: '7';
}
#box3{
float: left;
width: 200px;
height: 300px;
}
.p1,.p3{
color: red;
}
.p2{
color: #008B8B;
}
p:last-child{
color: red;
}
p{
}
div p:only-child{
color: #FFA500;
}
.div3 p:only-of-type{
color: #8A2BE2;
}
</style>
</head>
<body>
<div iD="box1">
<span>1</span><!--用元素選擇器的方法-->
<div ID="c2">2</div><!--用類選擇器的方法-->
<div class="c3">3</div><!--用父子選擇器的辦法-->
<div class="c4"></div><!--子選擇器方式，此處使用了偽類選擇器-->
<div class="c5"></div><!--用相鄰兄弟選擇器方法-->
<span id="box2">6</span><!--使用統(tǒng)配選擇器方法-->
<div class="both7"></div><!--使用指定單詞選擇器方法-->
</div>
<div id="box3">
<p class="p1">這是第一行代碼，變紅</p>
<div><p>這是第二行代碼，變綠</p></div>
<p class="p3">跟第一行一起變紅</p>
<p class="p4">跟第二行代碼一起變綠</p>
<div class="div3">
<p class="p5">變紫色</p>
<strong class="p7">跟第一行一樣變紅</strong>
</div>
</div>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
-
手抄部分：
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)