基本就是这么干的！你阔以参考一下！
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
ol,ul {
list-style: none;
}
#main{
margin:20px auto;
width:800px;
height:40px;
background:blue;
}
#main li{
width:100px;
height:20px;
font-weight:600;
color:#FFFFFF;
border-right:1px solid #ffffff;
text-align:center;
line-height:20px;
margin-top:10px;
margin-right:5px;
float:left;
}
</style>
</head>
<body>
<ul id="main">
<li>首页</li>
<li>新闻中心</li>
<li>企业简介</li>
<li>新闻中心</li>
<li>企业简介</li>
</ul>
</body>
</html>第一步、编写横向菜单的HTML代码架构请将以下代码添加到HTML文档的导航栏区域中。BaiduComCode52NetYahooCom标签范围中。#menu{font:12pxverdana,arial,sans-serif;/设置文字大小和字体样式/}#menu,#menuli{list-style:none;/将默认的列表符号去掉/padding:0;/将默认的内边距去掉/margin:0;/将默认的外边距去掉/}中的各条目默认都是纵向排列的，需要定义CSS来让其横向排列起来。Tips：因为现在将导航栏拉出来独立讲解，所以需要设置一些公共样式，如果在body或其他地方已经重设了默认效果，以上代码可以去掉2、让文字横排标签下的项目默认是纵向排列的，需要定义额外的CSS属性让其横向排列。#menuli{float:left;/往左浮动/}3、设置链接样式：#menulia{display:block;/将链接设为块级元素/padding:8px50px;/设置内边距/background:#3A4953;/设置背景色/color:#fff;/设置文字颜色/text-decoration:none;/去掉下划线/border-right:1pxsolid#000;/在左侧加上分隔线/}用内边距（即填充padding）的方式，让每个菜单变得宽一些，如果菜单是中英文混排的，建议设置单个菜单的高宽，这样可以避免中英文字符行高不一致导致的高度误差。设置固定高度的方式：#menulia{display:block;/将链接设为块级元素/width:150px;/设置宽度/height:30px;/设置高度/line-height:30px;/设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中/text-align:center;/居中对齐文字/background:#3A4953;/设置背景色/color:#fff;/设置文字颜色/text-decoration:none;/去掉下划线/border-right:1pxsolid#000;/在左侧加上分隔线/}4、链接悬停效果：通过以上几步的综合作用，一个横向导航栏的初步框架就出现了。此步主要是定义链接的悬停效果，让导航栏更美观。当然，如果要让导航栏更炫丽，可以在CSS悬停属性上定义背景。#menulia:hover{background:#146C9C;/变换背景色/color:#fff;/变换文字颜色/}这里的代码一个缺陷，最右边会多出来一个边框，由于:first-child伪类不被IE系列浏览器所支持，我们只能单独写一个样式，将最后一个边框去掉，同时要给HTML代码增加一个额外选择符。BaiduComCode52NetYahoocom#menulialast{border-right:0;/去掉左侧边框/}好了，到这里一个简单的横向导航菜单就制作完成了
步骤/方法
1
需要两个小小的，分别用来填充背景与分隔条。
2
编写html代码，很简单，用ul、li列表就可以了。下面是原代码：（包含效果图）
3
然后开始CSS部分。首先：加背景；其次：将竖直列表变成水平，用float:left就可以实现。
相应的CSS代码如下（附效果图）：
4
最后再美化一下，给a标签左右2em的间距，同时加上竖线背景（mainNavBorderjpg）,并弄上:hover时的变化（这里只是让颜色变化） 在上面的CSS基础上，添加如下代码：
3种方法：
就是文字竖线 " | " 这个， 更改size和line-height就行了
普通li排列 写在DIV里
普通 位置截取 也是写在div里的
<script type="text/javascript" src="js/jqjs"></script><script type="text/javascript">
$(function(){
var UlWidth=$("ulnav")width();//得到ul宽度
var LiLen=$("ulnav li")length;//得到li的个数
$("ulnav li")css({width:UlWidth/LiLen})
});
</script>
<ul class="nav">
<li><a href="#">第1个LI</a></li>
<li><a href="#">第2个LI</a></li>
<li><a href="#">第3个LI</a></li>
<li><a href="#">第4个LI</a></li>
<li><a href="#">第5个LI</a></li>
</ul>
用js来控制
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）