这种网页导航栏，栏目中间有“丨”分割线，如何在html里实现？（DIV+CSS布局问题）
它这里用了a标签，但是“丨”是如何用css控制的呢？如果用ul，li无序列表，有能如何实现呢？最好有代码详解...
它这里用了a标签，但是“丨”是如何用css控制的呢？如果用ul，li无序列表，有能如何实现呢？
最好有代码详解 展开
最好有代码详解 展开
4个回答
展开全部
基本就是这么干的！你阔以参考一下！
<!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>
追问
按照你这种做法，最后面一栏的文字后面还是会有那个“丨”线啊
追答
我这方法是有些粗暴，但是简单，改一下下面么
<ul id="main">
<li>首页</li>
<li>新闻中心</li>
<li>企业简介</li>
<li>新闻中心</li>
<li style="border:none;">企业简介</li>
</ul>
已赞过
已踩过<
你对这个回答的评价是？
展开全部
他这里用的是css伪类元素，就相当于|符号是以类加上去的，并不是直接写上去的，
http://html5.9tech.cn/news/2013/1115/38641.html
你可以看看这个介绍，你那个|符号应该是用过css的after属性添加的
http://html5.9tech.cn/news/2013/1115/38641.html
你可以看看这个介绍，你那个|符号应该是用过css的after属性添加的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
方法很多，就单你这个也是可以用CSS控制的。
.w980{font-size:12px; color:#fff;}
这个是控制线和A标签文字的，然后单独写A标签的属性
.w980 a{font-size:14px; color:#000;}
这样就可以区分开了
不过这个不太好控制"|"的具体之类的
那么就写成
<a>首页</a>
<span>|</span>
<a>独家</a>
.w980 span{font-size:12px; color:#fff;}
.w980 a{font-size:14px; color:#000;}
这样就更直接区分了。
还可以把"|"去掉，使用边框来弄。这样可以弄渐变颜色。想弄那种好看的，还可以用图片当背景弄，各式各样的方法都可以实现。
.w980{font-size:12px; color:#fff;}
这个是控制线和A标签文字的，然后单独写A标签的属性
.w980 a{font-size:14px; color:#000;}
这样就可以区分开了
不过这个不太好控制"|"的具体之类的
那么就写成
<a>首页</a>
<span>|</span>
<a>独家</a>
.w980 span{font-size:12px; color:#fff;}
.w980 a{font-size:14px; color:#000;}
这样就更直接区分了。
还可以把"|"去掉，使用边框来弄。这样可以弄渐变颜色。想弄那种好看的，还可以用图片当背景弄，各式各样的方法都可以实现。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
上面代码中应该用的是m0样式，
.m0{
font-size:14px; color:#fff;
}
另一种方法
做成了背景图片。背景图片就是一条白色的竖线，、
background:url(bg.png) no-repeat right center;
.m0{
font-size:14px; color:#fff;
}
另一种方法
做成了背景图片。背景图片就是一条白色的竖线，、
background:url(bg.png) no-repeat right center;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
