导航带竖线字css怎么写

html-css024

导航带竖线字css怎么写,第1张

1, "首页 | 校园 | 课程" ----中间用竖线

2, <li>首页</li><li>校园</li><li>课程</li>用li的右/左 border, 然后单独处理 最后/最前一个, 让它的当做竖线的border:none

3, 2的方法中, border 当作分隔线, 有时会感觉 线的高度太高(大于字体高度), 如果想用和字体高度差不多的,或者有渐变效果的, 就需要自己作一个1px 宽的图片, 当做li的背景, 不平铺, 定位到右边或者左边.

我一般都采用 第3种方法, 如果有什么不懂, 可再交流..

两种方法

1.带竖线的字,在每个导航标记后面加入 '|'这个就是竖线

2.直接用边框

单个导航的样式加上:border-right:1px solid #ddd