学习下div+css结构中header部分题目和菜单栏的优化

这便是Div的优势所在。带宽的稍多占用，完全显得微不足道，更何况一个冗余的table设计架构如果代码写的不好会占用更多的带宽。

• 
  
• 
  

在div+CSS结构中，一样平常都如许来全体构架的：

<divid="header"></div>
<divid="main"></div>
<divid="footer"></div>

而关于header部分，一定要显现网站题目，除显现网站题目外，还大概要显现其他对照主要的工具，好比网站的导航栏：

<divid="header">
<divid="title">这里是网站的题目</div>
<divid="nav">这里是网站导航栏</div>
</div>

良多人一样平常都如许写的，固然如许写并没有甚么语法毛病。但关于div来讲有个准绳，那就是尽少的利用div的嵌套（和table一样的弱点：1、关于用户：扫瞄器要损耗资本对嵌套的干系举行剖析，影响速率；2、关于搜刮：搜刮引擎对嵌套的层数大概有所限定）。并且如许写带给我们的可读性也不算太高。

那怎样才是最优化，最迷信的写法呢？
我们选用其他的Xhtml代码来代替下面的div，那又怎样选择呢？？
起首题目的选择——我们晓得在xhtml中h1-h6是暗示题目的，而header里的题目在全页来看是最主要的，我们选择h1来暗示题目是天真烂漫的。
其次导航栏的选择——导航栏是由多个小块内容构成，我们选择无序列表

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

来暗示菜单最符合不外了！
最初以上的内容能够优化成：

<divid="header">
<h1>这里是网站的题目</h1>
<ul>
<li>这里是网站导航栏</li>
</ul>
</div>

以是在做网站时，天真使用h1、h2、h3、ul、li、dl、dt、dd、p、span等标签，能年夜年夜削减代码，增添代码的可读性，并且也布局加倍公道
现在我们不再使用之前所学的“table”定位技术，而是采用Div+css的方式实现各种定位。