Question to say "I can!"

今天快3走势图:用CSS 3制作的漂亮导航

2011-07-15

Demo

image

看起来不错吧,全部都是使用css实现的。

在firefox和chrome能得到最佳效果,CSS 3中的圆角和渐变不被IE支持。

HTML

??????? <div? id="nav">
??????????? <ul>
??????????????? <li><a href="#"><span>Home</span></a></li>
??????????????? <li><a href="#"><span>Categories</span></a></li>
??????????????? <li><a href="#"><span>About</span></a></li>
??????????????? <li><a href="#"><span>Portfolio</span></a></li>
??????????????? <li><a href="#"><span>Contact</span></a></li>
??????????? </ul>
??????? </div>

?

CSS

#nav ul{

??????? padding: 0;

??????? margin: 0;

??????? list-style: none;}

#nav li{ float: left;}

????????
#nav a{

??? float: left;

??? color: #eee;

??? margin: 0 5px;

??? padding: 3px;

??? text-decoration: none;

??? border: 1px solid #831608;

??? font: bold 14px Arial, Helvetica;

??? background-color: #831608;

??? background-image: -moz-linear-gradient(#bb413b, #831608);

??? background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));

??? background-image: -webkit-linear-gradient(#bb413b, #831608);

??? background-image: -o-linear-gradient(#bb413b, #831608);

??? background-image: -ms-linear-gradient(#bb413b, #831608);

??? background-image: linear-gradient(#bb413b, #831608);

??? -moz-border-radius: 5px;

??? -webkit-border-radius: 5px;

??? border-radius: 5px;

??? text-shadow: 0 -1px 0 rgba(0,0,0,.8);

??? -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

??? -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

??? box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

}

#nav a:hover{

??? background-color: #bb413b;

??? background-image: -moz-linear-gradient(#831608, #bb413b);

??? background-image: -webkit-gradient(linear, left top, left bottom, from(#831608), to(#bb413b));

??? background-image: -webkit-linear-gradient(#831608, #bb413b);

??? background-image: -o-linear-gradient(#831608, #bb413b);

??? background-image: -ms-linear-gradient(#831608, #bb413b);

??? background-image: linear-gradient(#831608, #bb413b);

}

#nav a:active{

??? background: #bb413b;

??? position: relative;

??? top: 2px;

??? -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;

??? -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;

??? box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;

}

#nav span{

??? border: 1px dashed #eba1a3;

??? display: inline-block;

??? padding: 4px 15px;

??? cursor: pointer;

??? background-color: #bb413b;

??? background-image: -moz-linear-gradient(#d4463c, #aa2618);

??? background-image: -webkit-gradient(linear, left top, left bottom, from(#d4463c), to(#aa2618));

??? background-image: -webkit-linear-gradient(#d4463c, #aa2618);

??? background-image: -o-linear-gradient(#d4463c, #aa2618);

??? background-image: -ms-linear-gradient(#d4463c, #aa2618);

??? background-image: linear-gradient(#d4463c, #aa2618);

}

#nav a:hover span{

??? background-color: #bb413b;

??? background-image: -moz-linear-gradient(#aa2618, #d4463c);

??? background-image: -webkit-gradient(linear, left top, left bottom, from(#aa2618), to(#d4463c));

??? background-image: -webkit-linear-gradient(#aa2618, #d4463c);

??? background-image: -o-linear-gradient(#aa2618, #d4463c);

??? background-image: -ms-linear-gradient(#aa2618, #d4463c);

??? background-image: linear-gradient(#aa2618, #d4463c);

}

VIA: Sexy CSS3 menu

原文:用CSS 3制作的漂亮导航
作者:admin | Categories:设计问题 | Tags: 、、

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

  • 男人不安全了?日本读心美女机器人,你咋想的它全知道! 2019-05-03
  • 重庆市永川区:“1+8+X”模式探索基层人民调解新路子 2019-05-03
  • 春节我在岗:爸妈,儿子在军营给您们拜年了 2019-04-22
  • 传统文化,在中国文化里,居住是衡量一个家庭生活的基本因素。 2019-04-15
  • 俄韩就铺设途经朝鲜的天然气管道恢复磋商 2019-04-15
  • 经营者要想“我心换你心”,就要未雨绸缪,让不诚信的诱惑少一点,如此才能在市场中生存下来。反过来说,承担不起亏损就关门歇业,是否也是一种不诚信呢? 2019-04-11
  • 江西省能源集团公司党委副书记胡运生等2人被调查 2019-04-11
  • 乌鲁木齐:这个端午,他们的假日叫“坚守” 2019-03-29
  • 中国电信安康分公司60家智慧家庭便民服务中心盛大开业中国电信安康-最新活动 2019-03-28
  • 中心城区核心片组完成签约清零任务 2019-03-28
  • (Dos sesiones) Legislativo nacional de China concluye sesión anual Spanish.xinhuanet.com 2019-03-28
  • 西班牙一旅游公司官网竟把台湾和香港列为“国家” 2019-03-27
  • 【一周反腐】广东、重庆等地多名厅级干部被查处 2019-03-27
  • 任志强:房价走势并不是不可预测市场 开炮 2019-03-26
  • 世界醉美10条街道,亚洲只有中国上榜! 2019-03-23
  • 202| 383| 448| 785| 263| 870| 435| 797| 104| 221|