第二天 文本布局和圖片布局
文本布局：
1）一個常見的上下左下右分塊布局：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>
無標題文檔
</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 76%;
}
#container #header {
line-height: 80px;
height: 80px;
margin: 0;
padding-left:10px;
background:#00CC99;
color:#3300CC;
}
#container #left {
float:left;
width:33%;
height:100px;
background:#0099CC;
}
#container #right {
height:100px;
margin-left:33%;;
background:#0000CC;
}
#container #footer {
background:#0066FF;
color:#669999;
clear:both;
width:100%;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
header
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>上邊例子為經典常用的樣式設定，其中body中設定margin為0，以清除頁面邊界，設定padding為0以保證瀏覽器安全色性。
由於有些瀏覽器th和td的樣式未繼承自body，因此需要並列聲明樣式。即body,td,th。
2）Dreamweaver CS3之後整合了adobe的一個spry庫
Spry 架構是一個 JavaScript 庫，Web 設計人員使用它可以構建能夠向網站訪問者提供更豐富體驗的 Web 頁。有了 Spry，就可以使用 HTML、CSS 和極少量的 JavaScript 將 XML 資料合併到 HTML 文檔中，建立構件（如摺疊構件和功能表列），向各種頁面元素中添加不同種類的效果。在設計上，Spry 架構的標記非常簡單且便於那些具有 HTML、CSS 和 JavaScript 基礎知識的使用者使用。Spry 架構主要面向專業 Web 設計人員或進階非專業
Web 設計人員。它不應當用作企業級 Web 開發的完整 Web 應用程式架構（儘管它可以與其它企業級頁面一起使用）。Spry可以使用XML和JSON兩種格式的資料來源。具體：http://labs.adobe.com/technologies/spry/
3）css中的hack
由於不同的瀏覽器對CSS的支援及解析結果不一樣，還由於CSS中的優先順序的關係。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。
CSS Hack大致有3種表現形式，CSS類內部Hack、選取器Hack以及HTML頭部引用(if IE)Hack，CSS Hack主要針對IE瀏覽器。
類內部Hack：比如 IE6能識別底線"_"和星號" * "，IE7能識別星號" * "，但不能識別底線"_"，而firefox兩個都不能認識。等等
選取器Hack：比如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。等等
HTML頭部引用(if IE)Hack：針對所有IE：<!--[if IE]><!--您的代碼--><![endif]-->，針對IE6及以下版本：<!--[if lt IE 7]><!--您的代碼--><![endif]-->，這類Hack不僅對CSS生效，對寫在判斷語句裡面的所有代碼都會生效。
書寫順序，一般是將識別能力強的瀏覽器的CSS寫在後面。
3-1）比如要分辨IE6和firefox兩種瀏覽器，可以這樣寫：
<style>
div{
background:green; /* for firefox */
*background:red; /* for IE6 */
}
</style>
我在IE6中看到是紅色的，在firefox中看到是綠色的。
解釋一下：
上面的css在firefox中，它是認識不了後面的那個帶星號的東東是什麼的，於是將它過濾掉，不予理睬，解析得到的結果是:div{background:green},於是理所當然這個div的背景是綠色的。
在IE6中呢，它兩個background都能識別出來，它解析得到的結果是:div{background:green;background:red;},於是根據優先順序別，處在後面的red的優先順序高，於是當然這個div的背景顏色就是紅色的了。
3-2）CSS hack:區分IE6，IE7，firefox
區別不同瀏覽器，CSS hack寫法：
區別IE6與FF：
background:orange;*background:blue;
區別IE6與IE7：
background:green !important;background:blue;
區別IE7與FF：
background:orange; *background:green;
區別FF，IE7，IE6：
background:orange;*background:green;_background:blue;
background:orange;*background:green !important;*background:blue;
註：IE都能識別*;標準瀏覽器(如FF)不能識別*；
IE6能識別*，某些情況下不能識別 !important
4）布局元素向左、向右、置中等布局
有三種常用方法：
4-1）設定text-align//只支援IE瀏覽器，不是W3C標準，因此慎用
4-2）設定float屬性
4-3）設定position:absolute,然後再設定ltrb四個屬性
圖片布局：
1）映像兩種引入方式
<img src="test.gif"/>或者<object data="images/logo.gif"/>
Ie不支援object方式。firefox等支援。w3c曾經想通過object方式取代img，但是苦於img已經深入人心
2）邊框樣式的含義：
dotted：顯示為點線；
dashed：顯示為虛線；
solid：顯示為實線；
double：顯示為雙線邊框，兩條單線與間隔的和等於border-width的值；
groove：根據border-color的值繪製3d凹槽；
ridge：根據border-color的值繪製3d凸槽；
inset：根據border-color的值繪製3d凹邊；
outset：根據border-color的值繪製3d凸邊。
3）為映像增加陰影
3-1）針對IE瀏覽器可以使用filter或者apha濾鏡效果
<div style="filter:shadow(color:red,direction=135);padding:12px;position:absolute;">
<img src="test/1.gif" style="border:solid 1px #00ff00"/>
</div>3-2）考慮到相容性，建議現在影像編輯器中設計好陰影背景映像，然後使用background屬性把陰影映像圖釘到映像的某個邊上即可。
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
