今日新开传奇
今日刚开传奇

纯css实现蓝色圆角效果水平导航菜单代码 传奇私服对战平台

纯css实现蓝色圆角效果水平导航菜单代码

  这是一款可爱的.蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适。在兼容性方面做的也很好,几乎兼容所有的浏览器。

  运行效果截图如下:

  代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>蓝色圆角水平导航菜单</title>

  <style>

  *{

  margin:0;

  padding:0;

  }

  body{

  background:#fff;

  color:#666;

  font:12px/18px Tahoma, Arial, Helvetica, sans-serif;

  }

  #menu{

  width:100%;

  margin:15px;

  }

  #menu ul{

  list-style:none;

  }

  #menu li{

  list-style:none;

  display:block;

  float:left;

  margin:0 2px;

  }

  #menu li a{

  display:block;

  float:left;

  height:66px;

  color:#fff;

  text-transform:uppercase;

  font-size:11px;

  font-weight:bold;

  background:url(images/menu_009_l.jpg) no-repeat left;

  line-height:66px;

  padding:0 0 0 9px;

  text-decoration:none;

  }

  #menu li a span{

  display:block;

  float:left;

  background:url(images/menu_009_r.jpg) no-repeat right;

  height:66px;

  color:#d2eeff;

  line-height:66px;

  padding:0 18px 0 8px;

  }

  #menu li a:hover{

  display:block;

  float:left;

  background:url(images/menu_009_h_l.jpg) no-repeat left;

  height:66px;

  }

  #menu li a:hover span{

  display:block;

  float:left;

  background:url(images/menu_009_h_r.jpg) no-repeat right;

  color:#fff;

  height:66px;

  }

  #menu li a.current{

  display:block;

  float:left;

  height:66px;

  color:#fff;

  text-transform:uppercase;

  font-size:11px;

  font-weight:bold;

  background:url(images/menu_009_h_l.jpg) no-repeat left;

  line-height:66px;

  padding:0 0 0 9px;

  text-decoration:none;

  }

  #menu li a.current span{

  display:block;

  float:left;

  background:url(images/menu_009_h_r.jpg) no-repeat right;

  height:66px;

  color:#fff;

  line-height:66px;

  padding:0 18px 0 8px;

  }

  

【纯css实现蓝色圆角效果水平导航菜单代码】相关文章:

1.CSS实现的中英文双语菜单效果代码

2.CSS实现自适应宽度的菜单按钮效果代码

3.CSS如何实现中英文双语菜单效果代码

4.DIV+CSS实现的绿色水平一级菜单代码

5.基于css3的属性transition制作菜单导航效果

6.css就能实现简单导航栏实例

7.纯CSS如何实现动画的天气图标

8.CSS+p实现悬浮效果的实例