CSS怎么设计网页头部

html-css022

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>

<style type="text/css">

html,body{height:100%}/*定义高度为100%*/

*{margin:0padding:0}

.header,.footer{width:100%height:5%background:#000}/*上下高度5%；中间盒子高度90%*/

.main{overflow-y:scrollwidth:100%height:90%}  

.main p{height:1500pxwidth:100%text-align:centerline-height:1500px} 

</style>

<div class="header"></div>

<div class="main">

<p>高度1500px</p>

</div>

<div class="footer"></div>

顶部和底部高度5%；中间盒子高度90%，这样刚好100%，你内容填充到中间的盒子就行，如果需要特殊样式，顶部和底部可以用position定位，main盒子加上margin-top、margin-bottom分别等于顶部和底部的高度就行

所有div的总高度不能大于100%，不然会出现2个滚动条，因为现在的滚动条是main盒子的，如果超过100%；浏览器的滚动条也会出现

对header使用样式

{

position: fixed

top: 0

width:100%

}

或者

{

position: absolute

top: 0

width:100%

}

你可以去搜索一下这两者的区别，