myRoad--详解一个漂亮的div+css网页模版（一）

首先看一个我比较喜欢的div+css的网页模版（下载自http://www.cssk8.com/）

这么好看的网页到底是怎么做出来的呢?

观察它的HTML源代码会发现有很多 <div>标签 ，<ul> <li>标签，<h1> <h2>…<hn>标签。

再去看它的CSS源代码会发现最常用到一下这几个属性：

width,height,margin,float,padding

那么我们了解一下这几个标签：

<div> 表示“层”。（我们看见的这个网页其实就像楼房一样是一层一层盖起来的）

为了在CSS中控制每一个<div>的样式我们要给每个<div>加上 "id” ：<div id="menu"> ，但是有的时候好几个<div>的样式是一样的，这是我们给这几个<div>统一都加上class ：<div class="post"> 那么所有class为post的<div>的样式就能在CSS中统一控制了。

<ul> <li> 表示 “无序列表”。

<h1> <h2>…<hn> 表示 “定义标题”。

这几个属性：

width : 定义元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距。可设置为：auto（默认，浏览器可计算出实际的宽度。）； % （基于父元素宽度的百分比宽度。）；length（使用 px、cm 等单位定义宽度。）。

height: 定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。可设置为：auto（默认，浏览器可计算出实际的宽度。）； % （基于包含它的块级对象的百分比高度。); length（使用 px、cm 等单位定义宽度。）。

margin: 用于在一个声明中设置四个外边距的所有属性的简写属性。( 这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。) 可设置：margin-top ，margin-right ，margin-bottom ，margin-left ； %（基于父对象总高度或宽度的百分比） ，length（定义一个固定的边距） ，auto（浏览器设定的值）。

           有时简写为：

                  margin：top right bottom left；

                  1.如果没有left值，则使用right代替；

                  2.如果没有bottom值，则使用top代替；

                  3.如果没有right值，则使用top值代替。

padding :用于在一个声明中设置所有 padding 属性的简写属性。(这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。) 可设置：padding-top ，padding-right ，padding-bottom ,padding-left)    %（基于父元素宽度的百分比） ，length（固定的padding值）；简写同margin

float :  元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级 框，而不论它本身是何种元素。浮动非替换元素要指定一个明确的宽度；否则，它们会尽可能地窄。（假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一 行，这个过程会持续到某一行拥有足够的空间为止。）可设置：left （文本或图像会移至父元素中的左侧。）；right （文本或图像会移至父元素中的右侧。）；none （默认。文本或图像会显示于它在文档中出现的位置。）          

好！到此我们把基础的知识巩固了一下，现在来看网页的布局：                    

 

    我们再看一张图：

上图就是控制整个网页div位置的CSS；

    好了，这篇就到这里了，太长了！下篇会接着分析这个网页。