網(wǎng)頁(yè)分欄設(shè)計(jì)
寫網(wǎng)頁(yè)的時(shí)候樊破，我們可能覺(jué)得自己做出來(lái)的東西和真正的網(wǎng)頁(yè)有所差別巡语，總是“少了點(diǎn)什么”。這很有可能是因?yàn)槲覀兊木W(wǎng)頁(yè)沒(méi)有注意分欄哦分别。
這里是天貓主頁(yè)的截圖遍愿，大家可以觀察一下它的分欄設(shè)計(jì)。
右上角是搜索欄耘斩，頁(yè)眉是導(dǎo)航欄沼填，中間是促銷廣告，分欄十分清晰括授。
我們將用CSS來(lái)實(shí)現(xiàn)一個(gè)基本的分欄頁(yè)面坞笙，大致分布如下。
導(dǎo)航欄
導(dǎo)航欄的制作我們?cè)谇懊嬉黄恼轮幸呀?jīng)講過(guò)了荚虚，這里只貼代碼薛夜。
CSS樣式：
ul { /*設(shè)置導(dǎo)航欄的框框*/
margin: 100px auto; /*框框整體的位置，30px是指離網(wǎng)頁(yè)的頂部和下部的距離版述，auto控制的是左右距離為自動(dòng)調(diào)節(jié)*/
margin-bottom: 10px auto;
width: 530px; /*框框的寬度*/
height: 0px auto; /*框框的長(zhǎng)度*/
padding: 0px; /*將框框的padding設(shè)置為零梯澜，不然會(huì)導(dǎo)致框框里的內(nèi)容與框邊緣有間隔*/
/*border:1px solid #000;/*添加邊框*/
}
li {
list-style-type: none; /* 去掉li前的點(diǎn) */
float: left; /*將li設(shè)置成做浮動(dòng)，變?yōu)槁?lián)動(dòng)*/
}
a {
display: block; /*將a變成塊狀*/
width: 100px; /*設(shè)置塊的寬度*/
height: 50px; /*設(shè)置塊的長(zhǎng)度*/
font-family: Microsoft Yahei;
line-height: 50px; /*設(shè)置字體在塊中的高度*/
background-color: #2f4f4f;
margin: 0px 0px; /*塊里的高寬通過(guò)margin設(shè)置*/
color: #fff;
text-align: center; /*字體居中*/
text-decoration: none; /*去掉下劃線*/
font-size: 15px;
}
a:hover {
background-color: #2f6f4f;
}
HTML引用
<ul class=daohang>
<li><a href="">首頁(yè)</a></li>
<li><a href="">經(jīng)典美文</a></li>
<li><a href="">名家誦讀</a></li>
<li><a href="">了解更多</a></li>
</ul>
效果
分欄實(shí)現(xiàn)
基本的分欄代碼框架是這樣的
<div>
<div id="left"> ...
</div>
<div id="middle">...
</div>
</div>
這意味著渴析，我們要定義兩個(gè)ID名稱為left 和middle的CSS類選擇器
#left {
width: 120px;
background-color: pink;
/* position:relative; */
margin-left: 100px auto;
float: left;
margin-top: 10px;
}
#middle {
width: 260px;
background-color: gray;
margin-left: 320px auto;
margin-top: 10px;
}
之后在html中引用晚伙。
效果如下圖：
表格實(shí)現(xiàn)
大家看到我們?cè)谥虚g一欄中插入了表格吮龄，這到底是如何實(shí)現(xiàn)的呢？
HTML
<table border="1" align="center" style="margin-top:20px;bottom:30px;height:40px;width:80px;">
<!---------------------border="1",表格有邊框-->
<tr>
<th>title</th>
<th>author</th>
</tr>
<tr>
<td>背影</td>
<td>
朱自清
</td>
</tr>
</table>
<table> 標(biāo)簽定義 HTML 表格咆疗。簡(jiǎn)單的 HTML 表格由 table 元素以及一個(gè)或多個(gè) tr漓帚、th 或 td 元素組成。
tr 元素定義表格行
th元素定義表頭
td元素定義表格單元民傻。
頁(yè)腳實(shí)現(xiàn)
CSS
footer {
width: 90%;
max-width: 430px;
margin-top: 30px;
bottom: 0px;
height: 50px;
background: #111;
color: white;
position: fixed;
}
HTML
<footer>這是一個(gè)快樂(lè)的頁(yè)腳</footer>
position: fixed 不論我們?nèi)绾卫瓌?dòng)瀏覽器的滾動(dòng)條胰默，頁(yè)腳在瀏覽器中的位置都是不會(huì)變化的
固定的標(biāo)題和右下邊框
標(biāo)題
CSS
h1 {
position: fixed;
top: 0;
width: 500px;
margin: 0 auto;
background: white;
padding: 10px;
}
HTML
<h1>An example</h1>
效果
可以看到，當(dāng)下拉瀏覽器滾動(dòng)條的時(shí)候漓踢，標(biāo)題固定在頁(yè)面框不動(dòng)
右下
用這個(gè)我們也可以實(shí)現(xiàn)右下角有一個(gè)小框框牵署，固定不動(dòng)的效果
<aside style="position:fixed ;bottom : 0;float :right;height:60px;width:150px;
background-color:aquamarine;color:black;margin-left:450px">
聯(lián)系方式：13529502940</aside>
整體頁(yè)面效果如下：
不同的CSS樣式
如何輕易地改變一個(gè)網(wǎng)頁(yè)的風(fēng)格，又不改變它的內(nèi)容呢喧半？
答案當(dāng)然是使用不同的CSS樣式啦奴迅。
<link rel="stylesheet" type="text/css" href="StyleSheet2.css" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css" />
只要改變不同CSS文件中設(shè)定的樣式，將同一個(gè)HTML文件綁上不同的CSS樣式就會(huì)有不同的效果挺据。
