为什么要使用ul li布局网站导航条?使用ul li布局网站网页导航必要性
会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用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布局网站网页导航必要性的更多相关文章
- Android Material Design:基于CoordinatorLayout实现向上滚动导航条ToolBar滚出、向下滚动导航条滚出
activity_main.xml: <android.support.design.widget.CoordinatorLayout xmlns:android="http://sc ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- Bootstrap 我的学习记录3 导航条理解
以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
- Bootstrap 导航条理解
以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
- 1.bootstrap练习笔记-导航条
bootstrap练习笔记 1.关于导航栏 官网链接:http://v3.bootcss.com/components/#nav 结构大概是这样的: nav标签标识导航栏 class为navbar ...
- Bootstrap_导航条
一.基础导航条 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个 ...
- CSS实现导航条Tab的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- CSS实现导航条Tab切换的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- Bootstrap每天必学之导航条
http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...
- Bootstrap入门(十三)组件7:导航条
Bootstrap入门(十三)组件7:导航条 1.默认样式的导航条 2.嵌入表单和按钮 3.嵌入文本和非导航的链接 4.组件排列和下拉菜单 5.固定在顶部/底部 6.反色的导航条 7.路径导航 首先先 ...
随机推荐
- csps-s模拟测试60嘟嘟噜,天才绅士少女助手克里斯蒂娜,凤凰院凶真题解
题面:https://www.cnblogs.com/Juve/articles/11625190.html 嘟嘟噜: 约瑟夫问题 第一种递归的容易re,但复杂度较有保证 第二种适用与n大于m的情况 ...
- diskpart
比如格式化成fat32 format fs=fat32 quick 比鼠标方便 如何使用: 打开cmd输入diskpart进入命令 首先 list disk 然后 然后 clean 然后 create ...
- PKU--1976 A Mini Locomotive (01背包)
题目http://poj.org/problem?id=1976 分析:给n个数,求连续3段和的最大值. 这个题目的思考方式很像背包问题. dp[i][j]表示前i个数字,放在j段的最大值. 如果选了 ...
- 几种远程调用接口协议简单比较和web service(SOAP)与HTTP接口的区别:
什么是web service? 答:soap请求是HTTP POST的一个专用版本,遵循一种特殊的xml消息格式Content-type设置为: text/xml任何数据都可以xml化. ...
- 在HBase之上构建SQL引擎
- Fiilter
过滤器 过滤请求和响应 作用: 自动登录. 统一编码. 过滤关键字 .... Filter是一个接口 编写filter步骤: 1.编写一个类 a ...
- @NotNull,@NotBlank和 @NotEmpty使用
1.实体类 package com.example; import org.hibernate.validator.constraints.NotBlank; import org.hibernate ...
- error: stray ‘\357’ in program——输入了中文的标点符号
/home/qian/Pioneer/src/network/src/WiFi_connect.cpp::: error: stray ‘\’ in program sockfd = socket(A ...
- linear-gradient
http://jsbin.com/mocojehosa/edit?html,css,output https://developer.mozilla.org/zh-CN/docs/Web/CSS/li ...
- python 日记 day3
数据类型的概况:1.int 用于计算. 2.str 用于存储少量数据. 3.list 用于存储大量数据. 4.元祖 又叫只读列表,元素不可更改. 5. dic 用于存储关系型对象 . 6.集合 A.i ...