HTMl：标签li如何横向排列
今天分享下”HTMl：标签li如何横向排列“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 大部分的导航栏全是横向排列如下图所示，那麼这到底是怎么完成的呢？实际上它主要是应用标识中li的横向排列，下边以一个事例向我们具体解读实际是怎样完成的。1编写横向菜单的HTML代码架构<ul
今天分享下”HTMl：标签li如何横向排列“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 大部分的导航栏全是横向排列如下图所示，那麼这到底是怎么完成的呢？实际上它主要是应用标识中li的横向排列，下边以一个事例向我们具体解读实际是怎样完成的。
1编写横向菜单的HTML代码架构
<ul id="menu">
<li><a href="http://www.baidu.com">Baidu.Com</a></li>
<li><a href="//www.jb51.net">Jb51.net</a></li>
<li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
<li><a href="http://www.google.com" class="last">Google.Com</a></li>
</ul>
2 编写CSS代码
<1>设置公共样式
1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
width: 100%;
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
float: left; /* 往左浮动 */
display: block;
}
<2>设置链接样式
1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
#menu li a {
display:block; /* 将链接设为块级元素 */
width:150px; /* 设置宽度 */
height:30px; /* 设置高度 */
line-height:30px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */
text-align:center; /* 居中对齐文字 */
background:#3A4953; /* 设置背景色 */
color:#fff; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
}
<3>链接悬停效果
1
2
3
4
5
6
<style type="text/css">
#menu li a:hover {
background:#146C9C; /* 变换背景色 */
color:#fff; /* 变换文字颜色 */
}
<4>去掉最左边导航栏的右边框
1
2
3
4
5
<style type="text/css">
#menu li a.last {
border-right:0; /* 去掉左侧边框 */
}
3 完整的代码
<html>
<head>
<meta charset="utf-8">
<title>图片提示效果</title>
<script src="…/jquery-3.3.1.min.js"></script= http://www.qlyl1688.com/ >
<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
width: 100%;
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
float: left; /* 往左浮动 */
display: block;
}
#menu li a {
display:inline-block; /* 将链接设为块级元素 */
width:150px; /* 设置宽度 */
height:30px; /* 设置高度 */
line-height:30px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */
text-align:center; /* 居中对齐文字 */
background:#3A4953; /* 设置背景色 */
color:#fff; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
}
#menu li a:hover {
background:#146C9C; /* 变换背景色 */
color:#fff; /* 变换文字颜色 */
}
#menu li a.last {
border-right:0; /* 去掉左侧边框 */
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="http://www.baidu.com">Baidu.Com</a></li>
<li><a href="//www.jb51.net">Jb51.net</a></li>
<li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
<li><a href="http://www.google.com" class="last">Google.Com</a></li>
</ul>
</body>
</html>
在线运行
提示：您可以先修改部分代码再运行
总之，使其横向排列的最需要的是: 标签的主要样式为display:balock;
- 的主要样式为display:inline-balock,float：left,list-style:none;
今天的文章就分享到这啦，内容转自脚本之家，下篇文章再见！
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
0
0- 0
已为社区贡献8条内容
所有评论(0)