没怎么写过这种纯技术类的东西.所以,对于写的东西也不太会很细致的分析和讲解.只是写在这里作为自己学习过程中的一个记录,但愿这些只言片语也希望在这里和大家分享,学习,交流,共同的进步.
关于导航菜单是任何网页中不可获取的一部分,所以,掌握这部分的内容也就尤为重要.今天写的这个实例也是老师讲解的例子.效果很不多,易于理解,代码量也很少.
如果有接触css的童鞋们都应该知道
伪类Pseudo-Classes这个特性.如果不知道的自己去查手册.[一定要知道手册的重要性,常备于身边,以备需要].伪类做用于a标签.通过link.hover.visited等属性实现滑动菜单的效果
实例效果如果下
下面是上面实例的代码:
1. 内容部分 content代码:
1 <div>
2 <ul class="links">
3 <li><a href="#">home</a></li>
4 <li><a href="#">about</a></li>
5 <li><a href="#">news</a></li>
6 <li><a href="#">blog</a></li>
7 <li><a 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>