常春岛资源网 Design By www.syssdc.com
大多数的导航栏都是横向排列如下图所示,那么这究竟是怎么实现的呢?其实它主要运用<ul>标签中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>设置公共样式
<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>设置链接样式
<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; /* 在左侧加上分隔线 */ } </style>
<3>链接悬停效果
<style type="text/css"> #menu li a:hover { background:#146C9C; /* 变换背景色 */ color:#fff; /* 变换文字颜色 */ } </style>
<4>去掉最左边导航栏的右边框
<style type="text/css"> #menu li a.last { border-right:0; /* 去掉左侧边框 */ } </style>
3 完整的代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片提示效果</title> <script src="../jquery-3.3.1.min.js"></script> <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>
在线运行
总之,使其横向排列的最需要的是: <ui>标签的主要样式为display:balock;
<li>的主要样式为display:inline-balock,float:left,list-style:none;
标签:
li横向排列,HTMl横向排列
常春岛资源网 Design By www.syssdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
常春岛资源网 Design By www.syssdc.com
暂无评论...
更新日志
2024年06月03日
2024年06月03日
- 百代群星《最啱听》(88年EMI东芝1MTO首版)[WAV+CUE]
- 罗斯特洛波维奇、布里顿《舒伯特-阿佩乔尼奏鸣曲》1995[WAV+CUE]
- 群星《超高品质流行女声大碟 静听女人心 2CD》[WAV+CUE][1.3GB]
- BEYOND《无悔这一生 2023》 [WAV+CUE][690MB]
- 群星《30首最发烧经典老歌 情牵男人心 2CD》[WAV+CUE][1.4GB]
- 群星《不老的情歌-至尊版2CD》WAV分轨
- 岁月留声机群星《七十年代人金曲回顾》(黑胶)2CD[WAV分轨]
- 群星-世纪难忘金曲(迪安唱片)5CD[WAV]
- HenrietteFaure-DebussyEstampesPrludes,LivreI(MonoVersion)[FLAC]
- 吕方1992-弯弯十八首[香港][WAV+CUE]
- 经典歌曲珍藏专辑《民歌30年·真情依旧》3CD[WAV+CUE]
- 群星《时尚流行发烧极品 非同凡响 第一辑 2CD》[WAV/分轨][1.3GB]
- 陈曦《多年以后》HQⅡ头版限量编号[WAV+CUE][520MB]
- 孙露《用情 HQⅡ 2023》[WAV+CUE][380MB]
- 电影原声《速度与激情9电影原声大碟》2021[WAV+CUE]