竖直导航（一）

  首页，来一个比较简单的例子热热身，相信有点css基础的人都可以看懂的。自所以，写一些教程，或许这样的教程已经泛滥啦，但是，还是想理理自己的思想来帮助自己及引导初学者更好的理解css。

  1、竖直排列导航

       先上html代码吧！

     

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>竖直排列导航</title>
 6 <link href="cs.css" rel="stylesheet" type="text/css" />
 7 </head>
 8 <body>
 9 <div id=menu>
10 <a href="#">首页</a>
11 <a href="#">关于我们</a>
12 <a href="#">新闻资讯</a>
13 <a href="#">案例解决方案</a>
14 <a href="#">在线留言</a>
15 <a href="#">招贤纳士</a>
16 <a href="#">联系我们</a>
17 
18 </div>
19 </body>
20 </html>

一个很常见的html，相信很多人都没任何的问题。

接着就上css吧

@CHARSET "UTF-8";
*{ margin:0 auto;padding:0;}
#menu{
float:lef
width:140px;
background-color:#ccc;
padding:8px;
}
#menu a,#menu a:visited{
display:block;
text-decoration:none;
padding:4px 12px;
background-color:#fff;
color:#000;
margin:8px 0 0 0;
border-left:8px solid #f00;
border-right:8px solid #f00;
}
#menu a:hover{
border-left:8px solid #ff0;
border-right:8px solid #ff0;
}

觉的这个例子不需要我将太多，直接上效果图：

这个例子就到这里就OK,下面重点讲述下面这个例子，或许，并不是很难，但需要掌握css一个细节或者技巧，先上效果图吧！

或许很多人都会认为，这个太容易实现啦，但是，我如果问，不借用如任何图片，你将如何实现这个效果，如果实现不了，就往下看吧，如果你可以，就当复习一下或者点击右上角的关闭按钮就可以啦！

老规矩，先上html，其实是和上面的html是一样的。不过还是重复一下，为了不必再倒回去看

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>竖直导航</title>
 6 <link href="cs.css" rel="stylesheet" type="text/css" />
 7 </head>
 8 <body>
 9 
10 <div class=menu>
11 <a href="#">首页</a>
12 <a href="#">关于我们</a>
13 <a href="#">新闻资讯</a>
14 <a href="#">案例解决方案</a>
15 <a href="#">在线留言</a>
16 <a href="#">招贤纳士</a>
17 <a href="#">联系我们</a>
18 
19 </div>
20 </body>
21 </html>

接着上css，看上去速度确实比较快哦，不过放心，细节部分会重点讲。

 1 .menu{
 2 float:left;                    //这个只是为了和另外一个导航排在一列而已，上面的例子也有这行代码，单独做导航，完全可以把这句去掉
 3 margin-left:20px;
 4 width:140px;
 5 border:1px solid #ccc;
 6 }
 7 .menu a,.menu a:visited{
 8 color:#000;
 9 display:block;
10 text-decoration:none;
11 padding:2px 8px;
12 border:8px solid #fff;
13 line-height:25px;
14 
15 }
16 .menu a:hover{
17 color:#f00;
18 background:#cc0;
19 border-color:#ccc #cc0;
20 }

对于那个折角是如何实现的，在鼠标移上前，a标签是有一个border属性的，只是因为和背景颜色一样，看不出效果而已，如果边框的宽度比较宽的话，两条相交的边框颜色不一样的就会产生一个折角。童鞋们可以自己单独做一个实验，四条边如果其中有一条和背景色不一样（其余三条和背景色一样），就会产生一个三角形，后期也会讲到这个效果，回到这个导航，当鼠标移上去的时候，左右的边框的颜色和背景色是一样的，上下边框和背景是不一样的，首先，上和左边的边框会产生一个角有两个颜色，图片是黄色和灰色。不知道童鞋们有木有理解，下次的会讲如何利用css制作三角形。

这章就到这里啦！

posted on 2013-12-09 21:19  js_css  阅读(1199)  评论(1)  编辑  收藏  举报

导航