網站CSS通用寫法一般怎麼寫 網站樣式怎麼寫

這樣寫就差不多了， 一般的說 ， 一開始會把一些常用的樣式先寫好 ， 比如

//通用樣式

div{float:left}

body{margin-top:5px};

a{text-de..:none};

a:hover{text-de。overflow};

//banner頭部樣式

menu{width:500px; height150px}。

//Main 中間主要部分。

main{width:960px;}

//Left中間左邊

到別人做的好的網站把人家的css下下來看一下，然後學習學習就好了

..

//Right中間右邊。

.,。

//Foot底部樣式

。。。。基本就是這樣了 最好多加點註釋。然後一個標記的樣式不要寫成幾行， 能1行寫完就1行

.a {

background:#CCC;

height:80px;

width:440px;

overflow:hidden;

}

.b {

background:#f00；/*是圖片位置*/

float:left;

height:80px;

overflow:hidden;

margin:0 5px;

position:relative;

width:100px;

}

.b span {

background:#000;

bottom:0;

color:#fff;

font-size:12px;

line-height:20px;

height:20px;

position:absolute;

width:100px;

overflow:hidden;

text-align:center;

filter: alpha(opacity=50)；/*調整文字透明度*/

-moz-opacity:0.5； /*調整文字透明度*/

opacity: 0.5； /*調整文字透明度*/

}

3.重構的需求，儘可能的讓類和區塊樣式可重用；

4.分離結構和表現的需求，遵守了語義化結構的約定；

5.構架完全符合金融網特色的CSS框架。

6.對程式碼進行必要的搜尋引擎優化。第二、關於CSS命名的一些約定 1.不使用大寫形式的類名和id名；

2.儘可能使用描述性的英文單詞的組合作為類名和id名；

3.id名及類名的多個英文單詞之間使用“_”短橫線分隔；

4.按區域進行描述編號 例：main01_div01_ul01 （可以理解為主體第一區域 第一DIV下的第一個UL）

接下來我們要對整個網站及設計稿進行分析，去做符合自己門戶結構特色的CSS框架。我們以新浪網為例子進行站點結構分析，整個頁面分為：首頁，更多頁，內容頁，專題頁，資料中心，新聞中心，頻道頁，廣告……

我們對這些頁面進行整理，去發現他們的公共部分：CSS的樣式，及區域，模組的碎片。我們需要做的是把這些公有的部分提出來，我們可以把CSS分以下幾類：

主體樣式表：sjweb.css

font（字型樣式，字號，顏色的集合）

layout（框架結構 集合）

global（全域性預設樣式集合）

component（組成頁面部分樣式表，模組碎片集合）

這些講統統的被import到sjweb.css主體樣式表裡，主體樣式表做為一個loader載入新的外來樣式，比如廣告樣式表。

這樣這些頁面只需要寫一點點 屬於自己特殊要求的CSS樣式程式碼就可以了。

在構建這個CSS框架的時候有很多細節的東西最好能統一化，比如：行間距，模組之間間隔距離等。

規則：

1.所有area之間，模組之間，間距上下左右為：8 Pixel ;

2.新聞列表顏色#333 ;

1、建立使用css樣式表有三種，分別是外部樣式表，內部樣式表和內聯樣式。下面通過一個小demo演示它們的用法。

首先新建一個html檔案，放入3個button按鈕，給前兩個按鈕分百別設定class屬性為btn1和btn2，如下圖。

2.然後準備一個名為demo的CSS檔案。在css檔案中寫入buttonA的樣式，並儲存css檔案：

3,HTML檔案，使用連結在你的樣式標籤標籤的引入上一步建立CSS檔案，這是外面的使用風格，是建立一個好的總結度在CSS檔案編寫風格，然後介紹使用連結的HTML檔案標籤，這也是大多數網站使用方法，因為它的介紹方便，更方便管理：

4.接下來是內部樣式表的使用，其中樣式選項卡直接在head選項卡中建立，並添加了btn2樣式。對於內部樣式表簡單的HTML檔案，內部樣式很方便，但是複雜的HTML檔案可能會讓人混淆：

5.最後是使用內聯樣式，直接在第三個標籤中使用樣式屬性來新增樣式可以：

6.最後，儲存HTML檔案，開啟瀏覽器並檢視所有三個按鈕的樣式。這就是CSS樣式表的製作方法：

<table border="1" width="729" id="table1" height="50">

<tr><td rowspan="2" width="120" height="44">aaa</td>

<td width="263" height="25" colspan="3">ccc</td>

<td rowspan="2" width="121" height="44">ddd</td>

<td rowspan="2" width="121" height="44">yyyy</td>

</tr>

<tr>

<td width="121" height="25">111</td>

<td width="121" height="25">222</td>

<td width="121" height="25">333</td>

</tr>

</table>

也可以再外面套個DIV 設定下寬，margin:0 auto;