Blogger Information

Blog 8

fans 1

comment 0

visits 6634

Special Recommendation

More>

Related recommendations

仿京东移动端首页

效果图示：

html代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/img/font_icon/iconfont.css" />
    <link rel="stylesheet" href="/css/index.css" />
    <title>多快好省就上京东购物</title>
  </head>
  <body>
    <!-- 页眉 -->
    <div class="head">
      <!-- 顶部左侧图标按钮 -->
      <div class="caidan iconfont icon-gengduo"></div>
      <!-- 中部搜索 -->
      <div class="sousuo">
        <!-- 文字LOGOJD -->
        <p>JD</p>
        <!-- 搜索图标 -->
        <div class="sousuotubiao iconfont icon-sousuo"></div>
        <!-- 搜索输入框 -->
        <input
          type="text"
          name="sousuo"
          id="sousuo"
          placeholder="输入想要购买的商品"
        />
      </div>
      <!-- 顶部右侧登录 -->
      <div class="login"><span>登录</span></div>
    </div>
    <!-- 主体 -->
    <div class="main">
      <!-- banner -->
      <div class="banner"><img src="/img/banner.png" alt="" /></div>
      <!-- 主体菜单 -->
      <div class="maincd">
        <a href=""
          ><img src="/img/jdicon/1.png" alt="" /><span>京东超市</span></a
        >
        <a href=""
          ><img src="/img/jdicon/2.png" alt="" /><span>数码电器</span></a
        >
        <a href=""
          ><img src="/img/jdicon/3.png" alt="" /><span>京东服饰</span></a
        ><a href=""
          ><img src="/img/jdicon/4.png" alt="" /><span>京东生鲜</span></a
        >
        <a href=""
          ><img src="/img/jdicon/5.png" alt="" /><span>京东到家</span></a
        >
        <a href=""
          ><img src="/img/jdicon/1.png" alt="" /><span>充值缴费</span></a
        ><a href=""
          ><img src="/img/jdicon/2.png" alt="" /><span>9.9元拼</span></a
        >
        <a href=""><img src="/img/jdicon/4.png" alt="" /><span>领券</span></a>
        <a href=""><img src="/img/jdicon/3.png" alt="" /><span>领津贴</span></a
        ><a href=""
          ><img src="/img/jdicon/2.png" alt="" /><span>PLUS会员</span></a
        >
      </div>
      <!-- 秒杀 -->
      <div class="miaosha">
        <div class="miaoshatop">
          <a href="">
            <div><p>京东秒杀</p></div>
            <div>14点场</div>
            <div>
              <div>00</div>
              <span>:</span>
              <div>13</div>
              <span>:</span>
              <div>22</div>
            </div>
          </a>
          <a href="">更多秒杀</a>
        </div>
        <div class="miaoshamain">
          <ur class="miaoshaul">
            <li class="miaoshali">
              <div><img src="/img/jdicon/1.jpg" alt="" /></div>
              <div>
                <span><em>￥</em> 11</span
                ><span
                  ><em>￥</em> 22
                  <hr
                /></span>
              </div>
            </li>
            <li class="miaoshali">
              <div><img src="/img/jdicon/1.jpg" alt="" /></div>
              <div>
                <span><em>￥</em> 33</span
                ><span
                  ><em>￥</em> 44
                  <hr
                /></span>
              </div>
            </li>
            <li class="miaoshali">
              <div><img src="/img/jdicon/1.jpg" alt="" /></div>
              <div>
                <span><em>￥</em> 55</span
                ><span
                  ><em>￥</em> 66
                  <hr
                /></span>
              </div>
            </li>
            <li class="miaoshali">
              <div><img src="/img/jdicon/1.jpg" alt="" /></div>
              <div>
                <span><em>￥</em> 77</span
                ><span
                  ><em>￥</em> 88
                  <hr
                /></span>
              </div>
            </li>
            <li class="miaoshali">
              <div><img src="/img/jdicon/1.jpg" alt="" /></div>
              <div>
                <span> <em>￥</em> 99</span
                ><span
                  ><em>￥</em> 110
                  <hr
                /></span>
              </div>
            </li>
            <li class="miaoshali">
              <div><img src="/img/jdicon/1.jpg" alt="" /></div>
              <div>
                <span><em>￥</em> 120</span
                ><span
                  ><em>￥</em> 130
                  <hr
                /></span>
              </div>
            </li>
          </ur>
        </div>
      </div>
      <!-- 商品区 -->
      <div class="sp">
        <ul class="spul">
          <li class="spli">
            <div class="spimg">
              <img src="/img/jdicon/2.jpg" alt="" />
            </div>
            <div class="sptext">
              BOTTLED
              JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
            </div>
            <div class="splook">
              <a href="" class="spjg">￥159</a>
              <a href="" class="spxs">看相似</a>
            </div>
          </li>
          <li class="spli">
            <div class="spimg">
              <img src="/img/jdicon/2.jpg" alt="" />
            </div>
            <div class="sptext">
              BOTTLED
              JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
            </div>
            <div class="splook">
              <a href="" class="spjg">￥159</a>
              <a href="" class="spxs">看相似</a>
            </div>
          </li>
          <li class="spli">
            <div class="spimg">
              <img src="/img/jdicon/2.jpg" alt="" />
            </div>
            <div class="sptext">
              BOTTLED
              JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
            </div>
            <div class="splook">
              <a href="" class="spjg">￥159</a>
              <a href="" class="spxs">看相似</a>
            </div>
          </li>
          <li class="spli">
            <div class="spimg">
              <img src="/img/jdicon/2.jpg" alt="" />
            </div>
            <div class="sptext">
              BOTTLED
              JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
            </div>
            <div class="splook">
              <a href="" class="spjg">￥159</a>
              <a href="" class="spxs">看相似</a>
            </div>
          </li>
          <li class="spli">
            <div class="spimg">
              <img src="/img/jdicon/2.jpg" alt="" />
            </div>
            <div class="sptext">
              BOTTLED
              JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
            </div>
            <div class="splook">
              <a href="" class="spjg">￥159</a>
              <a href="" class="spxs">看相似</a>
            </div>
          </li>
          <li class="spli">
            <div class="spimg">
              <img src="/img/jdicon/2.jpg" alt="" />
            </div>
            <div class="sptext">
              BOTTLED
              JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
            </div>
            <div class="splook">
              <a href="" class="spjg">￥159</a>
              <a href="" class="spxs">看相似</a>
            </div>
          </li>
          <li class="spli">
            <div class="spimg">
              <img src="/img/jdicon/2.jpg" alt="" />
            </div>
            <div class="sptext">
              BOTTLED
              JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
            </div>
            <div class="splook">
              <a href="" class="spjg">￥159</a>
              <a href="" class="spxs">看相似</a>
            </div>
          </li>
          <li class="spli">
            <div class="spimg">
              <img src="/img/jdicon/2.jpg" alt="" />
            </div>
            <div class="sptext">
              BOTTLED
              JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
            </div>
            <div class="splook">
              <a href="" class="spjg">￥159</a>
              <a href="" class="spxs">看相似</a>
            </div>
          </li>
          <li class="spli">
            <div class="spimg">
              <img src="/img/jdicon/2.jpg" alt="" />
            </div>
            <div class="sptext">
              BOTTLED
              JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
            </div>
            <div class="splook">
              <a href="" class="spjg">￥159</a>
              <a href="" class="spxs">看相似</a>
            </div>
          </li>
          <li class="spli">
            <div class="spimg">
              <img src="/img/jdicon/2.jpg" alt="" />
            </div>
            <div class="sptext">
              BOTTLED
              JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
            </div>
            <div class="splook">
              <a href="" class="spjg">￥159</a>
              <a href="" class="spxs">看相似</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
      <ur>
        <li class="iconfont icon-jingdong">
          <span>首页</span>
        </li>
        <li class="iconfont icon-sort"><span>分类</span></li>
        <li class="iconfont icon-niu"><span>京喜</span></li>
        <li class="iconfont icon-gwc"><span>购物车</span></li>
        <li class="iconfont icon-denglu"><span>未登录</span></li>
      </ur>
    </div>
  </body>
</html>

`index.css`代码：

@import url(/css/head.css);
@import url(/css/footer.css);
@import url(/css/main.css);
*{
    padding: 0;margin: 0;box-sizing: border-box;
}
:root{
    font-size: 10px;
}
body{
    font-size: 1.6rem;
}

`head.css`代码：

.head {
  background-color: #c82519;
  height: 4.5rem;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  z-index: 9;
}
.head .caidan {
  font-size: 2rem;
  text-align: center;
  flex: 1;
  position: relative;
  top: 1rem;
}
.head .sousuo {
  flex: 6;
  display: flex;
  background-color: white;
  color: #c82519;
  font-size: 2rem;
  justify-content: space-evenly;
  border-radius: 2.5rem;
  height: 3rem;
  position: relative;
  top: 0.8rem;
  align-items: center;
}
.head .sousuo > p {
  font-weight: bolder;
  color: #e93b3d;
}
.head .sousuo .sousuotubiao {
  font-size: 2rem;
  color: #dbdbdb;
  border-left: 1px solid #dddddd;
  padding-left: 1rem;
}
.head .sousuo > input {
  border: none;
  outline: medium;
}
.head .login {
  font-size: 1.5rem;
  text-align: center;
  flex: 1;
  position: relative;
  top: 1rem;
}

`footer.css`代码：

li{
    list-style: none;
}
.footer{
    height: 5rem;
    background-color: #FFFFFF;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    box-shadow: 0 0 5px #E2DFDF;
    z-index: 1;
}
.footer ur{
    display: flex;
    justify-content:space-around;
    position:relative;
    top: 1rem;
}
.footer ur li{
    flex-direction: column;
    display: flex;
    align-items: center;
    font-size: 2rem;
    color: #8B8B8B;
    position:relative;
    bottom: 1rem;
    padding-top: 6px;
}
.footer ur li:hover{
    color: red;
}
.footer ur li>span{
    font-size: 0.5rem;   
}

`main.css`代码：

@import url(/css/maincd.css);
@import url(/css/sp.css);
.main {
  z-index: -1;
  margin-top: 4.5rem;
  margin-bottom: 5rem;
  background-color: #f6f6f6;
}
.main .banner {
  background-color: #c82519;
  height: 10rem;
  border-bottom-left-radius: 5rem;
  border-bottom-right-radius: 5rem;
}
.main .banner > img {
  height: 14rem;
  width: 35.5rem;
  max-width: 40rem;
  border-radius: 1rem;
  position: absolute;
  left: 1rem;
  top: 4.5rem;
}

`maincd.css`代码：

.main .maincd {
  margin-top: 5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 2rem;
}
.main .maincd > a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #7e7e7e;
  align-items: center;
  margin-bottom: 1rem;
  width: 6.6rem;
}
.main .maincd > a > span {
  font-size: 1.2rem;
  margin-top: 0.6rem;
}
.main .maincd > a > img {
  width: 4rem;
  height: 4rem;
  text-align: center;
}
.miaosha {
  background-color: #fff;
  position: relative;
  left: 0;
  right: 0;
  height: 13.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  /* text-decoration: none; */
}
.miaosha .miaoshatop {
  display: flex;
  justify-content: space-between;
}
.miaosha .miaoshatop > a {
  text-decoration: none;
  /* color: #222222; */
}
.miaosha .miaoshatop > a:first-of-type {
  color: #222;
  flex: 2;
  margin-top: 1rem;
  margin-left: 1rem;
  font-size: 1.4rem;
  display: flex;
  justify-content: space-between;
}
.miaosha .miaoshatop > a:last-of-type {
  color: #f23121;
  flex: 2;
  margin-right: 1rem;
  margin-top: 1rem;
  font-size: 1.2rem;
  display: flex;
  justify-content: flex-end;
}
.miaosha .miaoshatop > a:first-of-type > div:first-of-type + div {
  color: red;
}
.miaosha .miaoshatop > a:first-of-type > div:first-of-type + div + div {
  display: flex;
  justify-content: flex-end;
}
.miaosha .miaoshatop > a:first-of-type > div:first-of-type + div + div > span {
  color: red;
}
.miaosha .miaoshatop > a:first-of-type > div:first-of-type + div + div > div {
  background-color: red;
  color: white;
  border-radius: 0.5rem;
  width: auto;
}
.miaoshamain .miaoshaul {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.miaoshamain .miaoshaul .miaoshali {
  width: 5.7rem;
}
.miaoshamain .miaoshaul .miaoshali > div > img {
  height: 5.5rem;
  width: 5.5rem;
  margin-top: 1rem;
  /* margin-bottom: 1rem; */
}
.miaoshamain .miaoshaul .miaoshali > div:last-of-type {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
}
.miaoshamain .miaoshaul .miaoshali > div:last-of-type > span:first-of-type {
  color: red;
}
.miaoshamain .miaoshaul .miaoshali > div:last-of-type > span:last-of-type {
  color: #999;
  position: relative;
}
.miaoshamain .miaoshaul .miaoshali > div:last-of-type > span:last-of-type > hr {
  width: 3rem;
  position: absolute;
  top: 1rem;
  left: 2rem;
}

`sp.css`代码：

.sp .spul {
  display: flex;
  flex-wrap: wrap;
}
.sp .spul .spli {
  width: 17rem;
  min-height: 26rem;
  background-color: #fff;
  border-radius: 1rem;
  margin-left: 1rem;
  margin-top: 1rem;
}
.sp .spul .spli .spimg > img {
  width: 17rem;
  border-radius: 1rem 1rem 0 0;
}
.sp .spul .spli .sptext {
  font-size: 1.2rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  height: 3rem;
  width: auto;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.sp .spul .spli .splook {
  display: flex;
  margin-left: 0.5rem;
  margin-top: 1rem;
  justify-content: space-between;
}
.sp .spul .spli .splook a {
  text-decoration: none;
}
.sp .spul .spli .splook a:first-of-type {
  color: red;
}
.sp .spul .spli .splook a:last-of-type {
  background-color: #f0f2f5;
  color: #808080;
  border-radius: 1rem 0rem 0 1rem;
  width: 4.5rem;
  font-size: 1rem;
  text-align: right;
  padding: 0.2rem;
}

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

vscode的下载和安装以及常用插件的部署和个人对http协议的理解

2021-06-29 00:12:07

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

仿京东移动端首页

效果图示：

html代码实现

`index.css`代码：

`head.css`代码：

`footer.css`代码：

`main.css`代码：

`maincd.css`代码：

`sp.css`代码：

仿京东移动端首页

效果图示：

html代码实现

index.css代码：

head.css代码：

footer.css代码：

main.css代码：

maincd.css代码：

sp.css代码：

`index.css`代码：

`head.css`代码：

`footer.css`代码：

`main.css`代码：

`maincd.css`代码：

`sp.css`代码：