如何用css实现类似简书的纵向导航竖排导航

html-css017

如何用css实现类似简书的纵向导航竖排导航,第1张

<body>

<nav>

<div>

<a href="#">点</a>

<a href="#">滴</a>

<a href="#">一</a>

<a href="#">生</a>

</div>

</nav>

<body>

<style>

body {

margin: 0/*一定的初始化是必要的*/

}

nav {

position: fixed/*因为是一个全页面的竖排导航，所以必须设置为固定定位*/

/*同时因为固定定位是把标签从文档中直接拿出来，所以布局其他元素时要用margin留出外边距，

必要时可以设置导航栏为固定宽度保证不会出现白边*/

background-color: #2f2f2f

height: 100%/*让导航栏与页面同高*/

top: 0left: 0/*设置了固定定位后这两个属性才起作用*/

}

nav a { /*设置每个a标记的display属性为block，这样方便控制每个a标记的样式*/

font-weight: bold

font-size: 18px

color: #ffffff

display: block

padding: 15px

text-decoration: none

}

nav div a:first-child { /*通过伪类来控制活动页面的a标记的样式，作为静态页面每个页面都要写不同的css控制样式，

所以使用不方便的话可以使用class来控制样式*/

box-shadow: -1px 0.5px 4px 1px #777 inset

background-color: #e58c7c

}

nav div a:hover {

background-color: #e58c7c

}

nav div a:active {

box-shadow: -1px 0.5px 4px 1px #777 inset

background-color: #e58c7c

}

</style>

#navmenu2{

width:150px

text-align:center

float:left

}

#navmenu2 ul{

padding:0px

margin:0px

list-style:none

}

#navmenu2 li{

margin:0px

}

#navmenu2 a{

display:block

text-decoration:none

width:120px

border:1px

border-right:10px

border-left:20px

border-color:#60C

border-style:solid

background-color:#00F

color:#FFF

padding:7px 0px 7px 0px

}

#navmenu2 a:hover {

background-color:#000

color:#09F

border-left-color:#09f

border-right-color:#09f

border-top-color:#60c

border-bottom-color:#60c

}

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

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

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

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