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

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

 

DIV+CSS

 

 

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網頁前思考佈局
 
首先咱們能夠分析出咱們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書寫規範

 

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;   
}   
/*=====搜索條結束=====*/
 
css+div樣式屬性
 
 

三.樣式屬性代碼縮寫

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

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

 

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;   
}
相關文章
相關標籤/搜索