<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>
其实用postion: fixed并不是很方便,用position: sticky会更容易达到我们的目的。只需要给头部设置:
即可。
将position设置为sticky,那么头部组件还会占有着上方空间,所以下面的body中的组件可以不用设置预留top。如果是用的fixed属性,那么body下面的组件也要算出导航栏的长度,再设置top属性,这样一来就麻烦了很多
css最好写在head头部里,也可以写在body里,写在头部的好处是先加载css,之后再body内容,不会使内容变形,如果放在body里,尤其放在body底部,那会让加载的内容无样式,等待css加载才显示样式,很不美观。