flex布局仿京东移动端首页

效果图

html代码

a<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>仿京东首页</title>
    <link rel="stylesheet" href="static/css/index.css" />
    <link rel="stylesheet" href="static/css/header.css" />
    <link rel="stylesheet" href="static/css/slide.css" />
    <link rel="stylesheet" href="static/css/nav.css" />
    <link rel="stylesheet" href="static/css/haohuo.css" />
</head>
  <body>
    <header class="header">
      <div class="menu iconfont icon-caidan"></div>
      <div class="search">
        <div class="logo">JD</div>
        <div class="zoom iconfont icon-sousuo"></div>
        <input class="words" type="text" value="iphone12" /></div>
      </div>
      <div class="login">登录</div>
    </header>
    <div class="slide">
        <div class="img"><img src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/130573/4/17560/124669/5fc2626cE4d3682e1/df08fc1bf4c5ae08.jpg!cr_1125x445_0_171!q70.jpg.dpg"></div>
        <div class="focus-slide">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <main class="main">
      <ul class="nav">
        <!-- 第一组 -->
        <li>
          <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png" /></a>
            <span>京东超市</span>
        </li>
        <li>
          <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png" /></a>
          <span>数码电器</span>
        </li>
        <li>
          <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/140012/8/1804/3641/5efbf318E38bd5dad/0db99d859ab16ce9.png" /></a>
          <span>京东服饰</span>
        </li>
        <li>
          <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/129215/21/5978/3618/5efbf344Ebec23ae8/59712d986b10bb0a.png" /></a>
          <span>京东生鲜</span>
        </li>
        <li>
          <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/116602/7/11200/3796/5efbf375Ebba41029/f07cc166f368fa05.png" /></a>
          <span>京东到家</span>
        </li>
        <li>
          <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/146390/3/1846/4909/5efbf39aEe5f5f797/300071558a9ab078.png" /></a>
          <span>充值缴费</span>
        </li>
        <li>
          <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/143365/25/1824/3716/5efbf3c0E5175e1fb/88f6227257a29f1d.png" /></a>
          <span>9.9元拼</span>
        </li>
        <li>
          <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/113589/24/11332/4897/5efbf3feE705d87db/e5c12d5e943266b9.png" /></a>
          <span>领券</span>
        </li>
        <li>
          <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/129184/28/5977/3711/5efbf53aE2c2e6a07/7db529ce0e00838f.png" /></a>
          <span>借钱</span>
        </li>
        <li>
          <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/123730/37/5924/4189/5efbf567E0a226121/d04df7c74c87cf68.png" /></a>
          <span>Plus会员</span>
        </li>
      </ul>
      <div class="haohuo">
        <div class="title">
          <a href="#"><h3>来电好货</h3></a>
          <a href="#"><h3>国潮风尚</h3></a>
        </div>
        <ul>
          <li><a href=""><span>正品直邮</span><img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/122304/6/4867/26484/5ee73aa3E8a601402/04d440839b734589.png!q70.jpg.dpg"></a></li>
          <li><a href=""><span>3C大放价</span><img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/146350/29/713/33082/5ee73d9fE1ae995ad/0ec365679efbf615.png!q70.jpg.dpg"></a></li>
          <li><a href=""><span>国货正当时</span><img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/121172/17/1584/29106/5ebd1637Ec4c82232/aa56520b3ab276be.png!q70.jpg.dpg"></a></li>
          <li><a href=""><span>都是你爱的</span><img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/141856/19/761/28886/5ee73fa2E4401ba28/9386324f55097e7b.jpg!q70.jpg.dpg"></a></li>
        </ul>
      </div>
      <div class="ms">
        <div class="ms-head">
          <div class="ms-top">
            <div class="jdms">京东秒杀</div>
            <div class="notice">
              <div class="tips">22点场</div>
              <div class="time">01:11:22</div>
            </div>
          </div>
          <div class="right">更多秒杀</div>
        </div>
        <div class="ms-body">
          <ul class="ms-list">
            <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
            <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
            <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
            <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
            <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
            <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
            <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
            <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
            <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
            <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
          </ul>
        </div>
    </div>
    <div class="love">
      <img src="http://img12.360buyimg.com/img/s750x70_jfs/t1/148857/1/16777/13220/5fc9f9d0E734c0ee5/88c99cdbe410e58a.png" alt="">
      <ul class="love-list">
        <li>
          <a href="">
            <img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt="">
            <span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span>
            <div class="price"><span>¥599</span><span>看相似</span></div></a></li>
        <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
        <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
        <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
        <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
        <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
        <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
        <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
        <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
        <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
        <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
        <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
        <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
        <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
        </ul>
    </div>
    </main>
    <footer class="footer">
      <ul>
        <li><a href=""><img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/81741/30/12345/4140/5d9c4b13E726f0a1e/82c582e7c375e4b3.png"></a></li>
        <li><a href=""><img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56507/6/12787/3168/5d9c4b12Ef363dd8d/4af32f42575509d8.png"></a></li>
        <li><a href=""><img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/70651/38/12417/3194/5d9d3eafE12cde68b/2467c20113c50451.png"></a></li>
        <li><a href=""><img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/64954/4/12406/3529/5d9c4b12Ee7a82735/f2fe0a88bf344736.png"></a></li>
        <li><a href=""><img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/68400/36/12368/3153/5d9c4b13E0e0d80a8/876c40f17d91ce44.png"></a></li>
      </ul>
    </footer>
  </body>
</html>

CSS代码

reset

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  font-size: 10px;
}
li {
  list-style: none;
}
a {
  color: #7b7b7b;
  text-decoration: none;
}
body {
  background-color: antiquewhite;
  font-size: 10px;
}
/* @media screen and (min-width: 440px) {
  html {
    font-size: 10px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 12px;
  }
}
@media screen and (min-width: 640px) {
  html {
    font-size: 14px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 16px;
  }
} */

header

@import url(https://at.alicdn.com/t/font_2289194_lcufc1dn8s.css);
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header .menu {
  color: #fff;
  text-align: center;
  font-size: 2.4rem;
  margin: 0 1rem;
}
.header .login {
  color: #fff;
  margin: 0 1.5rem;
}
.header .search {
  flex: auto;
  text-align: center;
  padding: 0.5rem;
  background-color: white;
  border-radius: 3rem;
  display: flex;
}
.header .search .logo {
  color: #e43130;
  flex: 0 1 4rem;
  font-size: 1.6rem;
  text-align: center;
  line-height: 2rem;
}
/* 放大镜 */
.header .search .zoom {
  color: #ccc;
  flex: 0 1 4rem;
  border-left: 1px solid;
  text-align: center;
  line-height: 2rem;
}
.header .search .words {
  flex: auto;
  border: none;
  outline: none;
  color: #aaa;
}

haohuo

.haohuo {
  background-color: #fff;
  /*border:solid 1px red;*/
  margin: 1rem;
  min-width: 400px;
}
.haohuo .title {
  display: flex;
  justify-content: center;
}
.haohuo .title a {
  margin: 1rem;
}
.haohuo .title a h3 {
  color: black;
}
.haohuo ul {
  display: flex;
  justify-content: space-evenly;
  padding-bottom: 1rem;
}
.haohuo ul li a {
  /*border: 1px red solid;*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  color: rgb(31, 29, 29);
}
.haohuo ul a img {
  width: 8rem;
}

nav

.main .nav {
  /* background-color: rgb(255, 255, 255); */
  padding: 1rem;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}
.main .nav img {
  height: 4rem;
  width: 4rem;
}
.main .nav li {
  /* 第一行显示5个，每个分配20% */
  flex: 1 1 20%;
  display: flex;
  padding: 1rem;
  flex-flow: column nowrap;
  align-items: center;
}

ms

.main .ms {
  background-color: #fff;
  padding: 1rem;
  margin: 1rem 0;
}
.main .ms .ms-top {
  font-size: 1.3rem;
  height: 3rem;
}

index

@import "reset.css";
.header {
  background-color: #c31130;
  color: white;
  height: 4.4rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 1.4rem;
  min-width: 400px;
}
.footer {
  color: #666;
  background-color: #fafafa;
  color: white;
  height: 5rem;
  box-shadow: 0 0 3px #999;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 1.4rem;
  min-width: 400px;
}
.slide {
  /* position: relative; */
  margin-top: 3.2rem;
  min-width: 400px;
}
.main {
  /* position: absolute; */
  margin-top: 1.8rem;
  /* bottom: 4.4rem; */
  min-width: 400px;
  left: 0;
  right: 0;
  height: 100rem;
  font-size: 1.4rem;
}
.ms {
  margin: 1rem;
  border-radius: 10px;
  background-color: white;
  display: flex;
  flex-flow: column nowrap;
}
.ms .ms-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ms > .ms-head > .ms-top {
  background: url(../images/index.png) no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms > .ms-head > .ms-top > .jdms {
  font-size: 1.8rem;
  margin: 0.7rem 1.5rem;
}
.ms > .ms-head > .ms-top > .notice {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px red solid;
  border-radius: 10px;
  height: 2.2rem;
}
.ms > .ms-head > .ms-top > .notice > .tips {
  background-color: red;
  border: 1px red solid;
  border-radius: 10px;
  padding: 0 0.5rem;
  color: white;
}
.ms > .ms-head > .ms-top > .notice > .time {
  padding: 0 1rem;
}
.ms > .ms-head .right {
  padding-right: 2rem;
  font-size: 1.6rem;
  color: red;
}
.ms > .ms-body > .ms-list {
  padding: 1rem 0;
  display: flex;
  flex-flow: row nowrap;
  overflow: auto;
}
.ms > .ms-body > .ms-list li a {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.ms > .ms-body > .ms-list li a span {
  font-size: 2rem;
}
.ms > .ms-body > .ms-list li a .yj {
  /* color: red; */
  text-decoration: line-through;
}
.ms > .ms-body > .ms-list li a .xj {
  color: red;
}
.love img {
  width: 100%;
  text-align: center;
}
.love > .love-list {
  display: flex;
  flex-flow: row wrap;
  margin: 0 1rem;
}
.love > .love-list li {
  border-radius: 20px;
  background-color: white;
  max-width: 400px;
  flex: 1 1 48%;
  margin: 1rem 0.5rem;
  padding: 0 0 1.5rem 0;
}
.love > .love-list li a {
  display: flex;
  flex-flow: column nowrap;
}
.love > .love-list li a img {
  border-radius: 20px;
  max-width: 400px;
}
.love > .love-list li a .price {
  display: flex;
  justify-content: space-between;
}
.love > .love-list li a .price span:first-of-type {
  padding-left: 1rem;
  color: red;
  font-size: 2rem;
}
.love > .love-list li a .title {
  padding: 1rem;
}
.love > .love-list li a .price span:last-of-type {
  background-color: #ccc;
  color: white;
  font-size: 1.5rem;
  border-start-start-radius: 10px;
  border-end-start-radius: 010px;
}
.footer ul {
  display: flex;
  justify-content: space-evenly;
}
.footer ul li {
  align-items: flex-end;
}
.footer ul li a img {
  width: 6rem;
}

slide

.slide .img img {
  width: 100%;
}
.slide > .focus-slide {
  display: flex;
  margin-top: -3rem;
  justify-content: center;
}
.slide > .focus-slide span {
  background-color: rgb(255, 255, 255);
  width: 1rem;
  height: 1rem;
  /* border: red solid 1px; */
  border-radius: 3rem;
  margin: 0 1rem;
}

效果图

html代码

CSS代码

reset

header

haohuo

nav

ms

index

slide

相关文章