css 浮動(dòng)(float)頁面布局

2024-07-11 08:26:55

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

【第一步整體布局與公共CSS定義】
我們先來分析一下這個(gè)頁面

頁面主要分5大塊，頂部的Logo、導(dǎo)航條Nav、Banner、Content、Footer，如下圖

下載 (116.12 KB)

2009-6-1 09:22

這樣HTML就很容易寫出來了

復(fù)制代碼

代碼如下:
<div id="Logo"></div>
<div id="Nav"></div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>

因?yàn)檫@5塊的寬度都是900像素，并且都是水平居中的，所以相應(yīng)CSS代碼如下

復(fù)制代碼

代碼如下:
body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}
/*為什么寫這段代碼沒有忘記吧，作用就是重置可能用到的標(biāo)簽，不明白的去看第四節(jié)的課程關(guān)鍵詞*/
#logo,#Nav,#Banner,#Content,#Footer{width:900px; margin:0 auto;}

【第二步布局Logo欄】
首先我們需要把頁面上的logo給切割出來，其大小為173*46,名字為：logo.gif

一般網(wǎng)站都會(huì)做到點(diǎn)擊logo，就會(huì)回到主頁，應(yīng)該怎么做呢，大家首先會(huì)想到，給圖片加上鏈接就可以了，代碼一般會(huì)這么寫
<a href="#" id="logoLink"><img src="#" /></a>
不過KwooJan要介紹另外一種方法，將圖片做成鏈接a的背景，同樣可以達(dá)到上面說的效果，并且HTML代碼就會(huì)更精簡，少了<img...>，看看下面Logo欄的頁面代碼，紅色的為將logo.gif作為背景的鏈接

HTML代碼：

復(fù)制代碼

代碼如下:
<div id="Logo">
<a href="#" id="logoLink"></a>
</div>

CSS代碼

復(fù)制代碼

代碼如下:
#Logo{
height:80px;/*公共代碼中沒有定義高度，在這里定義*/
}
#logoLink{
display:block;/*將鏈接a轉(zhuǎn)化成塊狀元素，這樣才能顯示出背景*/
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;/*為了讓ie6和ff顯示效果一樣，如果不加上這句話，后面的margin-top:20px;兩個(gè)瀏覽器解析不一樣，大家可以去掉這句話，看看兩者顯示效果差別*/
margin-top:20px;/*設(shè)置a的頂部外邊距為20像素，這樣才能和瀏覽器頂部有段距離，才能和圖片中做的一樣*/
}

上一篇：CSS教程 CSS選擇器

下一篇：CSS 控制頁面樣式的4種方式和優(yōu)先級(jí)問題

發(fā)表評(píng)論

共有條評(píng)論