关于div+css学习的经典代码解析

最新推荐文章于 2018-07-27 11:44:48 发布

coolcool1265

最新推荐文章于 2018-07-27 11:44:48 发布

阅读量1k

点赞数

分类专栏： web技术文章标签： div css mozilla float table header

web技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先是一段经典的代码

不知道是哪个前辈写的了，现在拿出来用一下呵呵
========================================================
<html>
<head>
<style type="text/css">
body{
background:#ffffff;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
}

#header{
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;
text-align:left;
}
#contain{
margin-right: auto;
margin-left: auto;
width: 776px;
}
#mainbg{
width:776px;
padding: 0px;
background: #60A179;
float: left;
}

#right{
float: right;
margin: 2px 0px 2px 0px;
padding:0px;
width: 574px;
background: #ccd2de;
text-align:left;
}
#left{
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #F2F3F7;
width: 200px;
text-align:left;
}

#footer{
/*clear:both;*/
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;}

.text{margin:0px;padding:20px;}

</style>
</head>
<body topmargin="0" bottommargin="0">

<div id="header">header</div>

<div class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>
</div>

</div>

<div id="footer">footer</div>

</body>

</html>

首先我们定义body和顶部第一行#header，这里面的关键是body中的text-align:center;和header中的margin-right: auto;margin-left: auto;，通过这两句使得header居中。注：其实定义text-align:center;就已经在IE中实现居中，但在mozilla中无效，需要设置margin:auto;才可以实现mozilla中的居中。

接下来定义中间的两列#right和#left。为了使中间两列也居中，我们在它们外面嵌套一个层#contain，并对contain设置margin:auto;，这样#right和#left就自然居中了。

注意中间两列定义的顺序，我们首先定义#right，通过float: right;让它浮在#contain层的最右边。然后再定义#left，通过float: left;让它浮动在#right层的左面。这和我们以前表格从左到右定义的顺序正好相反。

我们看到代码中在#contain和两列之间还嵌套了一个层#mainbg，这个层是做什么用的呢？这个层就是用来定义#contain的背景的。你肯定会问，为什么不直接在#contain中定义背景，而要多套一层呢？那是因为在#contain中直接定义的背景，在mozilla中将显示不出来，必须定义高度值才可以。如果定义了高度值，#right层就无法实现根据内容的自动伸缩。为了解决背景和高度问题，就必须增加这么一个#mainbg层。窍门在于#mainbh这个层定义float: left;，因为float使层自动有宽和高的属性。(暂且这么理解：)

最后是定义底部的#footer层。这个定义的关键是：clear:both;，这一句话的作用是取消#footer层的浮动继承。否则的话，你会看到#footer紧贴着#header显示，而不是在#right的下面。

主要的层定义完毕，这个布局就ok了。补充一点：你看到我还定义了一个.text{margin:0px;padding:20px;}，这个class的作用是使内容的外围有20px的空白。为什么不直接在#right里定义margin或者padding呢，因为mozilla和IE对css盒模型的解释不一致，直接定义margin/padding会造成mozilla里布局变形。一般采用内部再套一层的做法来解决。

使用DIV之后,什么时候使用TABLE

关于表格

　　使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐,之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"

　　使用表格排版"是"不明智"的.指的是我们使用了很多年的,用表格来排版是不明智的,表格归根截底是一种显示"数据"的方式,大家可以想象一下EXCEL,表格就是起这个使用的,有的时候信息使用表格显示让我们能清晰易读,所以才使用表格,比如公司员工联系表,产品与型号对应表等.

　　那么所谓表格大餐呢,其实意见上升到了一个层次,也就是说你如果能像专业市场分析公司那样,灵活使用表格来显示客户数据和调查数据等消息的时候,那才是真正利用了表格的优势.

　　所以,关于那句使用以久的话,应该改为"

　　使用表格作为网页排版,布局页面元素是不合理的,表格是用来显示数据的"。

　　关于其它元素

　　我这里按我的使用经验,把XHTML标准中的一些元素,分为三大类:

　　第一类是我称之为辅助布局设计元素:

　　这里我指的是DIV,SPAN等,这类元素的主要功能是用来布局整个页面的,灵活使用这些元素的各种属性,可以让你的页面表现丰富多彩.

　　第二类我称为结构化元素或叫信息元素