会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图。
![假如要布局出这样简单导航条效果截图](https://i-blog.csdnimg.cn/blog_migrate/ffaaddcdc67ca714a6da806fcf2452d7.png)
假如要布局出这样简单导航条效果
比如以下代码:
1、可以使用Ul li布局导航条
<ul> <li><a href="http://www.divcss5.com/">网站首页</a> <li><a href="http://www.divcss5.com/html/">HTML教程</a> <li><a href="http://www.divcss5.com/htmlrumen/">HTML入门</a> <li><a href="http://www.divcss5.com/html5/">HTML5教程</a> <li><a href="http://www.divcss5.com/rumen/">CSS教程</a> <li><a href="http://www.divcss5.com/cssrumen/">CSS入门</a> </ul>
2、也可以不使用ul li布局的
<div class=”nav”> <a href="http://www.divcss5.com/">网站首页</a> <a href="http://www.divcss5.com/html/">HTML教程</a> <a href="http://www.divcss5.com/htmlrumen/">HTML入门</a> <a href="http://www.divcss5.com/html5/">HTML5教程</a> <a href="http://www.divcss5.com/rumen/">CSS教程</a> <a href="http://www.divcss5.com/cssrumen/">CSS入门</a> </div>
通过以上两种布局都能实现同样导航条布局效果,但是DIVCSS5推荐使用ul li布局,哪怕多几个ul li标签代码也无妨。
这是为什么(推荐ul li)?
在不考虑网站优化seo布局情况下,DIVCSS5是推荐不用ul li布局从而节约html代码;但一般网站要考虑搜索引擎排名因素(SEO),此时如果不用ul li而是直接在一个盒子里放锚文本超链接的栏目名称,虽然html代码量减少了,但这样搜索引擎容易认为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险)。
如果使用ul li列表标签布局,这个时候搜索引擎很容易辨别为有条理的列表型内容(对搜索引擎蜘蛛更加友好)。
综合以上描述,不难看出有时在div css网页布局中考虑seo搜索引擎优化时网页布局适当使用h1、h2、h3、h4、b、strong等标签必要性,如果在html css布局中对不同html 标签灵活使用,可能会得到意想不到的效果。当然使用不同标签的使用适可而止,不要滥用后成为适得其反。
如何使用CSS样式让ul li列表标签布局并排显示不换行
![默认li列表布局多列显示](https://i-blog.csdnimg.cn/blog_migrate/66fb572d2d19a2d158bb1ca988e4c80a.png)
默认ul li布局竖列显示
这里divcss5介绍使用两种使用css样式让li标签布局并排显示,一种使用css display,另外一种使用css float浮动。
一、使用display让li并排显示 - TOP
CSS样式单词:
display:inline
具体CSS+DIV代码如下
1、不换行横向并排CSS代码:
li{ display:inline}
2、HTML代码片段:
<ul> <li><a href="http://www.divcss5.com/">DIVCSS5</a></li> <li><a href="http://www.css5.com.cn/">CSS制作</a></li> <li><a href="http://www.divcss5.com/">DIV CSS</a></li> </ul>
3、案例效果截图
![css解决li并排显示截图](https://i-blog.csdnimg.cn/blog_migrate/2765ddf95b435d93dac5d82823620b50.png)
使用display让li布局并排显示截图
二、使用float浮动样式让li并排显示 - TOP
li{float:left;}
1、解决css样式代码:
<style> li{ float:left; list-style:none} /* CSS注释:加list-style:none去掉li默认产生”点“ */ </style>
2、html代码片段:
<ul> <li><a href="http://www.divcss5.com/">DIVCSS5</a></li> <li><a href="http://www.css5.com.cn/">CSS制作</a></li> <li><a href="http://www.divcss5.com/">DIV CSS</a></li> </ul>
3、案例截图
![用float解决并排显示](https://i-blog.csdnimg.cn/blog_migrate/0a374f7ec01b086a80a228167ca665de.png)
使用float解决横排显示截图
三、li并排显示总结 - TOP
这里DIVCSS5介绍两种情况解决,当然还有其他解决实现方法。大家下来可以实践以上两种方法并掌握,灵活运用。