博主信息
博文 22
粉丝 0
评论 1
访问量 22705
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
常用导航布局案例(仿淘宝导航条)
刘静的博客
原创
789人浏览过

index.html代码如下:


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>01.常用导航布局案例(仿淘宝导航条)</title>
  6. <link rel="stylesheet" type="text/css" href="../css/index2.css">
  7. <link rel="stylesheet" type="text/css" href="../static/font-awesome/css/font-awesome.min.css">
  8. </head>
  9. <body>
  10. <div class="header">
  11. <div class="header_content">
  12. <div class="header_left">
  13. <a href="" class="header_a">中国大陆&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>
  14. <a href="" style="color:#FF5000;">亲,请登录</a>
  15. <a href="">免费注册</a>
  16. <a href="">手机逛淘宝</a>
  17. </div>
  18. <div class="header_right">
  19. <a href=" " class="header_a">我的淘宝&nbsp;&nbsp;<i class="fa fa-angle-down"></i>
  20. <ul>
  21. <li>已买到的宝贝</li>
  22. <li>我的足迹</li>
  23. </ul>
  24. </a>
  25. <a href=" "><span class="fa fa-cart-plus" style="color:#FF5000;"></span>&nbsp;&nbsp;购物车</a>
  26. <a href=" " class="header_a"><span class="fa fa-star"></span>&nbsp;&nbsp;收藏夹<i class="fa fa-angle-down"></i>
  27. <ul>
  28. <li>已买到的宝贝</li>
  29. <li>我的足迹</li>
  30. </ul>
  31. </a>
  32. <a href=" " class="header_a">商品分类</a>
  33. <a href=" ">千牛卖家中心&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>
  34. <a href=" " class="header_a">联系客服&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>
  35. <a href=" " class="header_a"><span class="fa fa-align-justify" style="color:#FF5000;"></span>网站导航&nbsp;<i class="fa fa-angle-down" style="color:#FF5000;"></i>
  36. <ul>
  37. <li>已买到的宝贝</li>
  38. <li>我的足迹</li>
  39. <li>我的足迹</li>
  40. <li>我的足迹</li>
  41. </ul>
  42. </a>
  43. </div>
  44. </div>
  45. <div class="clear"></div>
  46. </div>
  47. </body>
  48. </html>

index2.css代码如下:

  1. *{margin:0px;padding:0px;}
  2. a{text-decoration:none;color:#6c6c6c;font-size:13px;}
  3. li{list-style:none;}
  4. .clear{clear:both;}
  5. .header{width:100%;background-color:#F5F5F5;}
  6. .header_content{width:1200px;margin:0px auto;line-height:40px;}
  7. .header_left{height:40px;float:left;}
  8. .header_left a{margin-right:5px;}
  9. .header_content a:hover{color:#FF5000;}
  10. .header_right{height:40px;float:right;}
  11. .header_a{display:inline-block;height:40px;width:90px;text-align:center;position:relative;}
  12. .header_a:hover{background:#fff;}
  13. .header_a ul{border:1px solid #F5F5F5;display:none;border-top:none;}
  14. .header_a:hover ul{display:block;position:absolute;width:100px;}
  15. .header_a ul li:hover{background-color:#F5F5F5;}
  16. .header_a ul li{color:#6c6c6c;height:30px;line-height:30px;text-align:left;padding:0px 3px;margin:5px 0px;}
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学