会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图。

  假如要布局出这样简单导航条效果

  比如以下代码:

  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列表标签布局并排显示不换行

  默认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、案例效果截图

  使用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解决横排显示截图

  三、li并排显示总结 - TOP

  这里DIVCSS5介绍两种情况解决,当然还有其他解决实现方法。大家下来可以实践以上两种方法并掌握,灵活运用。

为什么要使用ul li布局网站导航条?使用ul li布局网站网页导航必要性的更多相关文章

  1. Android Material Design:基于CoordinatorLayout实现向上滚动导航条ToolBar滚出、向下滚动导航条滚出

    activity_main.xml: <android.support.design.widget.CoordinatorLayout xmlns:android="http://sc ...

  2. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  3. Bootstrap 我的学习记录3 导航条理解

    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...

  4. Bootstrap 导航条理解

    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...

  5. 1.bootstrap练习笔记-导航条

    bootstrap练习笔记 1.关于导航栏   官网链接:http://v3.bootcss.com/components/#nav 结构大概是这样的: nav标签标识导航栏 class为navbar ...

  6. Bootstrap_导航条

    一.基础导航条 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个 ...

  7. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  8. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  9. Bootstrap每天必学之导航条

    http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...

  10. Bootstrap入门(十三)组件7:导航条

    Bootstrap入门(十三)组件7:导航条 1.默认样式的导航条 2.嵌入表单和按钮 3.嵌入文本和非导航的链接 4.组件排列和下拉菜单 5.固定在顶部/底部 6.反色的导航条 7.路径导航 首先先 ...

随机推荐

  1. CSS - 选择器相关

    1. 标签选择器 /* 标签选择器 : 会将样式作用在当前网页所有的指定标签上 标签名 { 样式名1: 样式值1; 样式名2: 样式值2; ...... } */ table { width: 300 ...

  2. 廖雪峰Java15JDBC编程-3JDBC接口-2JDBC查询

    我们可以使用JDBC查询来执行select语句. 1. Statement try(Connection conn = DriverManager.getConnection(JDBC_URL, JD ...

  3. 关于操作系统中英文切换的.po和.mo介绍

    一.文件简介 .po文件,.mo文件,.pot文件是由gettext程序生成或者使用的源代码和编译结果.   1..pot文件  是一种模板文件,其实质与.po文件一样,其中包含了从源代码中提取所有的 ...

  4. CF1166D——数学公式思维题

    #include<bits/stdc++.h> using namespace std; #define ll long long ll ans[],a,b,m; /* b=2^(n-2) ...

  5. Windbg 问题集锦记录

    问题1: 问: 0  Id: 15f4.e60 Suspend: 1 Teb: 7ffdf000 Unfrozen  # ChildEBP RetAddr  Args to Child         ...

  6. 服务器迁移部署PosApp

    绑定 基本配置 高级设置

  7. Freemaker 开发学习笔记

    Freemaker 是一个强大的模板引擎,相比 velocity 而言,其强大的过程调用.递归和闭包回调功能让 freemaker 可以完成几乎所有我们所想的功能.从个人看法而言,freemaker ...

  8. 第一周课堂笔记4th

    1.    if 对应着程序设计中的三种程序执行流程: 顺序结构,一条一条的按顺序执行,自上而下 选择结构,if  else 单分支,双分支,多分支 循环结构 while for (后面学) 流程控制 ...

  9. mybatis 中 if else 用法

    mybaits 中没有 else 要用 chose when otherwise 代替 下面就是MyBatis中的if....else...表示方法 <choose> <when t ...

  10. Numpy数据的操作 * dot() multiply() 的区别

    使用numpy时,跟matlab不同: 1.* dot() multiply() 对于array来说,* 和 dot()运算不同 *是每个元素对应相乘 dot()是矩阵乘法 对于matrix来说,*  ...