選擇器和複雜選擇器
width: 70%;
height: 20px;
margin: 0 auto;
} 在html檔案的<body>標籤中,新增內容如下: <div class="foot_area1">
<ul>
<li>關於我們|</li>
<li>聯絡我們|</li>
<li>聯絡客服|</li>
<li>合作招商|</li>
<li>商家幫助|</li>
<li>營銷中心|</li>
<li>手機京東|</li>
<li>友情連結|</li>
<li>銷售聯盟|</li>
<li>京東社群|</li>
<li>風險監測|</li>
<li>隱私政策|</li>
</ul>
</div>
則該<div>可以調整為全屏寬度的70%,高20px,自動居中 CSS:
css中很重要的一個是使用選擇器,如上方的14條內容,使用的是類選擇器。
1. 先介紹標籤選擇器,在css檔案中新增
li{
list-style: none;
float: left;
color: #666;
line-height: 5px;
margin-right: 10px;
margin-top: 10px;
}
這段內容會對li標籤進行樣式新增,所有包含該標籤的都會變成這種樣式
2.類選擇器
格式為 .類名{樣式} 如:
.foot_area1{
width: 70%;
height: 20px;
margin: 0 auto;
}
<div class="foot_area1">
<ul>
<li>關於我們|</li>
<li>聯絡我們|</li>
<li>聯絡客服|</li>
<li>合作招商|</li>
<li>商家幫助|</li>
<li>營銷中心|</li>
<li>手機京東|</li>
<li>友情連結|</li>
<li>銷售聯盟|</li>
<li>京東社群|</li>
<li>風險監測|</li>
<li>隱私政策|</li>
</ul>
</div>
通過定義類名,設定樣式,然後在需要的標籤中,用class="設定的類名",即可呼叫樣式
可以<div class="foot_area1"></div> 也可以<li class="foot_area1"></li>
3.ID選擇器
格式 #名{內容}
css內:
#a{
width:500px;
height:500px;
background-color:#999;
}
html內:
<div id="a"></div>
使用id選擇器,然後讓div區域變成500*500,顏色為#999;
4.複合選擇器
1)並集選擇器:用逗號隔開
格式:.名1,.名2{內容}
.center_button1,.center_button2,.center_button3{
width: 158px;
height: 44px;
float: left;
margin-left: 30px;
margin-top: 10px;
line-height: 44px;
text-align: center;
}
2)後代選擇器:用空格隔開,先父後子
格式:名1 名2{內容}
.input li{
float: left;
margin-right: 10px;
white-space: nowrap;
color: #999;
line-height: 20px;
list-style: none;
font-size: 12px;
}
3)超連結選擇器:
a:link{}
a:visited{}
a:hover{}
a:active{}
超連結選擇器4個的順序不能變注:選擇器很重要