Div+CSS布局大全
XHTML下css+dir布局總結
XHTML是可擴充標識語言的縮寫
CSS---是層疊樣式表的縮寫
1為頁面添加正確DOCTYPE
DOCTYPE是document type的簡寫.主要用來說明你用的XHTML或者HTML是什麼版本.
2設定一個名字空間
直接在DOCTYPE聲明後面添加如下代碼:
<html XMLns="http://www.w3.org/1999/xhtml">
3聲明你的編碼語言
代碼如下:
<meta http-equiv="Content-Type" content="text/html;charset=GB2312"/>
簡體中文---GB2312 繁體內容---BIG5
4用小寫字母書寫所有的標籤
XML對大小寫是敏感的
5為圖片添加alt屬性
正確寫法:
<img src="logo.gif" alt="互動力工作標誌,點擊返回首頁">
6給所有屬性值加引號
7關閉所有的標籤
在標籤尾部使用一個正斜杠"/"來關閉它們自己.如:<br />
8收藏夾小表徵圖
首先製作一個16X16的icon表徵圖,命名為:favicon.ico,放在根目錄下.
然後嵌入head區;
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
9 用CSS定義元素外觀
css是不區別空格和大小寫.
1 顏色值
可用RGB值和十六進位寫.如:color:rgb(255,0,0) color:#FF0000
2 定義字型
body {font-family:"Luciad Grande",Verdana,Lucida,Arial,Helvetica,宋體,sans-serif;}
Verdana字型適合所有的Windows系統
3 群選取器
當幾個元素樣式屬性一樣時,可以共同調用一個聲明,元素之間用逗號分隔
p,td,li {font-size:12px;}
4 派生選取器
可使用派生器給一個元素裡的子項目定義樣式
li strong {font-style:italic;font-weight:normal;}
5 id選取器
用CSS布局主要用層"div"來實現,而div的樣式通過"id選取器"來定義
<div id="menubar"></div>
然後在樣式表裡這樣定義:
#menubar {MARGIN:0px;BACKGROUND:#FEFEFE;COLOR:#666;}
6類別選取器
在CSS裡用一個點開關表示類別選取器定義,如:
.14px{color:#f60;font-size:14px;}
在頁面中,用class="類別名"的方法調用:
<span class="14px">14px大小的字型</span>
7定義連結的樣式
CSS中用四個偽類來定義連結的樣式,分別是:a:link a:visited a:hover和a:active
如:
a:link{font-weight:bold;text-decoration:none;color:#c00;}
a:visited{font-weight:bold;text-decoration:none;color:#c30;}
a:hover{font-weight:bold;text-decoration:underline;color:#f60;}
a:active{font-weight:bold;text-decoration:none;color:#F90;}
上面語句分別定義了"連結 已訪問過的連結、滑鼠停在上方時、點下滑鼠時"的樣式
注意：必須按以上順序寫，否則顯示可能和你預想的不一樣。
它們的順序是："LVHA"
8組合使用選取器創造精緻的設計效果
9縮寫是按照順時針的順序
10行高
line-height:150% 說明行距為正常的150%
10 結構化代碼div(division)、id、class
1 結構化id標籤，與class的有區別：
如果你的屬性頁面包含了一個div，它的id為"content"，它就不可能有另外
一個div或者其他元素擁有相同的名字。相反，class屬性可以在任意
個頁面中一次又一次地使用
2 id的規則
一個id值必須用一個字母或者底線開關，它不能用一個數字進行開關
11 製作好的網站可以到w3c進行標準校正
validator.w3.org
jigsaw.w3org/css-validator/
調用樣式表
外部調用樣式表，通常採用2種方法使用樣式表：
1 頁面內嵌法：就是將樣式表直接寫在頁面代碼的head區。
如：<style type="text/css"><!-body {bockground:white;color:black;}-> </style>
2 外部調用法:將樣式表寫在一個獨立的.css檔案中，然後在頁面head區用
類似以下代碼調用
如：<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
為搜尋引擎準備的內容
1 允許搜尋機器人搜尋站內所有連結。
如：<meta content="all" name="robots" />
2 佈建網站作者資訊
如：<meta name="author" content="ajie@asd.com,阿基米德" />
3 佈建網站著作權資訊
如：<meta name="Copyright" content="www.w3cn.org,自由著作權" />
4 網站的簡要介紹
如:<meta name="description" content="新網頁設計師" />
5 網站的關鍵詞
<meta content="designing,with,web,standards,xhtml,css" name="keywords" />
代碼規範
1 所有的標記都必須要有一個相應的結束標記
不成對的，在後面加斜杠。如：<br />
2 所有標籤的元素和屬性的名字都必須使用小寫
3 所有的XML標記都必須合理嵌套
正確寫法：<p><b></b></p>
4 所有的屬性必須用引號“”括起來
5 把所有< 和&特殊符號用編碼錶示
任何小於符號(<)，不是標籤的一部分，必須編碼為<
任何大於符號(>),不是標籤的一部分，必須編碼為>
任何與號(&)，不是實體的一部分，都必須編碼為&
6 給所有屬性賦一個值
如：<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">
7 不要在注釋內容中使用"--"
如：用等號或者空格替換內部的虛線。
<!--這裡是注釋=========這裡是注釋->
CSS入門
css是Cascading Style Sheets(層疊樣式表)的縮寫，是一種對web文檔添加
樣式的簡單機制，屬於表現層的布局語言。
1.基本文法規範
典型CSS的語句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中“p“我們稱為“選取器”（selectors）,指明我們要給"p"定義樣式；
樣式聲明寫在一對大括弧"{}"中；
COLOR和BACKGROUND稱為"屬性"(property),不同屬性之間用分號";"分隔；
"#FF0000"和"#FFFFFF"是屬性的值(value).
2.顏色值
3.定義字型
4.群選取器
5.派生選取器
6.id選取器
7.類別選取器
8.定義連結的樣式
CSS布局入門
1 定義DIV
分析div例子：
#sample {MARGIN:10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP:#CCC 2px solid;
BORDER-RIGHT:#CCC 2px solid;
BORDER-BOTTOM:#CCC 2px solid;
BORDER-LEFT:#CCC 2px solid;
BACKROUND:url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR:#666;
TEXT-ALIGN:center;
LINE-HEIGHT:150%;WIDTH:60%; }
說明如下：
層的名稱為sample,在頁面中用就可以調用這個樣式。
MARGIN是指層的邊框以外留的空白，用於頁面邊界或者與其它層製造
一個間距。"10px 10px 10px 10px"分別代表上右下左"(順時針方向)
四個邊框，如果一樣，縮寫成"MARGIN:10px;"如邊距為零，寫成"MARGIN:0px;"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
