快速业务通道

浅谈html和body标记应用CSS

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-03

大家都知道对于一个页面来说,最基本的结构呢就是

<html>
<head>
<!-- 头部信息内容区域 -->
</head>
<body>
<!-- 页面显示内容区域 -->
</body>
</html>

对于这样的一个结构,不会有人感到陌生,然而往往有时候却是大家越熟悉的东西就容易让人去遗忘了他们的存在。或许你会在想,这个结构这些标签有什么好聊的呢,每个页面都需要他们的啊。是啊,以前我一直也是这么认为的,不过最近发现,其实在很多时候这些不起眼的我们不在乎的标签却可以帮我们在页面美化的过程带来很大的帮助。

对于hack方面,大家都知道* html跟*+html可以帮助我们在IE7跟IE6之间作为识别,而这个也不是我现在想说的内容。其实我想说的内容很简单,主要有下面几点。

1、利用一下html的background,可以让我们在更多的时候能减少添加一个div标签来包含body中的所有内容;而且html作为body的父级,因此背景(背景色以及背景图片,以下出现的“背景”二字都是指背景色跟背景图片)都会被body中的背景所覆盖,先看一小段代码我们继续聊

<!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" id="myHtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style type="text/css">
#myHtml {background-color:#CCCCCC;}
#myBody {background-color:#FF0000;}
</style>
<title>无标题文档</title>
</head>
<body id="myBody">
小志提醒:尝试删除body中的文字再做于未删除前做一个简单的对比,别忘了浏览器的差别哦。
</body>
</html>

通过上面的一小段代码,大家可以看到body的背景跟html的背景所存在的区别了吧。接着大家应该可以想到背景既然有这个特点,我们是不是可以考虑在有时候处理一些背景图片的时候把html的background也利用起来呢,尤其是在处理一些比较个性的页面(比如游戏官网)。

PS:

a.如果你把html(#myHtml)的样式去掉,你再看看浏览器的表现,你会发现世界又变了。

b.对于背景色的设置还可以让浏览器自定义

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号