IE7与web标准设计（3）

互联网 发布时间：2008-10-17 19:26:13 作者：佚名

上文：IE7与web标准设计（2） IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页

再看看下面的这个网页截图，它是我们今天将要使用的例子(源代码在下方有提供)，是一个标准的“上左右下”带侧边栏的虚拟网页。
运行代码框

<!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">

这里是头部的内容。<br/ />

可能有网站标题，就像<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">

这里是侧边栏，里面放一些辅助信息。就像<a target="_blank" href="" title=" title="">博客园</a>里面，每个人博客的侧边栏一样。<br/ />

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

“大家好，我是杨正祎，我发现一个很不错的网址哦。http://www.justinyoungcnblogs.com”。欢迎大家去看看哦。

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

<div id="main">

这里是主体的内容，随便你写啦。我就写上我的博客地址吧——<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web标准之道">YES！B/S！</a>

<p> 专注于B/S模式的项目。姓名：杨正祎(Justin Young)，程序员，专注于B/S模式的项目开发，擅长于Web标准页面设计。</p>

<p>欢迎你们来为我的博客做客哦，里面有很多关于web标准方面的文章哦。请你们多多指教。</p>

<p>最后还要非常华丽的署名——杨正祎</p>

<p>日期当然也不能少啦——2008-2-21</p>

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

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

<div id="footer">

这里是footer，就放一些版权信息吧。©<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web标准之道">YES！B/S！</a>

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

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]

图：这是在IE6中显示的效果截图，还算“整齐”
而当你展开下面这个折叠区域，去看这个页面在IE7下显示的效果图的时候，可能便会大吃一惊了。

图：这是在IE7中显示的效果截图，已经“不堪入目”了
我们惊讶的看到，网页“头部”变“矮”了，最后两句重要的句子“消失”了；侧边栏变“窄”了，那个重要的网址的后半部消失了（其实是被右面绿色的区域遮盖住了）；而最令人沮丧的是，右面“缺了个大口子”。原本整齐的布局，已经完全消失，出现的是一个“一塌糊涂”的页面。

上一页 1 23 4 5 6 7 8 下一页阅读全文

AudioContext 实现音频可视化(web技术分享)
这篇文章主要分享的是web技术的 AudioContext 实现音频可视化，要实现音频可视化得先实现一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext，下面详细内容
2022-02-23
WebRTC记录音视频流(web技术分享)
这篇文章主要给大家介绍了web技术中的WebRTC记录音视频流，文章内容围绕主题展相关资料，需要的小伙伴可以参考一下，希望对你有所帮助
2022-02-23
html5+CSS3的编码规范
这是我通过网上查阅资料总结的一些编码规范，用于巩固对html，css页面重构时的基础,需要的朋友可以参考下
2020-12-19
前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范
这篇文章主要介绍了前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范,需要的朋友可以参考下
2017-01-21
Web前端开发规范2017(HTML/JavaScript/CSS)
这是一份旨在增强团队的开发协作，提高代码质量和打造开发基石的编码风格规范，其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分。我们知道，当一个团队开始指定并实行
2017-01-21
web前端开发规范文档(2014年版本)
这篇文章主要为大家介绍了前端开发团队遵循和约定的代码书写规范，意在提高代码的规范性和可维护性,需要的朋友可以参考下
2017-01-21
响应式Web之流式网格系统
这篇文章主要为大家详细介绍了响应式Web之流式网格系统的相关资料，感兴趣的小伙伴们可以参考一下
2016-07-04
在网页标题栏上和收藏夹显示网站logo的实现方法
下面小编就为大家分享一篇在网页标题栏上和收藏夹显示网站logo的实现方法。希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦
2016-03-16
Visual Foxpro 6.0 中文版安装向导(图解)
基于很多用户都在下载Visual Foxpro 6.0，但是有安装vtp6.0经验的朋友确很少，在安装过程中总会出现这样那样的问题，基于这些问题，下面小编抽个时间把Visual Foxpro 6.0
2015-09-09
网站日志200 0 64状态码的分析(协议子状态)
网站日志200 0 64状态码的分析介绍
2012-10-29

IE7与web标准设计（3）

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容