仿京东APP页眉,导航

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>仿京东首页</title>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <link rel="stylesheet" href="css/index.css">
  9. <link rel="stylesheet" href="icon-font/iconfont.css">
  10. </head>
  11. <body>
  12. <div class="header">
  13. <div class="mun iconfont icon-menu"></div>
  14. <div class="srech">
  15. <div class="jd">JD</div>
  16. <div class="fd iconfont icon-search"></div>
  17. <input class="word" type="text" value="美的电压力锅">
  18. </div>
  19. <div class="login">登录</div>
  20. </div>
  21. <div class="main">
  22. <ul class="nav">
  23. <li>
  24. <a href=""><img src="images/dh/nav-1.png" alt=""></a>
  25. <a href="">京东超市</a>
  26. </li>
  27. <li>
  28. <a href=""><img src="images/dh/nav-2.png" alt=""></a>
  29. <a href="">数码电器</a>
  30. </li>
  31. <li>
  32. <a href=""><img src="images/dh/nav-3.png" alt=""></a>
  33. <a href="">京东服饰</a>
  34. </li>
  35. <li>
  36. <a href=""><img src="images/dh/nav-4.png" alt=""></a>
  37. <a href="">京东生鲜</a>
  38. </li>
  39. <li>
  40. <a href=""><img src="images/dh/nav-5.png" alt=""></a>
  41. <a href="">京东到家</a>
  42. </li>
  43. <li>
  44. <a href=""><img src="images/dh/nav-6.png" alt=""></a>
  45. <a href="">充值话费</a>
  46. </li>
  47. <li>
  48. <a href=""><img src="images/dh/nav-7.png" alt=""></a>
  49. <a href="">9.9元拼</a>
  50. </li>
  51. <li>
  52. <a href=""><img src="images/dh/nav-8.png" alt=""></a>
  53. <a href="">领券</a>
  54. </li>
  55. <li>
  56. <a href=""><img src="images/dh/nav-9.png" alt=""></a>
  57. <a href="">借钱</a>
  58. </li>
  59. <li>
  60. <a href=""><img src="images/dh/nav-10.png" alt=""></a>
  61. <a href="">PLUS会员</a>
  62. </li>
  63. </ul>
  64. </div>
  65. <div class="footer">底部</div>
  66. </body>
  67. </html>
  1. /* 初始化 */
  2. *{
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. color: #FFF;
  7. }
  8. a{
  9. text-decoration: none;
  10. }
  11. ul,li {
  12. list-style:none;
  13. }
  14. html{
  15. font-size: 10px;
  16. }
  17. /* 头部 */
  18. .header{
  19. display: flex;
  20. position: fixed;
  21. top: 0;
  22. left: 0;
  23. right: 0;
  24. background-color:#E43130;
  25. z-index: 100;
  26. align-items: center;
  27. height: 4.4rem;
  28. }
  29. .header .mun{
  30. flex: 1;
  31. text-align: center;
  32. /* border: 1px solid; */
  33. font-size: 2rem;
  34. }
  35. .header .srech{
  36. flex: 6;
  37. border: 1px solid;
  38. padding: 0.5rem;
  39. border-radius: 3rem;
  40. background-color: #fff;
  41. display: flex;
  42. }
  43. .header .srech .jd{
  44. color: lightcoral;
  45. font-size: 2rem;
  46. flex: 0 1 4rem;
  47. text-align: center;
  48. line-height: 2rem;
  49. }
  50. .header .srech .fd{
  51. color: #cfcbcb;
  52. /* font-size: 2rem; */
  53. border-left: 1px solid;
  54. text-align:center;
  55. line-height: 2rem;
  56. padding: 0 1rem 0 1rem;
  57. }
  58. .header .login{
  59. flex: 1;
  60. font-size: 1.4rem;
  61. /* border: 1px solid; */
  62. text-align: center;
  63. }
  64. .header .srech .word{
  65. flex: auto;
  66. border: none;
  67. outline: none;
  68. color: #cfcbcb;
  69. }
  70. .main{
  71. position: absolute;
  72. top: 4.4rem;
  73. bottom: 4.4rem;
  74. left: 0;
  75. right: 0;
  76. /* background-color: burlywood; */
  77. }
  78. .main .nav a{
  79. color: #000;
  80. }
  81. .main .nav{
  82. display: flex;
  83. flex-flow: row wrap;
  84. justify-content: space-between;
  85. }
  86. .main .nav li{
  87. flex: 1 1 20%;
  88. display: flex;
  89. flex-flow: column nowrap;
  90. /* border: 1px solid red; */
  91. align-items: center;
  92. padding: 1rem;
  93. }
  94. .main .nav img{
  95. width: 4rem;
  96. height: 4rem;
  97. }
  98. .footer{
  99. display: flex;
  100. position: fixed;
  101. bottom: 0;
  102. left: 0;
  103. right: 0;
  104. background-color:#ffffff;
  105. z-index: 100;
  106. box-shadow: 0 0 3px #999;
  107. height: 4.4rem;
  108. }

效果