php学习交流博客

好好写代码,好好痛她

CSS简单滑动导航菜单制作

    没怎么写过这种纯技术类的东西.所以,对于写的东西也不太会很细致的分析和讲解.只是写在这里作为自己学习过程中的一个记录,但愿这些只言片语也希望在这里和大家分享,学习,交流,共同的进步.
   
    关于导航菜单是任何网页中不可获取的一部分,所以,掌握这部分的内容也就尤为重要.今天写的这个实例也是老师讲解的例子.效果很不多,易于理解,代码量也很少.

    如果有接触css的童鞋们都应该知道伪类Pseudo-Classes这个特性.如果不知道的自己去查手册.[一定要知道手册的重要性,常备于身边,以备需要].伪类做用于a标签.通过link.hover.visited等属性实现滑动菜单的效果
    实例效果如果下
   
下面是上面实例的代码: 
   1. 内容部分  content代码:
1 <div>
2     <ul class="links">
3     <li><href="#">home</a></li>
4     <li><href="#">about</a></li>
5     <li><href="#">news</a></li>
6     <li><href="#">blog</a></li>
7     <li><href="#">content</a></li>
8     </ul>
9 </div>

  2. 表现部分  css代码:
 1 <style>
 2 .links{
 3     height:30px;
 4     width:100%;
 5     border-bottom:1px solid red;
 6 }
 7 .links li{
 8     display:inline;
 9     line-height:30px;    
10 }
11 .links a{
12     color:white;
13     background-color:red;
14     line-height:30px;
15     margin-left:10px;
16     padding:10px;
17     font-size:14px;
18     font-weight:bold;
19     text-decoration:none;
20 }
21 .links a:hover{
22     color:#000;
23     background-color:#006600;
24 }
25 </style>

posted on 2010-03-09 17:14 王吉刚 阅读(665) 评论(0)  编辑 收藏 引用 网摘 所属分类: hfphp


只有注册用户登录后才能发表评论。
网站导航: