设为首页收藏本站
开启辅助访问
搜索
快捷导航
论坛 › 学院 › 平面设计学院 › 试着高仿了一个唯品会的导航条
发新帖
返回列表
0 449
电梯直达  跳转到指定楼层

[作业] 试着高仿了一个唯品会的导航条

感官|中级会员 |勤币 384 |学币 0
发表于 2017-3-8 17:45 | 复制链接 | 打印 | 上一主题 | 下一主题
淘宝店铺装修完全自学教程 - 5.7.使用浮动做导航条和伪类选择器
  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>
复制代码



本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
举报 使用道具
| 回复

共0个回复 最后回复于 2017-3-8 17:45

发新帖
返回列表
B Color Image Link Quote Code Smilies
高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表