引言
任務(wù)一
實(shí)現(xiàn)如簡(jiǎn)單兩列布局沽损。整個(gè)頁(yè)面寬度為960px亮元，背景顏色為#CFF猛计。左側(cè)盒子寬度為740px，背景顏色為#C9F爆捞，右側(cè)盒子寬度為210px奉瘤，背景顏色為#FCF。左側(cè)和右側(cè)盒子的高度均為300px煮甥。如圖：
任務(wù)二
設(shè)計(jì)如圖所示的簡(jiǎn)單無(wú)序列表盗温，并為每個(gè)列表項(xiàng)添加超鏈接。每個(gè)列表項(xiàng)的寬度為50px成肘，高度為30px卖局，列表中的文字在水平和垂直方向上均居中顯示，超鏈接初始狀態(tài)和訪問后的狀態(tài)均為黑色無(wú)下劃線双霍，鼠標(biāo)經(jīng)過和點(diǎn)擊時(shí)文字均為白色砚偶，無(wú)下劃線批销，背景顏色為#BE3948。如圖：
任務(wù)三
設(shè)計(jì)如下功能蟹演，要求當(dāng)前頁(yè)的頁(yè)碼要顯示紅色背景风钻，其他頁(yè)頁(yè)碼在鼠標(biāo)經(jīng)過時(shí)顯示紅色背景。
環(huán)境
- html6
- css
- javascript
- Dreamweaver2020
具體過程
任務(wù)一
- 在body標(biāo)簽中添加一個(gè)div酒请，設(shè)置其class屬性為mainBox骡技。在mainBox中添加兩個(gè)div，其class屬性分別為leftBox和rightBox羞反。
<body>
<div class="mainBox">
<div class="leftBox"></div>
<div class="rightBox"></div>
</div>
</body>
- 在頁(yè)面中定義mainBox布朦、leftBox、rightBox的CSS樣式昼窗。
<style type="text/css">
.mainBox{
width: 960px;
height:300px;
background-color: #CFF;
}
.leftBox{
width: 740px;
height:300px;
float: left;
background-color: #C9F;
}
.rightBox{
width: 210px;
height:300px;
float: left;
margin-left: 10px;
background-color: #FCF;
}
</style>
-
最后的效果：
任務(wù)二
- 在的body中添加一個(gè)無(wú)序列表是趴。為每一個(gè)列表項(xiàng)設(shè)置空鏈接（#）。
<body>
<h3>課程難度</h3>
<ul>
<li><a href="#">全部</a></li>
<li><a href="#">初級(jí)</a></li>
<li><a href="#">中級(jí)</a></li>
<li><a href="#">高級(jí)</a></li>
</ul>
</body>
- 設(shè)置對(duì)應(yīng)的css樣式
<style type="text/css">
ul{
list-style-type: none;
}
li{
float: left;/*使列表水平排列*/
}
a:link,a:visited{
display: block;/*將超鏈接改為塊狀元素澄惊，可以應(yīng)用寬高屬性*/
width: 50px;
text-align: center;
line-height: 30px;/*垂直居中對(duì)齊*/
text-decoration: none;/*去掉超鏈接默認(rèn)的下劃線*/
color: black;/*去掉超鏈接默認(rèn)的藍(lán)色*/
}
a:hover,a:active{
background-color:#C00003;
color: white;
}
</style>
-
最后的效果：
任務(wù)三
- 在body中插入無(wú)序列表和超鏈接唆途，為當(dāng)前頁(yè)面的超鏈接添加class：currentPage。
<body>
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#"><</a></li>
<li><a class="currentPage" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">···</a></li>
<li><a href="#">></a></li>
<li><a href="#">末頁(yè)</a></li>
</ul>
</body>
- 設(shè)置相應(yīng)的css樣式
<style type="text/css">
ul{
list-style-type: none;
}
li{
float: left;
}
a:link,a:visited{
display: inline-block;/*為了使超鏈接能適應(yīng)文字寬度同時(shí)又能有邊距*/
margin: 6px;
border: 1px solid #E8E8E8;
padding: 5px 12px;
text-align: center;
text-align: center;
text-decoration: none;
color: black;
}
a.currentPage,a:hover,a:active{
background-color:#C00003;
border: none;
padding: 6px 13px;/*去掉邊框之后總寬高不變*/
color: black;
}
</style>
-
最后的效果image.png
總結(jié)
- 理解block掸驱、inline肛搬、inline-block的不同
- 通常使用<ul>元素來制作導(dǎo)航欄
