亚洲精品视频一区二区,一级毛片在线观看视频,久久国产a,狠狠狠色丁香婷婷综合久久五月,天天做天天欢摸夜夜摸狠狠摸

在線(xiàn)客服與您一對一交流
當前位置: 主頁(yè) > 行業(yè)新聞 > seo >

二列和三列布局-Web標準(div+css)教程

來(lái)源：未知 日期：2017-11-23 | 分類(lèi)：seo

今天學(xué)習《十天學(xué)會(huì )web標準(div+css)》的二列和三列布局，將涉及到以下內容和知識點(diǎn)

一、二列自適應寬度

二、二列固定寬度

三、二列固定寬度居中

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

五、float屬性

六、三列自適應寬度

七、三列固定寬度

八、三列固定寬度居中

九、IE6的3像素bug

一、兩列自適應寬度

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

<div id="side">此處顯示 id "side" 的內容</div>

<div id="main">此處顯示 id "main" 的內容</div>

按照如圖所示的創(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的樣式，為了便于查看，設置了背景色。注意，side的浮動(dòng)設置為向左浮動(dòng)；

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

當我們拖動(dòng)瀏覽器窗口變大變小時(shí)，#main的寬度也會(huì )跟著(zhù)改變。這里設置margin-left:120px;正好讓出#side占去的120px寬度，如果這里設置為122px的話(huà)，中間將出現2px的空隙，大家可以試一下。西安做網(wǎng)站推薦閱讀>>> 縱向導航菜單及二級彈出菜單-Web標準(div+css)教程，

代碼原文：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style>

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

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

</style>

</head>

<body>

<div id="side">此處顯示 id "side" 的內容</div>

<div id="main">此處顯示 id "main" 的內容</div>

</body>

</html>

二、兩列固定寬度

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

三、兩列固定寬度居中

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

<div id="content">

<div id="side">此處顯示 id "side" 的內容</div>

<div id="main">此處顯示 id "main" 的內容</div>

</div>

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

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

代碼原文：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<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 id="content">

<div id="side">此處顯示 id "side" 的內容</div>

<div id="main">此處顯示 id "main" 的內容</div>

</div>

</body>

</html>

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

塊級元素：就是一個(gè)方塊，像段落一樣，默認占據一行出現；

內聯(lián)元素：又叫行內元素，顧名思義，只能放在行內，就像一個(gè)單詞，不會(huì )造成前后換行，起輔助作用。西安網(wǎng)站建設推薦閱讀>>> 超鏈接偽類(lèi)-Web標準(div+css)教程，

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

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

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

五、float屬性

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

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

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

<div id="side"><img src="http://www.aa25.cn/uploadfile/taobao0903/20090212165039036721.gif" width="192" height="142" /></div>

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

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

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

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

#side { float:left;}

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

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

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

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

#main { margin-left:202px;}

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

六、三列自適應寬度

三列自適應寬度，一般常用的結構是左列和右列固定，中間列根據瀏覽器寬度自適應。下面在二列自適應寬度基礎上修改一下

<div id="side">此處顯示 id "side" 的內容</div>

<div id="side1">此處顯示 id "side1" 的內容</div>

<div id="main">此處顯示 id "main" 的內容</div>

增加以下css樣式：

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

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

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

預覽一下效果如下：

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

代碼原文：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<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>

<div id="side">此處顯示 id "side" 的內容</div>

<div id="side1">此處顯示 id "side1" 的內容</div>

<div id="main">此處顯示 id "main" 的內容</div>

</body>

</html>

七、三列固定寬度

三列固定寬度可以在三列自適應基礎上添加一個(gè)父div，并設置這個(gè)div的寬度即可，如下，添加一個(gè)id為content的父容器。西安網(wǎng)站建設推薦閱讀>>> html列表-Web標準(div+css)教程，

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

三列固定寬度出來(lái)了，要想實(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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<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 id="content">

<div id="side">此處顯示 id "side" 的內容</div>

<div id="side1">此處顯示 id "side1" 的內容</div>

<div id="main">此處顯示 id "main" 的內容</div>

</div>

</body>

</html>

八、IE6的3像素bug

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

body { margin:0;}

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

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

html代碼如下：

<div id="side">此處顯示 id "side" 的內容</div>

<div id="main">此處顯示 id "main" 的內容</div>

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

從截圖中明顯看出，IE6會(huì )在兩個(gè)div中間加上3px的空隙，那么要解決這個(gè)問(wèn)題，請在#side上加上_margin-right:-3px;記住，前邊加上一下劃線(xiàn)，這樣這個(gè)樣式專(zhuān)門(mén)針對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驗證。當兩列固定寬度時(shí)，最好把#main也固定寬度且向右浮動(dòng)，這樣就可以避免IE6的3像素bug了。

文章出處：標準之路 編輯：楊雨晨思

相關(guān)文章：

  • 西安網(wǎng)站建設_西安做網(wǎng)站_西安網(wǎng)站制作——西安網(wǎng)絡(luò )公司...

  • CSS實(shí)現圖片裁剪居中 其實(shí)，css實(shí)現起來(lái)很簡(jiǎn)單，只需要設置img的樣式：object-fit：none即可，不過(guò)你要給img一個(gè)高度，因為裁剪嘛 頁(yè)面：（圖片可以自己隨便截兩張來(lái)測試） !--長(cháng)圖片-- div clas...

  • CSS背景圖片自適應全屏 .bg{ background:url(bg.png) no-repeat; background-size:cover; filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )//IE特有的濾鏡 }...

  • Viewport viewport：可視窗口，也就是瀏覽器。 vw Viewport寬度， 1vw 等于viewport寬度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的數學(xué)運算規則，但是也提供更智能的功能：...

  • 從企業(yè)建站角度講，最便捷、最適合企業(yè)的建站系統莫過(guò)于自助建站系統，市場(chǎng)上可供選擇的自助建站平臺也是一搜一大把。這些自助建站平臺采用傻瓜式建站風(fēng)格，容易上手，操作簡(jiǎn)單方便...

  • 現在想做一個(gè)網(wǎng)站成本很低了，買(mǎi)個(gè)域名，買(mǎi)個(gè)幾十塊空間，弄個(gè)網(wǎng)站建設程序就可以開(kāi)始你的玩耍了，如果你還想找成本更低的，可以看下面的分享。 如何創(chuàng )建網(wǎng)站一直都是很多朋友想要知...

  • 商城網(wǎng)站建設如何將吸引力提升 在信息如此豐富多樣的今天，商城網(wǎng)站建設如何才能夠在眾多的同類(lèi)當中脫穎而出，獲得大眾的吸引和青睞呢？這其實(shí)是相關(guān)網(wǎng)站建設人員一直在思考的一個(gè)問(wèn)...

  • 現在越來(lái)越多的企業(yè)重視網(wǎng)站的運營(yíng)推廣，那怎樣推廣效果更好呢？西安蟠龍網(wǎng)絡(luò )小編認為沒(méi)用永恒不變得，而且要根據企業(yè)的具體情況選擇合適的推廣方式才是最好的，如果你又運營(yíng)推廣的...

  • 隨著(zhù)互聯(lián)網(wǎng)的發(fā)展，人們每時(shí)每刻已經(jīng)離不開(kāi)網(wǎng)絡(luò )，而網(wǎng)站是網(wǎng)絡(luò )的基本組成部分，可以這么說(shuō)，網(wǎng)絡(luò )是由各種各樣的網(wǎng)站組成的，當下，網(wǎng)站是每個(gè)企業(yè)的標配，很多個(gè)人都有自己的網(wǎng)站，...

  • 網(wǎng)站現在是一個(gè)企業(yè)的標配，很多沒(méi)有網(wǎng)站的企業(yè)不清楚網(wǎng)站對企業(yè)有什么作用，那么今天西安蟠龍小編總結一下網(wǎng)站對企業(yè)都有哪些好處，希望看完之后您對網(wǎng)站有更深一層的認識。 一、低...

  • 公司：西安蟠龍網(wǎng)絡(luò )科技有限公司
  • 聯(lián)系人：張經(jīng)理
  • 手機/微信：
  • Q Q： 點(diǎn)擊這里給我發(fā)消息
  • 地址：西安市雁塔區唐延南路11號逸翠園i都會(huì )
亚洲精品视频一区二区,一级毛片在线观看视频,久久国产a,狠狠狠色丁香婷婷综合久久五月,天天做天天欢摸夜夜摸狠狠摸