CSS设计网页头部的写法

2016-02-19 14:16 78 1 收藏

今天图老师小编要向大家分享个CSS设计网页头部的写法教程，过程简单易学，相信聪明的你一定能轻松get！

【 tulaoshi.com - Web开发】

在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

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）很多人一般都这样写的，当然这样写并没有什么语法错误。但对于div来说有个原则，那就是尽少的使用div的嵌套（和table一样的缺点：1、对于用户：浏览器要消耗资源对嵌套的关系进行解析，影响速度；2、对于搜索：搜索引擎对嵌套的层数可能有所限制）。而且这样写带给我们的可读性也不算太高。

那如何才是最优化，最科学的写法呢？
我们选用其他的Xhtml代码来取代上面的div，那又如何选择呢？？
首先标题的选择——我们知道在xhtml中h1-h6是表示标题的，而header里的标题在全页来看是最重要的，我们选择h1来表示标题是顺其自然的。
其次导航栏的选择——导航栏是由多个小块内容组成，我们选择无序列表

ulli/li/ul

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）来表示菜单最合适不过了！
最后以上的内容可以优化成：

div id="header"
h1这里是网站的标题/h1
ul
li这里是网站导航栏/li
/ul
/div

来源:http://www.tulaoshi.com/n/20160219/1606572.html

上一篇： CSS教程:可扩展圆角标签
下一篇：对于颓废的程序员我要说：......

看过《CSS设计网页头部的写法》的人还看了以下文章更多>>

CSS教程：网页头部css代码优化实例

标签： Web开发

在div+css布局中，一般都这样来整体构架的： div id="header"/div div id="center"/div div id="footer"/div 而对于header部分，肯定要显示网站标题，除了显示网站标题外，还可能要显示其他比较重要的对象，比如网站的导航栏： div id="header" div id="title"这里是网站的标题/div div...

CSS设计网页教程:制作网页气泡状文本框

标签： Web开发

气泡对话框在网页中经常用于说明提示等功能，可以形象生动的现实一些需要用户注意的文字与内容，本文介绍仅用CSS来实现这种简单的网页效果。气泡状文本框，是一种很生动的网页设计手段。它可以用来表示用户的发言。也可以用来作为特定信息的提示符。 DVD租借网站Netflix，还用它显示碟片的详细信息。 ===================...

CSS设计网页时的一些常用规范

标签： Web开发

CSS命名规范一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页眉：header 内容：content 容器：container 页脚：footer 版权：copyright 导航：menu 主导航：mainMenu 子导航：subMenu 标志：Logo...

怎样设计网页？怎样制作网页？

标签： Web开发

在网页设计的认识上，许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件，就能搞好网页设计了。其实网页设计是一个感性思考与理性分析相结合的复杂的过程，它的方向取决于设计的任务，它的实现依赖于网页的制作。正所谓功夫在诗外，网页设计中最重要的东西，并非在软件的应用上，而是在我们对网页设计的理解以及设计...

CSS设计网页时的一些常用规范(1)