HTML中body是单个标记嘛,浅谈html和body标记应用CSS

浅谈html和body标记应用CSS

互联网   发布时间：2009-04-02 19:36:08   作者：佚名   我要评论

网页制作Webjx文章简介：浅谈html和body标记应用CSS.

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

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

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

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

#myHtml {background-color:#CCCCCC;}

#myBody {background-color:#FF0000;}

无标题文档

小志提醒：尝试删除body中的文字再做于未删除前做一个简单的对比，别忘了浏览器的差别哦。

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

PS：

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

b.对于背景色的设置还可以让浏览器自定义的背景颜色失效(IE7为例：“工具”->“Internet选项”->“常规”中的颜色里可以找到背景的设置)

2、在上面的那一小段代码中并没用直接设置

html {background-color:#CCCCCC;}

body {background-color:#FF0000;}

而是用了两个ID，不知道你是否在想我为什么要这样做呢？对于这点的话，可以从几个方面来考虑

2.1 JS的调用(相对来说，用到比较多一点的是body中使用ID或者CLASS)

2.2 CSS中权限值的提升(这点基本上来说用到的机率微乎其微)

简单的再说一下如果body中使用ID或者CLASS的时候，我们能做什么吧。

a.对于现在网络中出现的页面，大家都可以看到很多时候，某个导航是高亮显示，提示你当前浏览的是在哪个页面上。这点的功能我就是可以通过body或者那个导航中添加一个ID或者CLASS来判断识别，当然少不了给这个ID或者CLASS添加一个样式。

b.在一些比较大型的网站中，某个频道或者某些频道的大致结构都是相同，因此我们可以把其中一个结构作为基础参考，复制到其他页面中使用，然后再调用同一个样式，这样可以减少很多的重复工作量，也让页面中的结构的重用性提高，作为区别我们只要利用body中的ID或者CLASS来修改样式的权重值就OK了。这样说或许比较混乱，大家可以大致参考一下迅雷的动漫频道http://anime.xunlei.com/(不过这个频道中的body所用CLASS过多而且相对比较杂乱，这点算是一个败笔吧)

目前暂时也就只感受到html跟body可以这么使用，或许还有一些其他小功能，不过可惜我个人暂时没发现，如果你知道，千万不要私藏啊，告诉大家分享一下吧。

相关文章

这篇文章主要介绍了纯 CSS 实现【点击展开阅读全文】功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-13

这篇文章主要介绍了CSS实现两个元素相融效果(粘滞效果),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-10-12

这篇文章主要介绍了css为什么要放在head标签中,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-12

这篇文章主要介绍了CSS两种常用的封装示例，帮助大家更好的利用CSS制作网页，感兴趣的朋友可以了解下2020-10-12

这篇文章主要介绍了CSS标签模式display属性,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-12

这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-09

这篇文章主要介绍了css实现鼠标放上去时图片过渡转换动画,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-09

这篇文章给大家介绍了CSS中width和height的默认值auto与%案例，本文通过实例案例给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-09-30

这篇文章主要介绍了css一些不常见但很有用的属性操作大全,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-28

这篇文章主要介绍了解决搜索框和搜索按钮button边框不能重合的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-28

最新评论