053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

css导航菜单制作方法

时间:2017-08-16

最简单的效果:动态的超链接。意思鼠标移动导航文字上 出现下划线和文字颜色的变化等。

效果:

css导航菜单制作方法一
 

看看正文代码:
 

以下为引用的内容:

<table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center">
 <tr>
  <td><a href="#">首页</a></td>
  <td><a href="#">心情日记</a></td>
  <td><a href="#">Free</a></td>
  <td><a href="#">一起走到</a></td>
  <td><a href="#">从明天起</a></td>
  <td><a href="#">纸飞机</a></td>
  <td><a href="#">下一站</a></td>
 </tr>
</table>

就是用一个表格控制各个菜单
看看css代码:

以下为引用的内容:

<style>
<!--
body{
 background:url(bg9.gif); /* 页面背景图片 */
 margin:0px; padding:0px;
 cursor:pointer;
}
.chara1{
 font-size:12px;
 background-color:#90bcff; /* 导航条的背景颜色 */
}
.chara1 td{
 text-align:center;
}
a:link{       /* 超链接正常状态下的样式 */
 color:#005799;    /* 深蓝 */
 text-decoration:none;  /* 无下划线 */
}
a:visited{      /* 访问过的超链接 */
 color:#000000;    /* 黑色 */
 text-decoration:none;  /* 无下划线 */
}
a:hover{      /* 鼠标经过时的超链接 */
 color:#FFFF00;    /* 黄色 */
 text-decoration:underline; /* 下划线 */
}
-->
</style>

其中的

以下为引用的内容:

a:link{       /* 超链接正常状态下的样式 */
 color:#005799;    /* 深蓝 */
 text-decoration:none;  /* 无下划线 */
}
a:visited{      /* 访问过的超链接 */
 color:#000000;    /* 黑色 */
 text-decoration:none;  /* 无下划线 */
}
a:hover{      /* 鼠标经过时的超链接 */
 color:#FFFF00;    /* 黄色 */
 text-decoration:underline; /* 下划线 */
}

控制了动态效果。
 
相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP