CSS怎么设计网页头部

html-css016

CSS怎么设计网页头部,第1张

在div+css布局中,一般都像下面这样来整体构架的:

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

<div id="center"></div>

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

对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏:

<div id="header">

<div id="title">这里是网站的标题</div>

<div id="nav">这里是网站导航栏</div>

</div>

导航栏一般是由多个小块内容组成,选择无序列表

<ul><li></li></ul>

1、新建一个html页面。

2、在html页面上新建三个div标签,分别为这三个div添加class为:header、main、footer。

3、创建style标签用于设置css样式。在title标签下创建一个style标签,然后为header类设置div的高、背景颜色样式。

4、为显示主要内容的main类设置样式。在style标签里设置main类样式的边框、宽、高、背景颜色。

5、设置底部footer的样式。在style标签里添加footer类样式的背景颜色和高度。

6、保存好html文件后使用浏览器查看效果。

7、在浏览器上看到div标签和浏览器存在一些空白的像素,为了去掉这些空白的像素我们需要把body标签设置外边框。