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

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

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

再看看下面的這個(gè)網(wǎng)頁(yè)截圖，它是我們今天將要使用的例子(源代碼在下方有提供)，是一個(gè)標(biāo)準(zhǔn)的“上左右下”帶側(cè)邊欄的虛擬網(wǎng)頁(yè)。
運(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),楊正祎,博客園,實(shí)例代碼" />

<meta name="Description" content="這是一個(gè)簡(jiǎn)單YES!B/S!文章示例頁(yè)面,來(lái)自楊正祎的博客,http://justinyoung.cnblogs.com/" />

<title>YES!B/S!文章示例頁(yè)面</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>里面，每個(gè)人博客的側(cè)邊欄一樣。<br/ />

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

“大家好，我是楊正祎，我發(fā)現(xiàn)一個(gè)很不錯(cuò)的網(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模式的項(xiàng)目。姓名：楊正祎(Justin Young)，程序員，專注于B/S模式的項(xiàng)目開發(fā)，擅長(zhǎng)于Web標(biāo)準(zhǔn)頁(yè)面設(shè)計(jì)。</p>

<p>歡迎你們來(lái)為我的博客做客哦，里面有很多關(guān)于web標(biāo)準(zhǔn)方面的文章哦。請(qǐng)你們多多指教。</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)你展開下面這個(gè)折疊區(qū)域，去看這個(gè)頁(yè)面在IE7下顯示的效果圖的時(shí)候，可能便會(huì)大吃一驚了。

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

上一頁(yè) 1 23 4 5 6 7 8 下一頁(yè) 閱讀全文

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

相關(guān)文章

最新評(píng)論

文章分類

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

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