網站div css設計經驗談

來源:互聯網
上載者:User

       使用DIV+CSS進行網站設計不是用換個標籤然後再去按照表格的方式去排版,而是做到內容與表現的分離。

      1: ID用於標識頁面單獨元素以及持久行的結構性元素 方便JS的調用 

      類用於標識同一頁面可重複定義使用的結構性元素 ID與類的命名需與表現形式無關 :leftContent 而使用有意義的定義方式:sideBar等等。命名方式遵循“駝峰式大小寫(標誌符由多個單片語成 除首詞首字母小寫外 其餘單詞首字母均大寫)” 

      2:避免濫用類 當類型的結構需要不一樣的表現時 記得什麼是層疊樣式表 具體結構中的p a h1等可使用如下方式:div.sideBar p{}定義即後代選取器+ID或類別選取器組合方式。 

      3:DIV與SPAN IV(塊級框)用於對區塊層級元素的分組 SPAN(行內框)用於對行內元素分組標識 

      4:對於頁面基本預設的方式可以選擇通用選取器(*標識)進行定義 * { padding:0; margin:0;} 

      5: body 也是可以添加ID和類的 這樣就可以為其添加特別樣式。 

      6:樣式表中匯入樣式表需在頂端 覆蓋規則為本身樣式覆蓋匯入樣式。

      7:CSS樣式表細分化 顏色 布局 風格 表單 均可分離 這樣對以後的修改和風格設計更方便。 

      8:盒模型:內→外

以下是引用片段:
content←width height(補充:height只有在父元素定義了絕對高度時其%才有意義) 
border  
padding(內補丁)-“填充”  
background-image  
background-color  
margin(外補丁)-“空白邊”透明 可為負值  

      記住:在css中 width是指內容地區的寬度 

      IE/WIN與盒模型: 

      IE5.5/IE6怪異模式下: 元素框總寬度=content.width+margin.width

FireFox/Opera/..   :  元素框總寬度=content.width+padding.width+border.width+margin.width 

      差異在於:IE5.5/IE6怪異模式下 width=有效content.width+padding.width+border.width 內補丁和邊框被算在內容寬度裡面 

      #select{width:750px;padding:10px;border:5px} IE怪異模式:總寬度:750px FF/OP:780px 

      IE怪異模式:有效內容寬度:750-20-10 FF/OP:750

      IE6正常模式下:同於FF/OP 

      處理方法:在父元素或子項目中使用padding 本身不使用 

      空白邊疊加:當兩個空白邊疊加時 頂或底邊將會疊加 實際空白邊高度=空白邊大的值

      例: 

以下是引用片段:
  空白邊高度為20px 

      但是如果這個時候你添加邊框或則填充,將不再疊加 

      //定位機制// 

      9:相對定位(relative):相對於其預設初始位置 絕對位置:相對父級元素或畫布、HTML元素 與文檔流無關 可覆蓋其他元素 使用Z-INDEX 控制其層次。IE5.5/IE6下 對right bottom時 需設定框的寬高 後則根據畫布右底定位。 

      絕對位置(absolute) 

      10:float浮動:記住:“在標準瀏覽器中 浮動元素脫離了文檔流 不佔據外圍容器空間” 明白了這點 你就會明白為什麼IE和FIREFOX下表現的不同了。IE5.5、IE6浮動元素依然佔據外圍容器空間 

      例如:怎麼在IE下feeter正常 在firefox下就跑上去了呢?

      IE下 當float和text-align定義的方向一樣時 出現雙倍錯誤: 
以下是引用片段:
      select{float:left;text-align:left;margin:0 10px;}  

      實際左邊margin-left:20px;FF/OP:10px 解決:加上display:inline; 

      11:徹底理解 “清除浮動”clear 

      clear:none、left、right、both、

      表示當前框元素哪些邊不應該挨著浮動框

      理解了10中float在不同瀏覽器下的表現 你也就知道如何去使用清楚了。 

      12:背景映像的定位:只談百分比 background:url(image-url.gif)no-repeat 20% 30% 20%:將映像X軸20%處與父元素X軸20%處重合 Y同理 top=0% bottom=100% left=0% right=100% center=50% 

      13:滑動門/ 

      左右兩個DIV 背景分別定義 一般左背景映像比較長; 左背景定位:left center 右背景定位:right center 

      外部控制容器寬度一般小於等於兩個背景和 這樣當內容動態變化時候 右背景映像便感覺像在左背景映像上滑動,故名。 

      這樣也可以實現:
首頁

以下是引用片段:
css:  
#nav a{float:left;background:url("../images/navLeft.gif") no-repeat left top;padding:0;text-decoration:none; cursor:hand;} 
#nav a span {float:left;display:block;background:url("../images/navRight.gif") no-repeat right top;padding:5px 36px 5px 40px;color:#ffffff}  

      原理相似,注意背景映像定位。 

      14:完美的置中布局:

以下是引用片段:
      body{text-align:center;mini-width:760px;} 
div#wrapper{margin:0 auto;text-align:left;width:750px;}  

      mini-width IE並不認識 這是為老瀏覽器準備的,只是這個值比你需要的實際頁面大就OK 

      15:小表徵圖有時會給頁面增色不少 用前記得規劃好 整到一張大圖片上 這樣可以減少伺服器請求次數。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.