中文一国产一无码一日韩,中文字幕日韩欧美一区二区,国产日韩精品中文字无码

觸屏版
全國(guó)服務(wù)熱線：0571-87205688

價(jià)格查詢(xún) 批量查詢(xún) 一鍵轉(zhuǎn)入

查詢(xún)

或者

立即發(fā)布需求

昵稱(chēng)：月光邊境

接單：599 關(guān)注TA

達(dá)標(biāo)率 0%

博文分類(lèi)

二列和三列布局-Web標(biāo)準(zhǔn)(div+css)教程

作者：月光邊境 瀏覽：158次發(fā)布時(shí)間：2018-03-28

評(píng)論

贊0

一、兩列自適應(yīng)寬度

　　下面以常見(jiàn)的左列固定右列自適應(yīng)為例，因?yàn)閐iv為塊狀元素，默認(rèn)情況下占據(jù)一行的空間，要想讓下面的div跑到右側(cè)，就需要做助css的浮動(dòng)來(lái)實(shí)現(xiàn)。首先創(chuàng)建html代碼如下：

　　按照如圖所示的創(chuàng)建方法，把兩個(gè)div都創(chuàng)建出來(lái)，或手工寫(xiě)出代碼。div創(chuàng)建完成后，開(kāi)始創(chuàng)建css樣式表，代碼如下：

　　#side { background: #99FF99; height: 300px; width: 120px; float: left; }

　　#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }

　　先創(chuàng)建#side的樣式，為了便于查看，設(shè)置了背景色。注意，side的浮動(dòng)設(shè)置為向左浮動(dòng)；

　　然后創(chuàng)建#main樣式，注意這里設(shè)置#main的左邊距為120px。預(yù)覽結(jié)果如下：

　　當(dāng)我們拖動(dòng)瀏覽器窗口變大變小時(shí)，#main的寬度也會(huì)跟著改變。這里設(shè)置margin-left:120px;正好讓出#side占去的120px寬度，如果這里設(shè)置為122px的話(huà)，中間將出現(xiàn)2px的空隙，大家可以試一下。

　　代碼原文：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<style>

　　#side { background: #99FF99; height: 300px; width: 120px; float: left; }

　　#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }

　　</style>

　　</head>

　　<body>

　　</body>

　　</html>

　　二、兩列固定寬度

　　有了前面的基礎(chǔ)，兩列固定固定寬度就容易多了，只需要把#main的寬度由百分比改為固定值，如下圖：

　　三、兩列固定寬度居中

　　兩列固定寬度居中，需要在兩列固定寬度的基礎(chǔ)上改進(jìn)，在學(xué)一列固定寬度居中時(shí)，我們知道讓它居中的方法，所以這里需要在這兩個(gè)div之外再加一個(gè)父div：

　　</div>

　　操作方法：在源代碼里選中這兩個(gè)div的代碼后，點(diǎn)擊工具欄上插入div按鈕，填寫(xiě)id后確定，得到如上的代碼

　　下面就需要設(shè)置#content的樣式了，我們知道，#side的寬度為120px，#main寬度為350px，那么#content的寬度應(yīng)該為這兩者之和，然后設(shè)置#content居中，那么整體就居中了：

　　代碼原文：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<style>

　　#content { width:470px; margin:0 auto;}

　　#side { background: #99FF99; height: 300px; width: 120px; float: left; }

　　#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }

　　</style>

　　</head>

　　<body>

　　</div>

　　</body>

　　</html>

　　四、xhtml的塊級(jí)元素(div)和內(nèi)聯(lián)元素(span)

　　塊級(jí)元素：就是一個(gè)方塊，像段落一樣，默認(rèn)占據(jù)一行出現(xiàn)；

　　內(nèi)聯(lián)元素：又叫行內(nèi)元素，顧名思義，只能放在行內(nèi)，就像一個(gè)單詞，不會(huì)造成前后換行，起輔助作用。

　　一般的塊級(jí)元素諸如段落<p>、標(biāo)題<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。而內(nèi)聯(lián)元素則如: 表單元素<input>、超級(jí)鏈接<a>、圖像<img>、<span> ........ 塊級(jí)無(wú)素的顯著特點(diǎn)是：每個(gè)塊級(jí)元素都是從一個(gè)新行開(kāi)始顯示，而且其后的無(wú)素也需另起一行進(jìn)行顯示。

　　從上圖的例子可以看出，塊級(jí)元素默認(rèn)占據(jù)一行，相當(dāng)于在它之前和之后各插入了一個(gè)換行；而內(nèi)聯(lián)元素span沒(méi)對(duì)顯示效果造成任何影響，事實(shí)也是如此；em只是讓字體變成了斜體，也沒(méi)有單獨(dú)占據(jù)一行。這就是塊級(jí)元素和內(nèi)聯(lián)元素，正因?yàn)橛辛诉@些元素，才使我們的網(wǎng)頁(yè)變得豐富多彩。

　　如果沒(méi)有css的作用，塊元素會(huì)順序以每次另起一行的方式一直往下排。而有了css以后，我們可以改變這種html的默認(rèn)布局模式，把塊元素?cái)[放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是說(shuō)，可以用css的display:inline將塊級(jí)元素改變?yōu)閮?nèi)聯(lián)元素，也可以用display:block將內(nèi)聯(lián)元素改變?yōu)閴K元素。

　　五、float屬性

　　回到我們的例子當(dāng)中，理解了塊級(jí)元素和內(nèi)聯(lián)元素，對(duì)理解浮動(dòng)就容易多了。float是個(gè)重點(diǎn)，希望大家都能理解。上例中用float讓元素向左浮動(dòng)，在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素；且要指明一個(gè)寬度，否則它會(huì)盡可能地窄；另外當(dāng)可供浮動(dòng)的空間小于浮動(dòng)元素時(shí)，它會(huì)跑到下一行，直到擁有足夠放下它的空間。

　　想必大家都用過(guò)word排過(guò)版，當(dāng)中有個(gè)圖文混排功能，如下圖：

　　這個(gè)功能非常類(lèi)似于css中的浮動(dòng)，下面我們用css來(lái)實(shí)現(xiàn)這一功能：

　　<div id="main"> 標(biāo)準(zhǔn)之路提供DIV+CSS教程,DIV+CSS視頻教程,web2.0標(biāo)準(zhǔn),DIV+CSS布局入門(mén)教程,網(wǎng)頁(yè)布局實(shí)例,css布局實(shí)例,div+css模板,div+css實(shí)例解析,網(wǎng)站重構(gòu)，網(wǎng)頁(yè)代碼,水晶圖標(biāo),幻燈廣告圖片.教程適合初學(xué)者循序漸進(jìn)學(xué)習(xí)!</div>

　　創(chuàng)建完以上代碼后，在瀏覽器中預(yù)覽會(huì)顯示如下結(jié)果：

　　下面用css讓side浮動(dòng)，再看看效果

　　body { font-size:18px; line-height:200%; }

　　#side { float:left;}

　　大家看看，是不是和word的效果已經(jīng)很像相了，但這里的文字和圖片右側(cè)貼的很近，怎么辦呢？剛才已經(jīng)說(shuō)了，當(dāng)元素浮動(dòng)過(guò)之后，需要指定一個(gè)寬度，否則它會(huì)盡可能窄。那么把side的寬度設(shè)置為大于圖片的寬度，它們中間應(yīng)該就有空隙了。圖片的寬度是192px，設(shè)置side為202px，中間將會(huì)有10px的空隙了。

　　body { font-size:18px; line-height:200%; }

　　#side { float:left; width:202px;}

　　細(xì)心的朋友已經(jīng)發(fā)現(xiàn)，上例中#main的div還定義了margin-left:120px;而這里沒(méi)有定義，但它多出的文字卻跑到了圖片(#side)的下方，是不是設(shè)置margin-left:后，它就不會(huì)跑到#side的正文呢？如果你能想到這一點(diǎn)，你的確是太聰明了，事實(shí)確實(shí)是這樣，在css樣式表中加上下面一行

　　#main { margin-left:202px;}

　　這就是如何應(yīng)用浮動(dòng)實(shí)現(xiàn)兩列布局的原理。那么三列呢？

　　六、三列自適應(yīng)寬度

　　三列自適應(yīng)寬度，一般常用的結(jié)構(gòu)是左列和右列固定，中間列根據(jù)瀏覽器寬度自適應(yīng)。下面在二列自適應(yīng)寬度基礎(chǔ)上修改一下

　　增加以下css樣式：

　　#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

　　把原來(lái)#main樣式的width:70%去掉，然后設(shè)置左右外邊距各120px，讓出左右列的寬度

　　#main { background: #99FFFF; height: 300px; margin:0 120px; }

　　預(yù)覽一下效果如下：

　　也許預(yù)覽出來(lái)的效果和我的不一樣，別急，還有一項(xiàng)設(shè)置，默認(rèn)body是有外邊距的，所以這里還得設(shè)置body的外邊距為0；點(diǎn)擊css面板上的新建按鈕，然后在新建面板中選擇：標(biāo)簽（重定義標(biāo)簽外觀），然后選擇body，設(shè)置body的邊界為0即可。

　　代碼原文：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<style>

　　body { margin:0;}

　　#side { background: #99FF99; height: 300px; width: 120px; float: left; }

　　#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

　　#main { background: #99FFFF; height: 300px; margin:0 120px; }

　　</style>

　　</head>

　　<body>

　　</body>

　　</html>

　　七、三列固定寬度

　　三列固定寬度可以在三列自適應(yīng)基礎(chǔ)上添加一個(gè)父div，并設(shè)置這個(gè)div的寬度即可，如下，添加一個(gè)id為content的父容器。

　　在源代碼里選中這三個(gè)div，然后點(diǎn)擊工具欄上的“插入div標(biāo)簽”按鈕，這時(shí)彈出的窗口插入項(xiàng)會(huì)默認(rèn)為：在選定的內(nèi)容旁換行，輸入id為content，然后給這個(gè)div定義個(gè)寬度

　　三列固定寬度出來(lái)了，要想實(shí)現(xiàn)三列固定寬度居中就更方便了，只需設(shè)置#content {margin:0 auto;}即可

　　代碼原文：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<style>

　　body { margin:0;}

　　#content { width:470px; margin:0 auto;}

　　#side { background: #99FF99; height: 300px; width: 120px; float: left; }

　　#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

　　#main { background: #99FFFF; height: 300px; margin:0 120px; }

　　</style>

　　</head>

　　<body>

　　</div>

　　</body>

　　</html>

　　八、IE6的3像素bug

　　3像素bug是IE6的一個(gè)著名的bug，當(dāng)浮動(dòng)元素與非浮動(dòng)元素相鄰時(shí)，這個(gè)3像素的Bug就會(huì)出現(xiàn)。看下面這個(gè)左列固定，右列液態(tài)的例子，css代碼如下：

　　body { margin:0;}

　　#side { float: left; background:#99FF99; height: 300px; width: 120px;}

　　#main { background: #99FFFF; height: 300px;}

　　html代碼如下：

　　下面看看IE6和IE7中的顯示效果：

　　從截圖中明顯看出，IE6會(huì)在兩個(gè)div中間加上3px的空隙，那么要解決這個(gè)問(wèn)題，請(qǐng)?jiān)?side上加上_margin-right:-3px;記住，前邊加上一下劃線，這樣這個(gè)樣式專(zhuān)門(mén)針對(duì)IE6生效。IE7和FF下還會(huì)正常顯示。

　　body { margin:0;}

　　#side { float: left; background:#99FF99; height: 300px; width: 120px; _margin-right:-3px;}

　　#main { background: #99FFFF; height: 300px; }

　　看看，是不是問(wèn)題已經(jīng)解決了。但它不能通過(guò)W3C驗(yàn)證。當(dāng)兩列固定寬度時(shí)，最好把#main也固定寬度且向右浮動(dòng)，這樣就可以避免IE6的3像素bug了。

上一篇：超鏈接偽類(lèi)-Web標(biāo)準(zhǔn)(div+css)教程 下一篇：做網(wǎng)站優(yōu)化搜索引擎優(yōu)化怎么運(yùn)用免費(fèi)資本

評(píng)論(0人參與，0條評(píng)論)

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

博文分類(lèi)

二列和三列布局-Web標(biāo)準(zhǔn)(div+css)教程

猜你喜歡

評(píng)論(0人參與，0條評(píng)論)

最新評(píng)論