DIV+CSS佈局基本流程及實例介紹

時間 2019-11-13

標籤 div+css div css 佈局基本流程實例介紹欄目 HTML 简体版

原文原文鏈接

都說用DIV+CSS佈局來設計網站便於優化，容易被收錄，那麼你對DIV+CSS佈局的用法是否瞭解？CSS佈局是網頁html經過DIV標籤+CSS樣式表代碼開發製做的（html）網頁的統稱。DIV+CSS佈局是如今很是流行的佈局方法，替代了原來的表格佈局。下面咱們先來看下學習DIV+CSS佈局的基本步驟：php

1、認清學習的要求

一、弄清目的，首先要認識爲何要學習CSS？

二、心態不能急，若是你很急躁，不然會很快喪失興趣。

三、堅持，這個不是一到兩天的事情，是一個漫長的過程（至少兩個月）。

2、基礎學習

一、瞭解CSS做用是什麼？（即CSS、html和js的關係是什麼，html結構重要性）

二、css基礎知識、css屬性樣式css

三、html

上面幾點，通常都是很快的掌握了，也不須要作到精通，瞭解大概就能夠。

差很少時候，開始在網上找一些psd設計稿，本身作作看，作完以後發現問題，並把他們進行總結。

3、學會分析別人網頁佈局

當你作psd設計的代碼，發現問題，可能找不到答案或沒有人幫你回答，也不要急，這時最好看看別人網頁的佈局結構，主要看html佈局框架，進行借鑑（固然網上還有不少結構代碼很槽糕）。而後瞭解美工圖如何分析、如何使用PS工具切出須要的素材、如何使用這些切出的圖片素材進行佈局、佈局技巧、兼容性解決與避免等。

總之：就是讓本身佈局時候能知道大的佈局結構如何佈局，創建佈局思想與技巧。

4、代碼的規範

當你看完不少別人的網頁代碼以後，你會發現，他們都有規範，這些規範網上有不少，你須要總結和背誦，固然不是死記硬背，主要在切圖上多作多實踐，熟了就能記住。

5、大量練習

練習是從始到終的，不要斷，即便找一些簡單的網頁進行佈局實踐，開始可能開發很慢，會遇到不少小問題，也不急。html

製做DIV CSS網頁前思考佈局：

首先咱們拿到一張網頁美工圖片咱們將從上下、上中下、左右、上中（中包括左右）下佈局框架來思考。

下面經過一個實例講解下CSS佈局分析，咱們以DIV CSS5列表頁面分析css佈局：

首先咱們能夠分析出咱們DIV CSS佈局重構此頁面結構框架，咱們能夠看出是上、中、下結構，其中又包括了左右結構。

由此咱們就要寫此頁面CSS和html時候就先從上到下從外到內原則寫CSS與html。

咱們首先建一個web的文件夾並在此文件夾裏新建html頁面命名爲index.html，CSS文件命名爲index.css。這裏有個訣竅就是能夠導入模板方式來建CSS與html初始頁面，而後將CSS文件引用到html，再在CSS模板的基礎上再寫再添加CSS。

如下是index.html的html代碼：

如下爲引用的內容：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>css佈局案例實驗頁面-www.DIV CSS5.com.cn</title> <link href="index.css"rel="stylesheet"type="text/css"/> </head>copyrightwww.DIV CSS5.comDIV CSS5 <body> <div id="header">我是頭部（上）</div> <div id="centers"> <div class="c_left">我是中的左</div> <div class="c_right">我是中的右</div> <div class="clear"> </div> </div> <div id="footer">我是底部（下）</div> </body> </html>

index.css的CSS代碼以下：
如下爲引用的內容：

body,div,address,blockquote,iframe,ul,ol,dl,dt,dd,li,dl,h1,h2,h3,h4,h5,h6,p,pre,table,  
 
caption,th,td,form,legend,fieldset,input,button,select,textarea{margin:0;padding:0;  
 
font-weight:normal;font-style:normal;font-size:100%;font-family:inherit;}  
ol,ul,li{list-style:none;}  
img{border:0;}  
body{color:#000;background:#FFF;text-align:center;font:12px/1.5Arial,Helvetica,sans-serif;}  
.clearfix:after{clear:both;content:".";display:block;height:0pt;visibility:hidden;overflow:hidden;}  
 
.clear{clear:both;height:1px;margin-top:-1px;width:100%;}  
 
.dis{display:block;}  
.undis{display:none;}  
 
/*此上面代碼是初始CSS模板，下面是新寫CSS佈局框架代碼*/  
 
#header,#centers,#footer{width:100%;margin:0auto;  
 
clear:both;font-size:18px;line-height:68px;font-weight:bold;}  
#header{height:68px;border:1pxsolid#CCCCCC;}  
#centers{padding:8px0;}  
#footer{border-top:1pxsolid#CCCCCC;background:#F2F2F2;}  
 
#centers.c_left{float:left;width:230px;border:1pxsolid#00CC66;  
 
background:#F7F7F7;margin-right:5px;}  
#centers.c_right{float:left;width:500px;border:1pxsolid#00CC66;background:#F7F7F7}

你能夠考出此兩段代碼新建個試試。

按如下步驟來建設一個網站的頁面:

一、頂部部分，其中包括了LOGO、MENU和一幅Banner圖片；

二、頁面中間部分，那就是咱們的主體了，要求打開首頁快速，因此咱們在網站發佈的信息設計爲三列。

三、底部，包括一些版權信息。

根據以上設想，咱們定義以下div的結構

DIV結構以下：
　　
│body {}　/*這是一個HTML元素*/
　　
└#Container {}　/*頁面層容器*/
　　　　　
├#Header {}　/*頁面頭部*/
　　　　　
├#MianBody {}　/*頁面主體*/
　　　　　
│　├#mainbody-left {}　/*主體頁面左邊*/
　　　　　
│　└#mainbody-center {}　/*主體頁面中間*/
│　└#MainBody -right{}　/*主體頁面右邊*/
　
└#footer {}　/*頁面底部*/

用DIV+CSS作一個導航欄是很是容易的，並且咱們能夠經過css來對導航欄的樣式方便的做出調整。用div設置導航欄通常就用<ul>和<li>標籤。

四、高度顯示效果不一樣
通常狀況下只須要使用height: 100px;便可，當顯示效果不一樣時，則能夠_height: 100px;來對IE6的高度進行設置。

五、嵌套效果不不一樣.
有些狀況下若是div中嵌套的圖片大於外層div的高度，則IE6中對高度的設置始終無效，這時要注意對該css添加overflow屬性，overloaw:hidden,則可隱藏超出邊界的部分。

DIV+CSS網頁佈局經常使用的一些基礎知識整理

一．文件命名規範web

全局樣式：global.css；
框架佈局：layout.css；
字體樣式：font.css；
連接樣式：link.css；
打印樣式：print.css；

二．經常使用類/ID命名規範瀏覽器

頁　眉：header
內　容：content
容　器：container
頁　腳：footer
版　權：copyright　
導　航：menu
主導航：mainMenu
子導航：subMenu
標　志：logo
標　語：banner
標　題：title
側邊欄：sidebar
圖　標：Icon
注　釋：note
搜　索：search
按　鈕：btn
登　錄：login
鏈　接：link
信息框：manage
……

經常使用類的命名應儘可能以常見英文單詞爲準，作到通俗易懂，並在適當的地方加以註釋。對於二級類/ID命名，則採用組合書寫的模式，後一個單詞的首字母應大寫：諸如「搜索框」則應命名爲「searchInput」、「搜索圖標」命名這「searchIcon」、「搜索按鈕」命名爲「searchBtn「等等。框架

CSS書寫規範及方法

一. 常規書寫規範及方法

1. 選擇DOCTYPE：

XHTML 1.0 提供了三種DTD聲明可供選擇：

過渡的(Transitional):要求很是寬鬆的DTD，它容許你繼續使用HTML4.01的標識(可是要符合xhtml的寫法)。完整代碼以下：

XML/HTML代碼

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

嚴格的(Strict):要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如<br>。完整代碼以下：ide

XML/HTML代碼

<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Strict//EN」 「http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd「>

框架的(Frameset):專門針對框架頁面設計使用的DTD，若是你的頁面中包含有框架，須要採用這種DTD。完整代碼以下：工具

XML/HTML代碼

<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Frameset//EN」 「http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd「>

理想狀況固然是嚴格的DTD，但對於咱們大多數剛接觸web標準的設計師來講，過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站，使用的也是過渡型DTD)。由於這種DTD還容許咱們使用表現層的標識、元素和屬性，也比較容易經過W3C的代碼校驗。

2. 指定語言及字符集：

爲文檔指定語言：

XML/HTML代碼

<html xmlns=」http://www.w3.org/1999/xhtml」 lang=」en」>

爲了被瀏覽器正確解釋和經過W3C代碼校驗，全部的XHTML文檔都必須聲明它們所使用的編碼語言；佈局

如經常使用的語言定義：學習

XML/HTML代碼

<meta http-equiv=」Content-Type」 content=」text/html; charset=utf-8″ />

標準的XML文檔語言定義：

XML/HTML代碼

<?xml version=」1.0″ encoding=」 utf-8″?>

針對老版本的瀏覽器的語言定義：

XML/HTML代碼

<meta http-equiv=」Content-Language」 content=」 utf-8″ />

爲提升字符集，建議採用「utf-8」。

3. 調用樣式表：

外部樣式表調用：

頁面內嵌法：就是將樣式表直接寫在頁面代碼的head區。如：

XML/HTML代碼

<style type=」text/css」><!– body { background : white ; color : black ; } –> </style>

外部調用法：將樣式表寫在一個獨立的.css文件中，而後在頁面head區用相似如下代碼調用。

XML/HTML代碼

<link rel=」stylesheet」 rev=」stylesheet」 href=」css/style.css」 type=」text/css」 media=」all」 />

在符合web標準的設計中，推薦使用外部調用法，能夠不修改頁面只修改.css文件而改變頁面的樣式。若是全部頁面都調用同一個樣式表文件，那麼改一個樣式表文件，能夠改變全部文件的樣式。

四、選用恰當的元素：

根據文檔的結構來選擇HTML元素，而不是根據HTML元素的樣式來選擇。例如，使用P元素來包含文字段落，而不是爲了換行。若是在建立文檔時找不到適當的元素，則能夠考慮使用通用的div 或者是span；

避免過渡使用div和span。少許、適當的使用div和span元素可使文檔的結構更加清晰合理而且易於使用樣式；

儘量少地使用標籤和結構嵌套，這樣不但可使文檔結構清晰，同時也能夠保持文件的小巧，在提升用戶下載速度的同時，也易於瀏覽器對文檔的解釋及呈視；

五、派生選擇器：

可使用派生選擇器給一個元素裏的子元素定義樣式，在簡化命名的同時也使結構更加的清晰化，如：

XML/HTML代碼

.mainMenu ul li {background:url(images/bg.gif;)}

六、輔助圖片用背影圖處理：

這裏的」輔助圖片」是指那些不是做爲頁面要表達的內容的一部分，而僅僅用於修飾、間隔、提醒的圖片。將其作背影圖處理，能夠在不改動頁面的狀況下經過CSS樣式來進行改動，如：

XML/HTML代碼

#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}

七、結構與樣式分離：

在頁面裏只寫入文檔的結構，而將樣式寫於css文件中，經過外部調用CSS樣式表來實現結構與樣式的分離。

八、文檔的結構化書寫：

頁面CSS文檔都應採用結構化的書寫方式，邏輯清晰易於閱讀。如：

XML/HTML代碼

<div id=」mainMenu」> <ul> <li><a href=」#」 >首頁</a></li> <li><a href=」#」 >介紹</a></li> <li><a href=」#」 >服務</a></li> </ul> </div> /*=====主導航=====*/ #mainMenu { width:100%; height:30px; background:url(images/mainMenu_bg.jpg) repeat-x; } #mainMenu ul li { float:left; line-height:30px; margin-right:1px; cursor:pointer; } /*=====主導航結束=====*/

九、鼠標手勢：

在XHTML標準中，hand只被IE識別，當須要將鼠標手勢轉換爲「手形」時，則將「hand」換爲「pointer」，即「cursor:pointer;」

二．註釋書寫規範

一、行間註釋：

直接寫於屬性值後面，如：

XML/HTML代碼

.search{   
border:1px solid #fff;/*定義搜索輸入框邊框*/   
background:url(../images/icon.gif) no-report #333;/*定義搜索框的背景*/   
}

二、整段註釋：

分別在開始及結束地方加入註釋，如：

XML/HTML代碼

/*=====搜索條=====*/   
.search {   
border:1px solid #fff;   
background:url(../images/icon.gif) no-repeat #333;   
}   
/*=====搜索條結束=====*/

三．樣式屬性代碼縮寫

一、不一樣類有相同屬性及屬性值的縮寫：

對於兩個不一樣的類，可是其中有部分相同甚至是所有相同的屬性及屬性值時，應對其加以合併縮寫，特別是當有多個不一樣的類而有相同的屬性及屬性值時，合併縮寫能夠減小代碼量並易於控制。如：

XML/HTML代碼

#mainMenu {   
background:url(../images/bg.gif);   
border:1px solid #333;   
width:100%;   
height:30px;   
overflow:hidden;   
}   
#subMenu {   
background:url(../images/bg.gif);   
border:1px solid #333;   
width:100%;   
height:20px;   
overflow:hidden;   
}

兩個不一樣類的屬性值有重複之處，剛能夠縮寫爲：

XML/HTML代碼

#mainMenu,#subMenu {   
background:url(../images/bg.gif);   
border:1px solid #333;   
width:100%;   
overflow:hidden;   
}   
#mainMenu {height:30px;}   
#subMenu {height:20px;}

二、同一屬性的縮寫：

同一屬性根據它的屬性值也能夠進行簡寫，如：

XML/HTML代碼

.search {   
background-color:#333;   
background-image:url(../images/icon.gif);   
background-repeat: no-repeat;   
background-position:50% 50%;   
}   
.search {   
background:#333 url(../images/icon.gif) no-repeat 50% 50%;   
}

三、內外側邊框的縮寫：

在CSS中關於內外側邊框的距離是按照上、右、下、左的順序來排列的，當這四個屬性值不一樣時也可直接縮寫，如：

XML/HTML代碼

.btn {   
margin-top:10px;   
margin-right:8px;   
margin-bottom:12px;   
margin-left:5px;   
padding-top:10px;   
padding-right:8px;   
padding-bottom:12px;   
padding-left:8px;   
}

則可縮寫爲：

XML/HTML代碼

.btn {   
Margin:10px 8px 12px 5px;   
Padding:10px 8px 12px 5px;   
}

而若是當上邊與下邊、左邊與右邊的邊框屬性值相同時，則屬性值能夠直接縮寫爲兩個，如：

XML/HTML代碼

.btn {   
margin-top:10px;   
margin-right:5px;   
margin-bottom:10px;   
margin-left:5px;   
}

縮寫爲：

XML/HTML代碼

.btn {margin:10px 5px;}

而當上下左右四個邊框的屬性值都相同時，則能夠直接縮寫成一個，如：

XML/HTML代碼

.btn {   
margin-top:10px;   
margin-right:10px;   
margin-bottom:10px;   
margin-left:10px;   
}

縮寫爲：

XML/HTML代碼

.btn{margin:10px;}

四、顏色值的縮寫：

當RGB三個顏色值數值相同時，可縮寫顏色值代碼。如：

XML/HTML代碼

.menu { color:#ff3333;}

可縮寫爲:

XML/HTML代碼

.menu {color:#f33;}

四．hack書寫規範

由於不一樣瀏覽器對W3C標準的支持不同，各個瀏覽器對於頁面的解釋呈視也不盡相同，好比IE在不少狀況下就與FF存在3px的差距，對於這些差別性，就須要利用css 的hack來進行調整，固然在沒有必要的狀況下，最好不要寫hack來進行調整，避免由於hack而致使頁面出現問題。

一、 IE六、IE七、Firefox之間的兼容寫法：

寫法一：

XML/HTML代碼

IE都能識別*;標準瀏覽器(如FF)不能識別*；   
IE6能識別*，但不能識別 !important,   
IE7能識別*，也能識別!important;   
FF不能識別*，但能識別!important;   
根據上述表達，同一類/ID下的CSS 　hack可寫爲：   
.searchInput {   
background-color:#333;/*三者皆可*/   
*background-color:#666　!important; /*僅IE7*/   
*background-color:#999; /*僅IE6及IE6如下*/   
}

通常三者的書寫順序爲：FF、IE七、IE6.

寫法二：

IE6可識別「_」，而IE7及FF皆不能識別，因此當只針對IE6與IE7及FF之間的區別時，可這樣書寫：

XML/HTML代碼

.searchInput {   
background-color:#333;/*通用*/   
_background-color:#666;/*僅IE6可識別*/   
}

寫法三：

XML/HTML代碼

*+html 與 *html 是IE特有的標籤, Firefox 暫不支持。   
.searchInput {background-color:#333;}   
*html .searchInput {background-color:#666;}/*僅IE6*/   
*+html .searchInput {background-color:#555;}/*僅IE7*/

屏蔽IE瀏覽器：

select是選擇符，根據狀況更換。第二句是MAC上safari瀏覽器獨有的。

XML/HTML代碼

*:lang(zh) select {font:12px  !important;} /*FF的專用*/   
select:empty {font:12px  !important;} /*safari可見*/

IE6可識別：

這裏主要是經過CSS註釋分開一個屬性與值，註釋在冒號前。

XML/HTML代碼

select { display /*IE6不識別*/:none;}

IE的if條件hack寫法：

全部的IE可識別：

XML/HTML代碼

<!–[if IE]> Only IE <![end if]–> 只有IE5.0能夠識別: <!–[if IE 5.0]> Only IE 5.0 <![end if]–> IE5.0包換IE5.5均可以識別: <!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–> 僅IE6可識別: <!–[if lt IE 6]> Only IE 6- <![endif]–> IE6以及IE6如下的IE5.x均可識別: <!–[ifgteIE6]> Only IE 6/+ <![endif]–> 僅IE7可識別: <!–[iflteIE7]> Only IE 7/- <![endif]–>

二、清除浮動：

在Firefox中，當子級都爲浮動時，那麼父級的高度就沒法徹底的包住整個子級，那麼這時用這個清除浮動的HACK來對父級作一次定義，那麼就能夠解決這個問題。

XML/HTML代碼

select:after {   
content:」.」;   
display:block;   
height:0;   
clear:both;   
visibility:hidden;   
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。