CSS3代码练习
导航html结构部分
1 <body> 2 <ul class="nav"> 3 <li><a href="#">Home</a></li> 4 <li><a href="#">Home</a></li> 5 <li><a href="#">Home</a></li> 6 <li><a href="#">Home</a></li> 7 <li><a href="#">About</a></li> 8 </ul> 9 </body>
1 <style type="text/css">
2 body{
3 background:#ebebeb;
4 }
5 .nav{
6 width: 960px;
7 height: 50px;
8 font:bold 0/50px arial;
9 text-align: center;
10 margin:40px auto 0;
11 background: #f65f57;
12 border-radius: 10px; /*设置导航边框为圆角*/
13 box-shadow: 1px 6px 3px rgba(184,78,68,.5);
14 /*设置导航像x轴偏移1px y轴偏移6px 阴影模糊半径为3px 设置rgb颜色值以及半透明效果*/
15 }
16 .nav a{
17 display: inline-block; /*设置a标签为内联元素*/
18 -webkit-transition: all 0.2s ease-in;
19 -moz-transition: all 0.2s ease-in;
20 -o-transition: all 0.2s ease-in;
21 -ms-transition: all 0.2s ease-in;
22 transition: all 0.2s ease-in;
23 /*设置动画效果*/
24
25 }
26 .nav a:hover{
27 -webkit-transform: rotate(10deg);
28 -moz-transform: rotate(10deg);
29 -o-transform:rotate(10deg);
30 -ms-transform: rotate(10deg);
31 transform: rotate(10deg);
32 /*鼠标放上显示的动画效果*/
33 }
34 .nav li{
35 position: relative;
36 display: inline-block;
37 padding: 0 30px;
38 font-size: 15px;
39 text-shadow: 1px 2px 4px rgba(0,0,0,.5);
40 /*设置字体向x轴偏移1px y轴偏移6px 阴影模糊半径为3px 设置rgb颜色值以及半透明效果*/
41 list-style: none outside none;
42 }
43 .nav li:after{
44 content: "";
45 position: absolute;
46 top: 20px;
47 right: 0;
48 width: 1px;
49 height: 15px;
50 background: linear-gradient(to bottom,#f82f87,#b0363f,#f82f87); /*使用渐变与伪元素实现导航菜单的分隔符*/
51 }
52 .nav li:last-child:after{
53 width: 0;
54 height: 0;
55 }
56 .nav a,.nav a:hover{
57 color: #fff;
58 text-decoration: none;
59 }
60
61
62
63 </style>
最终显示效果
时间： 2024-12-30 02:16:14