search

博客列表 >1223 京东app首页

1223 京东app首页

一米互联
一米互联原创
2020年12月24日 16:43:48570浏览

HTML代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset='UTF-8'>
  5.     <title>header+nav</title>
  6.     <link rel="stylesheet" href="header.css">
  7.     <link rel="stylesheet" href="icon-font/iconfont.css">
  8. </head>
  9. <body>
  10.     <div class="header">
  11.         <div class="menu iconfont icon-menu"></div>
  12.         <div class="search">
  13.             <div class="logo">JD</div>
  14.             <div class="zoom iconfont icon-search"></div>
  15.             <input type="text" value="蓝牙耳机">
  16.         </div>
  17.         <a class="login">登录</a>
  18.     </div>
  19.     <div class="main">
  20.         <ul class="nav">
  21.             <li>
  22.                 <a href=""><img src="dh/nav-1.png" alt=""></a>
  23.                 <a href="">京东超市</a>
  24.             </li>
  25.             <li>
  26.                 <a href=""><img src="dh/nav-2.png" alt=""></a>
  27.                 <a href="">数码电器</a>
  28.             </li>
  29.             <li>
  30.                 <a href=""><img src="dh/nav-3.png" alt=""></a>
  31.                 <a href="">京东服饰</a>
  32.             </li>
  33.             <li>
  34.                 <a href=""><img src="dh/nav-4.png" alt=""></a>
  35.                 <a href="">京东生鲜</a>
  36.             </li>
  37.             <li>
  38.                 <a href=""><img src="dh/nav-5.png" alt=""></a>
  39.                 <a href="">京东到家</a>
  40.             </li>
  41.             <!-- 第二组 -->
  42.             <li>
  43.                 <a href=""><img src="dh/nav-6.png" alt=""></a>
  44.                 <a href="">充值缴费</a>
  45.             </li>
  46.             <li>
  47.                 <a href=""><img src="dh/nav-7.png" alt=""></a>
  48.                 <a href="">9.9元拼</a>
  49.             </li>
  50.             <li>
  51.                 <a href=""><img src="dh/nav-8.png" alt=""></a>
  52.                 <a href="">领券</a>
  53.             </li>
  54.             <li>
  55.                 <a href=""><img src="dh/nav-9.png" alt=""></a>
  56.                 <a href="">领金贴</a>
  57.             </li>
  58.             <li>
  59.                 <a href=""><img src="dh/nav-10.png" alt=""></a>
  60.                 <a href="">PLUS会员</a>
  61.             </li>
  62.         </ul>
  63.     </div>
  64. </body>
  65. </html>

CSS代码：

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6. :root{
  7.     font-size: 10px;
  8. }
  9. li{
  10.     list-style: none;
  11.     text-decoration: none;
  12. }
  13. body{
  14.     background: #f6f6f6;
  15. }
  16. .header{
  17.     background: #e43130;
  18.     color: white;
  19.     height: 4.4rem;
  20.     position: fixed;
  21.     top: 0;
  22.     left: 0;
  23.     right: 0;
  24.     z-index: 999;
  25. }
  26. .main{
  27.     position: absolute;
  28.     top: 4.4rem;
  29.     bottom: 4.4rem;
  30.     left: 0;
  31.     right: 0;
  32. }
  33. /* header */
  34. .header{
  35.     display: flex;
  36.     align-items: center;
  37. }
  38. .header .menu{
  39.     font-size: 2rem;
  40.     text-align:center;
  41.     color: white;
  42.     flex: 1;
  43. }
  44. .header .login{
  45.     font-size: 1.3rem;
  46.     flex: 1;
  47.     color: white;
  48.     text-align:center;
  49. }
  50. .header .search{
  51.     flex: 6;
  52.     padding: 0.5rem;
  53.     background: white;
  54.     border-radius: 3rem;
  55.     display: flex;
  56. }
  57. .header .search .logo{
  58.     color: #e43130;
  59.     flex: 0 1 4rem;
  60.     font-size: 2rem;
  61.     line-height: 2rem;
  62. }
  63. .header .search .zoom{
  64.     color: #d8d8d8;
  65.     flex: 0 1 4rem;
  66.     border-left: 1px solid #d8d8d8;
  67.     text-align:center;
  68.     line-height: 2rem;
  69. }
  70. .header .search input{
  71.     flex: auto;
  72.     border: 0;
  73.     outline: none;
  74. }
  75. /* nav */
  76. .main .nav {
  77.     padding: 1rem;
  78.     display: flex;
  79.     flex-flow: row wrap;
  80.     justify-content: space-between
  81. }
  82. .main .nav img {
  83.     height: 4rem;
  84.     width: 4rem;
  85. }
  86. .main .nav li {
  87.     /* 每一行显示5个,100%来分配,应该是20% */
  88.     flex: 1 1 20%;
  89.     display: flex;
  90.     flex-flow: column nowrap;
  91.     align-items: center;
  92. }
  93. .main .nav li a{
  94.     color: black;
  95.     text-decoration: none;
  96. }

效果：

上一条：Flex布局京东首页实例下一条：什么是flex布局，它的常用属性有哪些
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多