myRoad--详解一个漂亮的div+css网页模版(一)
首先看一个我比较喜欢的div+css的网页模版
这么好看的网页到底是怎么做出来的呢?
观察它的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;
好了,这篇就到这里了,太长了!下篇会接着分析这个网页。