CSS怎么设计网页头部

html-css064

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>

因为css是要在网页渲染外观的时候就要调用的，所以要预先调入内存，因此放在头部。

而js因为有可能（可以说是很有可能）需要调用网页DOM结构中的元素，所以必须等HTML的整个DOM结构都调入内存后才开始运行（否则就很可能因为无法找到元素而出错），所以要放在底部。但是最好或者说最标准的用法是把js代码放入window对象的onload事件中，这样就可以把整个js代码放到网页的任何位置了（包括头部）。就类似这样：

<script>

window.onload=function(){

//要运行的js代码放在这

}

</script>

其实用postion: fixed并不是很方便，用position: sticky会更容易达到我们的目的。

只需要给头部设置：

即可。

将position设置为sticky，那么头部组件还会占有着上方空间，所以下面的body中的组件可以不用设置预留top。如果是用的fixed属性，那么body下面的组件也要算出导航栏的长度，再设置top属性，这样一来就麻烦了很多