IE7與web標準設(shè)計（3）

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

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

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

<!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標準,楊正祎,博客園,實例代碼" />

<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)站標題，就像<a target="_blank" href="" title=" title="">博客園</a>博客的標題、副標題。<br/ />

也可能有導航欄在這里<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標準之道">YES！B/S！</a>

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

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

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

<p>日期當然也不能少啦——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標準之道">YES！B/S！</a>

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

</body>

</html>

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

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

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

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

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

IE7與web標準設(shè)計（3）

相關(guān)文章

最新評論

文章分類

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

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