5-5 CSS3背景 制作导航菜单综合练习题
本节编程练习不计算学习进度，请电脑登录imooc.com操作

CSS3背景 制作导航菜单综合练习题

小伙伴们，根据所学知识，使用CSS3实现下图的导航菜单效果

任务

1、制作导航圆角

提示：使用border-radius实现圆角

2、制作导航立体风格

提示：使用box-shadow实现立体风格

3、制作导航分隔线

提示：使用渐变与伪元素制作

4、删除第一个和最后一个导航分隔线

提示：使用伪元素删除第一个和最后一个分隔线
index.html 
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. 	<title>CSS制作立体导航</title>
  6. 	<link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">
  7. 	<style>
  8. 		body{
  9. 		  background: #ebebeb;
  10. 		}
  11. 		.nav{
  12. 		  width:560px;
  13. 		  height: 50px;
  14. 		  font:bold 0/50px Arial;
  15. 		  text-align:center;
  16. 		  margin:40px auto 0;
  17. 	      background: #f65f57;
  18. 		  /*制作圆*/
  19.  
  20.           /*制作导航立体风格*/
  21.  
  22. 		}
  23. 		.nav a{
  24. 		  display: inline-block;
  25. 		  -webkit-transition: all 0.2s ease-in;
  26. 		  -moz-transition: all 0.2s ease-in;
  27. 		  -o-transition: all 0.2s ease-in;
  28. 		  -ms-transition: all 0.2s ease-in;
  29. 		  transition: all 0.2s ease-in;
  30. 		}
  31. 		.nav a:hover{
  32. 		  -webkit-transform:rotate(10deg);
  33. 		  -moz-transform:rotate(10deg);
  34. 		  -o-transform:rotate(10deg);
  35. 		  -ms-transform:rotate(10deg);
  36. 		  transform:rotate(10deg);
  37. 		}
  38.  
  39. 		.nav li{
  40. 		  position:relative;
  41. 		  display:inline-block;
  42. 		  padding:0 16px;
  43. 		  font-size: 13px;
  44. 		  text-shadow:1px 2px 4px rgba(0,0,0,.5);
  45. 		  list-style: none outside none;
  46. 		}
  47. 		/*使用伪元素制作导航列表项分隔线*/
  48.  
  49.         /*删除第一项和最后一项导航分隔线*/
  50.  
  51. 		.nav a,
  52. 		.nav a:hover{
  53. 		  color:#fff;
  54. 		  text-decoration: none;
  55. 		}
  56.  
  57. 	</style>
  58. </head>
  59. <body>
  60. 	<ul class="nav">
  61.     	<li><a href="">Home</a></li>
  62.     	<li><a href="">About Me</a></li>
  63.     	<li><a href="">Portfolio</a></li>
  64.     	<li><a href="">Blog</a></li>
  65.     	<li><a href="">Resources</a></li>
  66.     	<li><a href="">Contact Me</a></li>
  67. 	</ul>
  68. </body>
  69. </html>
下一节