网页设计 百文网手机站

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

时间:2021-04-14 15:31:47 网页设计 我要投稿

纯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实现蓝色圆角效果水平导航菜单代码】相关文章:

java实现gif动画效果代码参考11-25

用DW MX制作导航下拉菜单09-10

Java 队列实现原理及简单实现代码12-02

java利用反射实现动态代理实现代码11-28

如何在java中实现左右键菜单10-05

java构造函数实现代码示例11-28

c#实现轮询算法实例代码09-23

PHP实现大文件上传源代码08-29

使用python实现Linux异步epoll的代码08-04

冒泡排序的原理以及java代码实现12-02