一个蓝色主题的导航栏布局示例。此CSS示例是使用DIVCSS实现的。同时，背景颜色不用作图片作为背景，并且将鼠标悬停后相应的列名称变得更暗。
通常，导航栏采用ulli列表布局，而DIVCSS5示例也采用列表标签ulli+CSS布局。
1.布局思考与思考-TOP
在实际的DIV+CSS布局项目中，通常您不仅会使用ulli列表一次，以免干扰ulli在其他地方的布局，而且避免设置ulli样式来影响其他地方，因此这里是ul的特殊#nav命名（常规导航栏被命名为带有nav或菜单的CSS，并且在此处选择了nav）。如果导航栏的背景宽度为全屏100％或固定宽度，则在此处由ul＃nav控制，并在此处设置100％全屏宽度蓝色背景。
这是一个技术要点，ul中的li是连续设置的，因此您需要设置CSSdisplay：inline以使li连续排列，以便li并排放置。
然后，您需要在ulli中为a标签设置display：block，但是a的父li没有设置特定宽度，因此您需要设置display：inline-block以便a与li并排继承并设置拍摄效果的宽度和高度。
div+css布局和table布局的区别
table布局
坏处
1.显示样式和数据绑定在一起
2.布局不灵活
3.一个页面可能有大量的表元素，高代码冗余
4.增加带宽
5.搜索引擎不喜欢这种布局
优点
1.理解比较简单
2.不同浏览器看到的效果通常是相同的
3.显示数据还是很好的
DIV+CSS布局
基本思想：数据和样式的分离
优点
1.符合w3c标准，Microsoft和其他公司都是w3c支持者
2.搜索引擎更友好
3.样式的调整更加方便，内容和样式的分离使页面和样式的调整更加方便。现在，YAHOOMSN和其他国际门户网站，网易，新浪等。
国内门户网站和主流web2.0网站都采用DIV+CSS布局，这证明DIV+CSS是大势所趋。
4.CSS的最大优势在于其简洁的代码，可以为大型网站节省大量带宽。搜索引擎更喜欢简洁的代码
5.绩效和结构分开，更容易分工合作进行团队开发并减少相互关系
DIV+CSS不想我们放弃该表，因为该表在显示数据时特别方便
因此，在使用DIV+CSS时，在使用表时，必须使用
