實驗內(nèi)容
1殖蚕、 根據(jù)所學(xué)知識冒滩，實現(xiàn)如下圖所示的簡單兩列布局微驶。
整個頁面寬度為960px，背景顏色為#CFF开睡。左側(cè)盒子寬度為740px因苹，背景顏色為#C9F，右側(cè)盒子寬度為210px篇恒，背景顏色為#FCF扶檐。左側(cè)和右側(cè)盒子的高度均為300px。
image
2胁艰、 根據(jù)所學(xué)知識款筑，實現(xiàn)如下功能：
a、設(shè)計如圖所示的簡單無序列表腾么，并為每個列表項添加超鏈接奈梳。每個列表項的寬度為50px，高度為30px解虱，列表中的文字在水平和垂直方向上均居中顯示攘须，超鏈接初始狀態(tài)和訪問后的狀態(tài)均為黑色無下劃線，鼠標(biāo)經(jīng)過和點擊時文字均為白色殴泰，無下劃線于宙，背景顏色為#BE3948。
效果圖：
image
任務(wù)
一悍汛、在右側(cè)代碼的body標(biāo)簽中添加一個無序列表捞魁。
二、為每一個列表項設(shè)置超鏈接离咐，可以設(shè)置空鏈接（#）。
三健霹、在右側(cè)代碼的之前旺上，分別定義標(biāo)簽選擇器li和a。
b糖埋、設(shè)計如下功能宣吱，要求當(dāng)前頁的頁碼要顯示紅色背景，其他頁頁碼在鼠標(biāo)經(jīng)過時顯示紅色背景瞳别。
image
任務(wù)
一征候、制作頁碼部分基本的HTML結(jié)構(gòu)杭攻。
二、設(shè)置每一個超鏈接的邊框線疤坝、間距和填充
三兆解、設(shè)置超鏈接的四種狀態(tài)
四、定義當(dāng)前頁碼的CSS樣式
實驗過程
一跑揉、 實現(xiàn)兩列布局
1锅睛、 首先在<style type="text/css">內(nèi)先建一個.mainBox、一個.leftBox历谍、一個.rightBox的樣式以及默認樣式*现拒，并在<body>中使用<div>來調(diào)用定義的樣式。
.mainBox {
width: 960px;
margin: 0 auto;
background-color: #CFF;
overflow: visible;
}
.leftBox {
width: 740px;
height: 300px;
background-color: #C9F;
float: left;
}
.rightBox {
width: 210px;
height: 300px;
background-color: #FCF;
float: right;
} * {
padding: 0;
margin: 0;
}
2望侈、 效果如圖所示印蔬，此時發(fā)現(xiàn)leftBox和rightBox設(shè)置浮動之后脫離了普通的文檔流，不再占用原來文檔中的位置脱衙，因此無法把父div撐開侥猬。
image
3、 所以我們增加一個類選擇器
.clear并并設(shè)置clear:both捐韩；清除浮動退唠，同時為了解決IE6中div有高度的問題可以增加屬性height:0;overflow:hidden;。
.clear {
clear: both;
height: 0;
overflow: hidden;
}
4奥帘、效果如圖：
image
二、 導(dǎo)航列表
1仪召、 首先現(xiàn)在<body>寫好標(biāo)題<h3>課程難度</h3>,然后創(chuàng)建一個列表：
<!--在此制作一個無序列表-->
<ul>
<li>
<a href="#">全部</a>
</li>
<li><a href="#">初級</a></li>
<li><a href="#">中級</a></li>
<li><a href="#">高級</a></li>
</ul>
效果如圖：
image
2寨蹋、 接著給標(biāo)簽li和a設(shè)置樣式：
li{
width:50px;
height:30px;
text-align:center;
line-height:30px;
float:left;
list-style-type:none;
}
a{
display:block;
}
效果圖如下：
image
3、最后再給鏈接的四種狀態(tài)設(shè)置樣式：
a:link,a:visited{
text-decoration:none;
color:#000;
}
a:hover,a:active{
color:#FFF;
background-color:#BE3948;
text-decoration:none;
}
效果圖如下：
image
三扔茅、 頁碼
1已旧、 首先還是在<body>中先寫好頁碼的基本結(jié)構(gòu)
<div class="page">
<a href="#">首頁</a>
<a href="#"><</a>
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">…</a>
<a href="#">></a>
<a href="#">末頁</a>
</div>
2、 然后我們在<style type="text/css">里面先把.page和.page a兩個選擇器寫好樣式：
*{
margin: 0;
padding: 0;
font-size: 12px;
}
.page{
height:40px;
margin-top:10px;
text-align=center;
}
.page a{
display:inline-block;
text-decoration:none;
border:1px solid #E8E8E8;
margin:5px;
padding:5px 10px;
}
效果圖如下：
image
4召娜、接著完成鏈接的四種狀態(tài):
page a:link运褪、.page a:visited、page a:hover玖瘸、.page a:active如下：
.page a:link,.page a:visited{
color:#000;
}
.page a:hover, .page a:active {
color: #FFF;
background-color: #cc1b1b;
}
效果圖如下：
image
5秸讹、 頁碼還需要設(shè)置一個點擊了以后常亮的狀態(tài)，所以再加一個
.active
.active {
background-color: #cc1b1b;
color: #FFF;
}
效果圖如下：
image
實驗總結(jié)
CSS選擇器的使用對元素的樣式控制非常方便實用雅倒，包括排版也是有很大幫助璃诀，比我之前單純用<table>標(biāo)簽時候方便很多，需要更多練習(xí)蔑匣。
