IE7與web標(biāo)準(zhǔn)設(shè)計（3）

互聯(lián)網(wǎng) 發(fā)布時間：2008-10-17 19:26:13 作者：佚名

上文：IE7與web標(biāo)準(zhǔn)設(shè)計（2） IE歷來被web標(biāo)準(zhǔn)的擁護(hù)者所詬病，而當(dāng)FireFox橫空出世以后，更多的網(wǎng)頁制作者開始關(guān)注web標(biāo)準(zhǔn)設(shè)計?？粗鳩ireFox的市場占有率不停的上升，微軟終于推出了IE7。但I(xiàn)E7是否真的能夠力挽狂瀾，是否真的能夠得到用戶的信任，是否真的能夠得到網(wǎng)頁

再看看下面的這個網(wǎng)頁截圖，它是我們今天將要使用的例子(源代碼在下方有提供)，是一個標(biāo)準(zhǔn)的“上左右下”帶側(cè)邊欄的虛擬網(wǎng)頁。
運(yùn)行代碼框

<!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=utf-8" />

<meta name="Keywords" content="YES!B/S!,web標(biāo)準(zhǔn),楊正祎,博客園,實例代碼" />

<meta name="Description" content="這是一個簡單YES!B/S!文章示例頁面,來自楊正祎的博客,http://justinyoung.cnblogs.com/" />

<title>YES!B/S!文章示例頁面</title>

<style>

body { margin: 0; padding: 0; }

#header {

width: 600px;

height: 50px;

background-color: red;

margin:0 auto;/*居中顯示*/

}

#body{

width:600px;

margin:0 auto;/*居中顯示*/

}

#sideBar{

width:150px;

background-color:#0000ff;

float:left;

height:244px;

}

#main{

width:354px;

float:left;

background-color:green;

height:

}

#footer{

width:600px;

margin:0 auto;

background-color:#666;

}

</style>

</head>

<body>

<div id="header">

這里是頭部的內(nèi)容。<br/ />

可能有網(wǎng)站標(biāo)題，就像<a target="_blank" href="" title=" title="">博客園</a>博客的標(biāo)題、副標(biāo)題。<br/ />

也可能有導(dǎo)航欄在這里<br/ />

<strong>注意這句話在IE7中的顯示1</strong><br/ />

<strong>注意這句話在IE7中的顯示2</strong><br/ />

</div>

<div id="body">

<div id="sideBar">

這里是側(cè)邊欄，里面放一些輔助信息。就像<a target="_blank" href="" title=" title="">博客園</a>里面，每個人博客的側(cè)邊欄一樣。<br/ />

也可能有人留言，下面就是一個人的留言哦。<br/ />

“大家好，我是楊正祎，我發(fā)現(xiàn)一個很不錯的網(wǎng)址哦。http://www.justinyoungcnblogs.com”。歡迎大家去看看哦。

</div><!--end: sideBar -->

<div id="main">

這里是主體的內(nèi)容，隨便你寫啦。我就寫上我的博客地址吧——<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web標(biāo)準(zhǔn)之道">YES！B/S！</a>

<p> 專注于B/S模式的項目。姓名：楊正祎(Justin Young)，程序員，專注于B/S模式的項目開發(fā)，擅長于Web標(biāo)準(zhǔn)頁面設(shè)計。</p>

<p>歡迎你們來為我的博客做客哦，里面有很多關(guān)于web標(biāo)準(zhǔn)方面的文章哦。請你們多多指教。</p>

<p>最后還要非常華麗的署名——楊正祎</p>

<p>日期當(dāng)然也不能少啦——2008-2-21</p>

</div><!--end: main -->

</div><!--end: body -->

<div id="footer">

這里是footer，就放一些版權(quán)信息吧。©<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web標(biāo)準(zhǔn)之道">YES！B/S！</a>

</div><!--end: footer -->

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

圖：這是在IE6中顯示的效果截圖，還算“整齊”
而當(dāng)你展開下面這個折疊區(qū)域，去看這個頁面在IE7下顯示的效果圖的時候，可能便會大吃一驚了。

圖：這是在IE7中顯示的效果截圖，已經(jīng)“不堪入目”了
我們驚訝的看到，網(wǎng)頁“頭部”變“矮”了，最后兩句重要的句子“消失”了；側(cè)邊欄變“窄”了，那個重要的網(wǎng)址的后半部消失了（其實是被右面綠色的區(qū)域遮蓋住了）；而最令人沮喪的是，右面“缺了個大口子”。原本整齊的布局，已經(jīng)完全消失，出現(xiàn)的是一個“一塌糊涂”的頁面。

上一頁 1 23 4 5 6 7 8 下一頁閱讀全文

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

IE7與web標(biāo)準(zhǔn)設(shè)計（3）

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容