首先,做网页,要把这个页面区块化,而div就是页面中的块,div有很多属性,比如宽,高等,这些都是div一些特征,而css是层叠样式表,他的作用对div进行样式应用,针对不用的div,应用不同的样式,当然在静态页面中如果你当很多样式进去就闲的页面臃肿,这样对于优化,对于控制页面都不利,所以我们把css样式放在页面的外部,当然也有一些放在页面中,这么做是因为有写css样式只针对一个独特的页面来应用的,针对排版,div的,float属性很重要,这个主要就是针对div浮动的。
思路:
1、 整个网页分哪几部分
2、 每个部分的位置
3、 依照从上到下,从左到右,从大到小,从整体设计,到单独修改。
一、 导航栏
构成:html 由ul构成
背景图片在CSS页使用背景添加方法进行设计。
做法:
1、确定globallink 宽度,和高度,根据背景图片进行设置,高度略微多一些,设计背影颜色。
2、ul 定位为绝对定位 position:absolute. Margin:0px;padding:0px; list-style-type:none;
可以设置它的宽度。
在设置li float定位 设置它的padding.
最后在设置它的伪属性。A:link a:visited a:hover
二、 列表页
遵照从大到小,从左到右的顺序进行设置
设置Paramter
1、 float:left
2、 width:210px;
3、 margin:0px;padding:0px
4、 position:relative
设置子块 #author
注:子块内部没有设置宽度,所以它会自动填充在父块中
#parameter div#author {
Text-align:center;
Margin-top:5px;
Background:url(…) no-repeat;
}
设置 div#author p
Margin:0px 10px 0px 10px;
Padding:3px 0px 3px 0px;
border-bottom
Border-top
设置 div#author p.mypic
设置边框为无
确定padding-top
Margin-bottom
在设置 div#author p img
加上边框 padding:2px ;margin:0px;
三、 内容页
四、 脚注