导航带竖线字css怎么写

html-css08

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

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

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

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

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

竖线 理论双来说是我们以为是竖线,其实有可能是键盘上的符号“|”,也有可能是 某一控件(div、span等等)设置宽度为1px,高度比如20px 然后加border或者background做出来的效果。

一, 键盘上可以直接输 |

二, 如果是一条虚线的话, 那么是这样做的:

用Fireoworks新建一个1*3PX的图片, 在中间画一个点,然后将其导出,再在DW里建一个单元格,将其背景设为这个图片(注意,让它垂直方向重复,水平方向不重复 -- CSS),大功告成

三,CSS

<a href="#" style="border-right:1px solid #000">链接</a>