HTML開發(fā)部落格之註冊(cè)頁(yè)面設(shè)計(jì)（一）
CSS檔案的引入
新檔案reg.html檔案
首先我們來(lái)分析網(wǎng)頁(yè)佈局
#這是我們頁(yè)面完成後的效果，
#網(wǎng)頁(yè)分成三部分
頭部，主體，和底部我們按照這個(gè)順序開始寫。
頭導(dǎo)覽列的編寫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用戶注冊(cè)頁(yè)面</title> </head> <body> <div id="top"> <div id="menu"> <ul> <li><img src=/upload/course/000/000/004/5816f7b0056da728.png></li> <li><a href=""> 首頁(yè)</a></li> <li><a href="">科技資訊</a></li> <li><a href="">心情隨筆</a></li> <li><a href="">資源收藏</a></li> <li><a href="">圖文圖片</a></li> <li><a href="">留言板</a></li> <li class="mi" ><a href="">登陸</a>/<a href="">注冊(cè)</a></li> </ul> </div> </div> </body> </html>
建立div盒子，在盒子中嵌套div，使用無(wú)序列表創(chuàng)建導(dǎo)航，引入logo圖片。
建立css檔案
@charset "utf-8";
body{
background-color: #F0F0F0;
}
*{
border: 0px;
padding: 0px;
margin: 0px;
font-size: 14px;
}
#top{
width: 100%;
height: 90px;
background-color: white;
border-bottom: 1px solid #bbbbbb;
}
#menu{
width: 1000px;
overflow: hidden;
margin: 0 auto;
}先對(duì)全域初始化，對(duì)div做兩個(gè)id標(biāo)籤，top和menu,分別設(shè)定頭部的寬高，和頁(yè)面整體佈局的寬高。這樣我們就得到如下圖所示的頁(yè)面
接著對(duì)頁(yè)面進(jìn)行樣式的修改
#menu img{
height: 90px;
}
#menu ul{
list-style-type: none;
}修改img的高度,對(duì)ul序列去掉格式。
#menu ul li{
float: left;
height: 90px;
line-height: 90px;
margin-right: 50px;
}
#menu ul li a{
color: black;text-decoration: none;
display: inline-block;
}
#menu ul li a:hover{color: #FFD700;text-decoration: none}對(duì)li標(biāo)籤進(jìn)行設(shè)置，做浮動(dòng)操作，調(diào)整高度和間距，使用display: inline-block;使導(dǎo)航列成為快元素。去掉下劃線。並更改標(biāo)籤點(diǎn)擊樣式。效果如下圖所示，我們的頭部導(dǎo)覽列就完成了。
