论坛

标题: 试着高仿了一个唯品会的导航条 [打印本页]
作者: 感官    时间: 2017-3-8 17:45
标题: 试着高仿了一个唯品会的导航条
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
  5. <title>临时实验</title>
  6. <style type="text/css">
  7. *{
  8.         margin:0;
  9.         padding:0;
  10. }
  11. ul{
  12.         list-style-type:none;
  13. }
  14. div.nav{
  15.         width:100%;
  16.         height:40px;
  17.         background:#f10081 url(捕获.PNG) no-repeat 85% center;
  18.         margin-top:130px;
  19. }
  20. div.nav ul{
  21.         width:1000px;
  22.         margin:0 auto;
  23. }
  24. div.nav ul li{
  25.         float:left;
  26. }
  27. div.nav ul li a{
  28.         padding:0 15px;
  29.         height:40px;
  30.         line-height:40px;
  31.         text-decoration:none;
  32.         color:#fff;
  33.         display:block;
  34.         font-size:15px;
  35.         font-weight:bold;
  36.         font-family:幼圆;
  37. }
  38. div.nav ul li a:hover{
  39.         background:#bd1067;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44.         <div class="nav">
  45.                 <ul>
  46.                         <li><a href="#" style="background:#bd1067">3.8春换新</a></li>
  47.                         <li><a href="#">唯品国际</a></li>
  48.                         <li><a href="#">母婴</a></li>
  49.                         <li><a href="#">家居家电</a></li>
  50.                         <li><a href="#">男士</a></li>
  51.                         <li><a href="#">美妆</a></li>
  52.                         <li><a href="#">生活</a></li>
  53.                         <li><a href="#">金融</a></li>
  54.                         <li><a href="#">更多</a></li>
  55.                 </ul>
  56.         </div>
  57. </body>
  58. </html>
复制代码







欢迎光临 论坛 (http://bbs.qinxue.com/) Powered by Discuz! X3.1