[收藏]DIV+CSS布局積累

 在寫CSS的時候，經常為一些名字而發愁，比如說菜單後面的背景要用什麼詞來表示呢？大家都知道，菜單一般用menu來表示，那麼菜單後面的背景我會用menubg，CSS裡就寫#menubg {…}。
還有一些其他的比如搜尋方塊之類的應該怎麼命名呢？下面有一些可以算得上是標準的命名吧。如果有錯誤或者遺漏請朋友們幫忙補上，謝謝！

[Copy to clipboard]

CODE:

頁頭：header
登入條：loginbar
標誌：logo
側欄：sidebar
廣告：banner
導航：nav
子導航：subnav
菜單：menu
子功能表：submenu
搜尋：search
滾動：scroll
頁面主體：main
內容：content
標籤頁：tab
文章列表：list
提示資訊：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
註冊：regsiter
狀態：status
按鈕：btn
投票：vote
夥伴：partner
友情連結：friendlink
頁尾：footer
著作權：copyright
提交：submit
文字框：textbox
統計：count

以上結構可以組合使用，例如：左欄位標題lefttitle；底部導航footernav 書寫原則是： 1.一律小寫； 2.盡量用英文； 3.不加中杠和底線； 4.盡量不縮寫，除非一看就明白的單詞。

11.17 網易的CSS寫法

[Copy to clipboard]

CODE:

/* 全域CSS定義 */
body { text-align: center; font-family:"宋體", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
table,td,tr,th{font-size:12px;}

/* 連結顏色 */
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
/* 顏色屬性 [定義規則，小寫c加顏色名稱] */
.cRed,a.cRed:link,a.cRed:visited{ color:Red; }
.cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;}
.cDRed,a.cDRed:link,a.cDRed:visited{ color:#bc2931;}
.cGray,a.cGray:link,a.cGray:visited{ color: #4F544D;}
.cDGray,a.cDGray:link,a.cDGray:visited{ color: #666;}
.cWhite,a.cWhite:link,a.cWhite:visited{ color:#fff;}
.cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}
a.cBlack:hover{color:#bc2931;}
.cYellow,a.cYellow:link,a.cYellow:visited{color:#ff0;}
.cGreen,a.cGreen:link,a.cGreen:visited{color:#008000;}
/* 字型屬性 [定義規則，小寫f加屬性名稱] */
.fB {font-weight: bold;}
.fI {font-style: italic;}

/* 字型大小*/
.f12px{ font-size:12px;}
.f14px{ font-size:14px;}

/* 其他屬性 */
.left{ float: left;}
.right{ float: right;}
.clear{ clear: both; font-size:1px; width:1px; visibility: hidden; }
.hidden {display: none;}
.unLine ,.unLine a{text-decoration: none;}
.noBorder{border:none;        }

頁面上所有圖片自動縮放的代碼

[Copy to clipboard]

CODE:

<script language="JavaScript">
var imgObj;
for(i = 0; i < document.all.length; i++)
{
if(document.all(i).tagName.toLowerCase()=="img")
{
  imgObj = document.all(i)  //建議只判斷高度或者寬度其中一個，那樣可以自動按比例縮放
  if (imgObj.height>500)  //判斷圖片的高度，如果大於500，則設定為500，值可以自己修改
  {
   imgObj.height=500
  }
  if (imgObj.width>700)  //判斷圖片的寬度，如果大於700，則設定為700，值可以自己修改
  {
   imgObj.width=700
  }
}
}

</script>

捲軸的顏色定義

[Copy to clipboard]

CODE:

scrollbar-face-color: #E0D5BE;<!--//捲軸頁面顏色設定-->
scrollbar-track-color: #EBE4D3;<!--//捲軸底版顏色設定-->
scrollbar-highlight-color: #ffffff;<!--//捲軸斜面和左面顏色設定-->
scrollbar-shadow-color: #ffffff;<!--//捲軸下斜面和右面顏色設定-->
scrollbar-3dlight-color: #ffffff;<!--//捲軸上邊和左邊的邊沿顏色設定-->
scrollbar-dark-shadow-color: #ffffff;<!--//捲軸下邊和右邊的邊沿顏色設定-->
scrollbar-arrow-color: #978C71;<!--//捲軸兩端箭頭顏色設定-->        

給圖片加邊框
在CSS檔案中對img定義邊界（border），例如我在CSS中定義了：

[Copy to clipboard]

CODE:

img.framed {
padding: 6px;
border: 1px solid #CCC;
background-color: #FFF; }

那麼在HTML檔案中，針對嵌入的圖片定義class="framed"就會有相應的邊框效果。

[Copy to clipboard]

CODE:

<img src="......" class="framed" >

在FF下一個自適應高度的簡單做法

[Copy to clipboard]

CODE:

加上
height: 100%;
overflow: auto;

自動換行的簡單做法

[Copy to clipboard]

CODE:

        table-layout: fixed;
        WORD-BREAK: break-all;
        WORD-WRAP: break-word;

怎樣用CSS把層做成半透明？

[Copy to clipboard]

CODE:

用下面的樣式表定義你的層
.alpha { filter: Alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100｝

解釋：
Opacity=開始的不透明度(100的話就不透明了)
FinishOpacity=結束的不透明度(100的話就不透明了)
Style=樣式，從0開始，1.2.3....有均勻透明啊，放射形狀透明啊...
StartX=開始透明的X座標，基本上為圖片、層的左上方（0）
StartY= 開始透明的Y座標，基本上也為圖片、層的左上方（0）
FinishX=結束透明的X座標，基本上也圖片、層的右下（圖片、層的寬度）
FinishY=結束透明的Y座標，基本上也為圖片、層的右下角（圖片、層的高度）

再談一下關於清除浮動(閉合浮動元素)最簡單的方法
最簡單的清除浮動(閉合浮動元素的方法是在父級容器內,浮動物件下面再插入一個額外的DIV標籤，來清除浮動（clear）,瀏覽器安全色性好，沒有HACKS，缺點是要增加一個無語義的標籤,但在有的布局下,可使這個只起到清除作用的DIV,具有語義化.
先看代碼

[Copy to clipboard]

CODE:

<div class="wrap">
    <div id="sideright">
      <p>......</p>
    </div>
    <div id="sideleft">
    <p>......</p>
    </div>
    <div id="foot">
      <address>
      http://www.forest53.com
      </address>
    </div>
  </div>

其中WRAP是父級容器,sideright和sideleft是左、右部分的內容，foot裡放了內容，在左、右內容的下面，並在父級容器裡面，起到了清除浮動DIV的作用。

有什麼能控制捲軸大小的嗎？

[Copy to clipboard]

CODE:

<div style="overflow:auto;width:200px; height:150px; zoom:0.5;">
<div style="width:2000px; height:1500px; zoom:2;">
有什麼能控制捲軸大小的嗎
</div>
</div>

同時調用幾個地方的外部CSS

[Copy to clipboard]

CODE:

main.css

@import url(font.css);
@import url(nav.css);
@import url(form.css);
@import url(footer.css);
@import url(ad.css);

各瀏覽器padding、margin的差異
margin和padding總是有可能要用到，而產生的問題如何解決呢？由於瀏覽器解釋容器寬度的方法不同：
IE 6.0 Firefox Opera等是
真實寬度=width+padding+border+margin
IE5.X
真實寬度=width-padding-border-margin

解決的方法是:

[Copy to clipboard]

CODE:

div.content {
width:400px; //這個是錯誤的width，所有瀏覽器都讀到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""後的內容
voice-family:inherit;
width:300px; //包括IE6/win在內的部分瀏覽器讀到這句，新的數值(300px)覆蓋掉了舊的
}
html>body .content { //html>body是CSS2的寫法
width:300px; //支援CSS2該寫法的瀏覽器(非IE5)有幸讀到了這一句
}

div.content {
width:300px !important; //這個是正確的width，大部分支援!important標記的瀏覽器使用這裡的數值
width(空格)/**/:400px; //IE6/win不解析這句，所以IE6/win仍然認為width的值是300px；而IE5.X/win讀到這句，新的數值(400px)覆蓋掉了舊的，因為!important標記對他們不起作用
}
html>body .content { //html>body是CSS2的寫法
width:300px; //支援CSS2該寫法的瀏覽器有幸讀到了這一句
}

附上：HACK總表

關於W3C檢驗時候的DIV元素封閉
所有的標記都必須要有一個相應的結束標記
以前在HTML中，你可以開啟許多標籤，例如<p>和<li>而不一定寫對應的</p>和</li>來關閉它們。但在XHTML中這是不合法的。XHTML要求有嚴謹的結構，所有標籤必須關閉。如果是單獨不成對的標籤，在標籤最後加一個"/"來關閉它。例如:

[Copy to clipboard]

CODE:

<br /><img height="80" alt="網頁設計師" src="../images/logo_w3cn_200x80.gif" width="200" />

成對的標籤應有開啟標籤和關閉標籤,例如：

[Copy to clipboard]

CODE:

<table><tr><td> </td></tr></table>

沒有成對關閉標籤的元素 都要加 /

[Copy to clipboard]

CODE:

如：
<base>
<br>
<hr>
<img>
<input>
<link>
<meta>
<nobr>

請問如何設定img標籤圖片自動適應高度？
想請教一下，倘若我設定了img的寬度一定值，我想保持縱橫比不變，高度自動適應，該如何設定CSS，能否實現？

[Copy to clipboard]

CODE:

<style type="text/css">
img {
max-width: 200px;
width:expression(this.width > 200 ? "200px" : (this.width+"px"));
}
</style>
<img src="http://gg.blueidea.com/2006/gongyi/banner.jpg"/>

10個你未必知道的CSS技巧

本文作者是：Trenton Moss。
發表網站是：http://www.webcredible.co.uk/。

本翻譯並未得到作者或網站授權。一切權利都歸原作者及原網站所有。
如果你得到原作者或原發表網站的授權，可以自由使用本翻譯。

1.CSS字型屬性簡寫規則

一般用CSS設定字型屬性是這樣做的：

[Copy to clipboard]

CODE:

font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;

但也可以把它們全部寫到一行上去：

[Copy to clipboard]

CODE:

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

真不錯！只有一點要提醒的：這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。而且，如果你沒有設定font-weight, font-style, 以及 font-varient ，他們會使用預設值，這點要記上。

2. 同時使用兩個類

一般只能給一個元素設定一個類（Class），但這並不意味著不能用兩個。事實上，你可以這樣：

[Copy to clipboard]

CODE:

<p class="text side">...</p>

同時給P元素兩個類，中間用空格格開，這樣所有text和side兩個類的屬性都會加到P元素上來。如果它們兩個類中的屬性有衝突的話，後設定的起作用，即在CSS檔案中放在後面的類的屬性起作用。

補充：對於一個ID，不能這樣寫<p id="text side">...</p>也不能這樣寫

3. CSS border的預設值

通常可以設定邊界的顏色，寬度和風格，如：

[Copy to clipboard]

CODE:

border: 3px solid #000

這位把邊界顯示成3像素寬，黑色，實線。但實際上這裡只需要指定風格即可。

如果只指定了風格，其他屬性就會使用預設值。一般地，Border的寬度預設是medium，一般等於3到4個像素；預設的顏色是其中文字的顏色。如果這個值正好合適的話，就不用設那麼多了。

4. CSS用於文檔列印

許多網站上都有一個針對列印的版本，但實際上這並不需要，因為可以用CSS來設定列印風格。

也就是說，可以為頁面指定兩個CSS檔案，一個用於螢幕顯示，一個用於列印：

[Copy to clipboard]

CODE:

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

第1行就是顯示，第2行是列印，注意其中的media屬性。

但應該在列印CSS中寫什麼東西呢？你可以按設計普通CSS的方法來設定它。設計的同時就可以把這個CSS設成顯示CSS來檢查它的效果。也許你會使用 display: none 這個命令來關掉一些裝飾圖片，再關掉一些導覽按鈕。要想瞭解更多，可以看“列印差異”這一篇。

5. 圖片替換技巧

一般都建議用標準的HTML來顯示文字，而不要使用圖片，這樣不但快，也更具可讀性。但如果你想用一些特殊字型時，就只能用圖片了。

比如你想整個賣東西的表徵圖，你就用了這個圖片：

[Copy to clipboard]

CODE:

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

這當然可以，但對搜尋引擎來說，和正常文字相比，它們對alt裡面的替換文字幾乎沒有興趣這是因為許多設計者在這裡放許多關鍵詞來騙搜尋引擎。所以方法應該是這樣的：
<h1>Buy widgets</h1>
但這樣就沒有特殊字型了。要想達到同樣效果，可以這樣設計CSS：

[Copy to clipboard]

CODE:

h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

注意把image height換成真的圖片的高度。這裡，圖片會當作背景顯示出來，而真正的文字由於設定了-2000像素這個縮排，它們會出現在螢幕左邊2000點的地方，就看不見了。但這對於關閉圖片的人來說，可能全部看不到了，這點要注意。

6. CSS box模型的另一種調整技巧

這個Box模型的調整主要是針對IE6之前的IE瀏覽器的，它們把邊界寬度和空白都算在元素寬度上。比如：

[Copy to clipboard]

CODE:

#box { width: 100px; border: 5px; padding: 20px }

這樣調用它：

[Copy to clipboard]

CODE:

<div id="box">...</div>

這時盒子的全寬應該是150點，這在除IE6之前的IE瀏覽器之外的所有瀏覽器上都是正確的。但在IE5這樣的瀏覽器上，它的全寬仍是100點。可以用以前人發明的Box調整方法來處理這種差異。

但用CSS也可以達到同樣的目的，讓它們顯示效果一致。

[Copy to clipboard]

CODE:

#box { width: 150px } #box div { border: 5px; padding: 20px }

這樣調用：

[Copy to clipboard]

CODE:

<div id="box"><div>...</div></div>

這樣，不管什麼瀏覽器，寬度都是150點了。

7. 塊元素置中對齊

如果想做個固定寬度的網頁並且想讓網頁水平置中的話，通常是這樣：

[Copy to clipboard]

CODE:

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

你會使用 <div id="content"> 來圍上所有元素。這很簡單，但不夠好，IE6之前版本會顯示不出這種效果。改CSS如下：

[Copy to clipboard]

CODE:

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

這會把網頁內容都置中，所以在Content中又加入了

[Copy to clipboard]

CODE:

text-align: left 。

8. 用CSS來處理垂直對齊

垂直對齊用表格可以很方便地實現，設定表格單元 vertical-align: middle 就可以了。但對CSS來說這沒用。如果你想設定一個導航條是2em高，而想讓導航文字垂直置中的話，設定這個屬性是沒用的。

CSS方法是什麼呢？對了，把這些文字的行高設為 2em：line-height: 2em ，這就可以了。

9. CSS在容器內定位

CSS的一個好處是可以把一個元素任意定位，在一個容器內也可以。比如對這個容器：

[Copy to clipboard]

CODE:

#container { position: relative }

這樣容器內所有的元素都會相對定位，可以這樣用：
<div id="container"><div id="navigation">...</div></div>
如果想定位到距左30點，距上5點，可以這樣：

[Copy to clipboard]

CODE:

#navigation { position: absolute; left: 30px; top: 5px }

當然，你還可以這樣：

[Copy to clipboard]

CODE:

margin: 5px 0 0 30px

注意4個數位順序是：上、右、下、左。當然，有時候定位的方法而不是邊距的方法更好些。

10. 直通到螢幕底部的背景色

在垂直方向是進行控制是CSS所不能的。如果你想讓導覽列和內容欄一樣直通到頁面底部，用表格是很方便的，但如果只用這樣的CSS：

[Copy to clipboard]

CODE:

#navigation { background: blue; width: 150px }

較短的導航條是不會直通到底部的，半路內容結束時它就結束了。該怎麼辦呢？

不幸的是，只能採用欺騙的手段了，給這較短的一欄加上個背景圖，寬度和欄寬一樣，並讓它的顏色和設定的背景色一樣。

[Copy to clipboard]

CODE:

body { background: url(blue-image.gif) 0 0 repeat-y }

此時不能用em做單位，因為那樣的話，一旦讀者改變了字型大小，這個花招就會露餡，只能使用px。

本文作者是：Trenton Moss。
發表網站是：http://www.webcredible.co.uk/。

本翻譯並未得到作者或網站授權。一切權利都歸原作者及原網站所有。
如果你得到原作者或原發表網站的授權，可以自由使用本翻譯。

常用CSS縮寫文法總結

使用縮寫可以協助減少你CSS檔案的大小，更加容易閱讀。css縮寫的主要規則如下：

顏色
16進位的色彩值，如果每兩位的值相同，可以縮寫一半，例如：

[Copy to clipboard]

CODE:

#000000可以縮寫為#000;#336699可以縮寫為#369;

盒尺寸
通常有下面四種書寫方法:

[Copy to clipboard]

CODE:

property:value1; 表示所有邊都是一個值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四個值依次表示top,right,bottom,left
方便的記憶方法是順時針，上右下左。具體應用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;

邊框(border)
邊框的屬性如下：

[Copy to clipboard]

CODE:

border-width:1px;
border-style:solid;
border-color:#000;
可以縮寫為一句：border:1px solid #000;

文法是border:width style color;

背景(Backgrounds)
背景的屬性如下：

[Copy to clipboard]

CODE:

background-color:#f00;
background-image:url(/oblog/background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以縮寫為一句：background:#f00 url(/oblog/background.gif) no-repeat fixed 0 0;
文法是background:color image repeat attachment position;
你可以省略其中一個或多個屬性值，如果省略，該屬性值將用瀏覽器預設值，預設值為：
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%

字型(fonts)

[Copy to clipboard]

CODE:

字型的屬性如下：

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以縮寫為一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意，如果你縮寫字型定義，至少要定義font-size和font-family兩個值。

列表(lists)

[Copy to clipboard]

CODE:

取消預設的圓點和序號可以這樣寫list-style:none;,

list的屬性如下:

list-style-type:square;
list-style-position:inside;
list-style-image:url(/oblog/image.gif);
可以縮寫為一句：list-style:square inside url(/oblog/image.gif);