仿小米商城移动端

实例演示

    <header>
        <!-- logo -->
        <a href=""><img src="images/icon-header-logo3.ddf2a1c313.png" alt=""></a>
        <!-- 搜索框 -->
        <a href="" class="so">
            <span class="iconfont icon-wode-wode"></span>
           <span>搜索商品名称</span> 
        </a>
        <!-- 我的 -->
        <a href="" class="iconfont icon-wode-wode"></a>
        <!-- 导航下部 -->
        <div class="bottom">
            <a href="">推荐</a>
            <a href="">智能</a>
            <a href="">电视</a>
            <a href="">家电</a>
            <a href="">笔记本</a>
        </div>
    </header>
    <!-- 主体 -->
    <main>
        <!-- 轮番图 -->
        <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/89fbb601177fec95fd14af5a9cc257e0.jpg?thumb=1&w=720&h=360" class="banner"></a>
        <!-- 顶部导航 -->
        <div class="mainnavs">
            <a href="">
                <img src="images/shop.webp" alt="">
            </a>
            <a href="">
                <img src="images/zhong.webp" alt="">
            </a>
            <a href="">
                <img src="images/shouji.webp" alt="">
            </a>
            <a href="">
                <img src="images/huanxin.webp" alt="">
            </a>
            <a href="">
                <img src="images/shangxin.webp" alt="">
            </a>
            <a href="">
                <img src="images/zhineng.webp" alt="">
            </a>
            <a href="">
                <img src="images/bijiben.png" alt="">
            </a>
            <a href="">
                <img src="images/dianshi.png" alt="">
            </a>
            <a href="">
                <img src="images/xiyiji.webp" alt="">
            </a>
             <a href="">
                <img src="images/mifenka.png" alt="">
            </a>
        </div>
        <!-- 快速入口 -->
        <div class="kuaisu">
            <a href=""><img src="images/k50.webp" alt=""></a>
            <a href=""><img src="images/xiaomiwatch.webp" alt=""></a>
            <a href=""><img src="images/ea50.webp" alt=""></a>
        </div>
        <a href=""><img src="images/k40s.webp" alt=""></a>
        <!-- 手机列表 -->
        <div class="shouji">
            <a href="">
                <img src="images/k50dj.jpg" alt="">
                <span>K50 电竞版</span>
                <span>全线拉满的冷血旗舰</span>
                <span style="color: #ee7f79;">￥3299起</span>
                <button class="buy">立即购买</button>
            </a>
            <a href="">
                <img src="images/k50dj.jpg" alt="">
                <span>K50 电竞版</span>
                <span>全线拉满的冷血旗舰</span>
                <span style="color: #ee7f79;">￥3299起</span>
                <button class="buy">立即购买</button>
            </a>
            <a href="">
                <img src="images/k50dj.jpg" alt="">
                <span>K50 电竞版</span>
                <span>全线拉满的冷血旗舰</span>
                <span style="color: #ee7f79;">￥3299起</span>
                <button class="buy">立即购买</button>
            </a>
            <a href="">
                <img src="images/k50dj.jpg" alt="">
                <span>K50 电竞版</span>
                <span>全线拉满的冷血旗舰</span>
                <span style="color: #ee7f79;">￥3299起</span>
                <button class="buy">立即购买</button>
            </a>
            <a href="">
                <img src="images/k50dj.jpg" alt="">
                <span>K50 电竞版</span>
                <span>全线拉满的冷血旗舰</span>
                <span style="color: #ee7f79;">￥3299起</span>
                <button class="buy">立即购买</button>
            </a>
            <a href="">
                <img src="images/k50dj.jpg" alt="">
                <span>K50 电竞版</span>
                <span>全线拉满的冷血旗舰</span>
                <span style="color: #ee7f79;">￥3299起</span>
                <button class="buy">立即购买</button>
            </a>
            <a href="">
                <img src="images/k50dj.jpg" alt="">
                <span>K50 电竞版</span>
                <span>全线拉满的冷血旗舰</span>
                <span style="color: #ee7f79;">￥3299起</span>
                <button class="buy">立即购买</button>
            </a>
            <a href="">
                <img src="images/k50dj.jpg" alt="">
                <span>K50 电竞版</span>
                <span>全线拉满的冷血旗舰</span>
                <span style="color: #ee7f79;">￥3299起</span>
                <button class="buy">立即购买</button>
            </a>
        </div>
        <div class="gengduo">
            <a href="" style="text-align: center;">更多小米手机产品&gt;</a>
        </div>
        <!-- 小米电视 -->
        <div class="dianshi">
            <a href="">
                <img src="images/dianshi1.webp" alt="">
            </a>
        </div>
          <div class="gengduo">
            <a href="" style="text-align: center;">更多小米电视产品&gt;</a>
        </div>
        <!-- 小米笔记本 -->
        <div class="mpc">
            <a href="">
                <img src="images/bijiben/banner.webp" alt="">
            </a>
            <div class="pc">
                <a href="">
                <img src="images/bijiben/redmibookpro14.jpg" alt="">
                <span>RedmiBook Pro 14</span>
                <span>2.5k超视网膜全面屏</span>
                <span style="color: #ee7f79;">￥4999起</span>
                <button class="buy">立即购买</button>
            </a>
            <a href="">
                <img src="images/bijiben/redmibookpro15.jpg" alt="">
                <span>RedmiBook Pro 15</span>
                <span>3.2k超视网膜全面屏</span>
                <span style="color: #ee7f79;">￥5299起</span>
                <button class="buy">立即购买</button>
            </a>
            <a href="">
                <img src="images/bijiben/xiaomi15pro.jpg" alt="">
                <span>小米笔记本Pro 15</span>
                <span>2.5k超视网膜全面屏</span>
                <span style="color: #ee7f79;">￥4999起</span>
                <button class="buy">立即购买</button>
            </a>
            <a href="">
                <img src="images/bijiben/xiaomi14pro.jpg" alt="">
                <span>小米笔记本Pro 14</span>
                <span>2.5k超视网膜全面屏</span>
                <span style="color: #ee7f79;">￥4999起</span>
                <button class="buy">立即购买</button>
            </a>
            </div>
        </div>
          <div class="gengduo">
            <a href="" style="text-align: center;">更多小米笔记本产品&gt;</a>
        </div>
        <a href="">
            <img src="images/zhineng1.webp" alt="">
        </a>
          <div class="gengduo">
            <a href="" style="text-align: center;">更多米家家电产品&gt;</a>
        </div>
          <div class="gengduo">
            <a href="" style="text-align: center;">更多米家只能产品&gt;</a>
        </div>
        <!-- 底部快速入口 -->
        <div class="bottom">
            <a href="">
                <img src="images/bottom/xuexi.webp" alt="">
            </a>
            <a href="">
                <img src="images/bottom/jiating.webp" alt="">
            </a>
            <a href="">
                <img src="images/bottom/lvxing.webp" alt="">
            </a>
            <a href="">
                <img src="images/bottom/yinyue.webp" alt="">
            </a>
            <a href="">
                <img src="images/bottom/xinjia.webp" alt="">
            </a>
            <a href="">
                <img src="images/bottom/sheji.webp" alt="">
            </a>
        </div>
        <div>
            <a href="">
                <img src="images/bottom/huanxin.webp" alt="">
            </a>
        </div>
        <div class="xm">
            <a href="">了解小米</a>
        </div>
        <div class="app">
            <a href="" style="color: white;">
                <span>来APP领新人礼包</span></a>
        </div>
    </main>
    <!-- 页脚-->
    <footer>
        <a href="">
            <span class="iconfont icon-shouye-shouye"></span>
            <span>首页</span>          
        </a>
          <a href="">
            <span class="iconfont icon-fenlei"></span>
            <span>分类</span>
        </a>
          <a href="">
             <span class="iconfont icon-quanzi"></span>
            <span>米圈</span>
        </a>
          <a href="">
            <span class="iconfont icon-gouwuche"></span>
            <span>购物车</span>
        </a>
          <a href="">
            <span class="iconfont icon-wode-wode"></span>
            <span>我的</span>
        </a>
    </footer>

imdex.css

@import url(reset.css);
@import url(main.css);
@import url(header.css);
@import url(public.css);
@import url(../font_icon/iconfont.css);

reser.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
    color: #747474;
}
li{
    list-style: none;
}
html{
    font-size: calc(100vw / 3.75);
}
body{
    font-size: 0.13rem;
    color: #333;
    background-color: #f5f5f5;
    margin: auto;
    /* padding: 0 0.1rem; */
    overflow-y: auto;
}
body img{
    width: 100%;
}
@media (max-width:320px) {
    body{
        font-size: 12px;
    }
}
@media (min-width:640px) {
    body{
        font-size: 16px;
    }
}

header.css

header {
  display: grid;
  grid-template-columns: 0.3rem 1fr 0.5rem;
  place-items: center;
  padding: 0 0.1rem;
}
header .so {
  border: 1px solid rgb(121, 121, 121);
  height: 0.3rem;
  width: 80%;
  display: flex;
  border-radius: 0.03rem;
  place-items: center;
  background-color: white;
  padding-left: 0.15rem;
  color: #b2b2b2;
}
header .so .iconfont,
header .iconfont {
  font-size: 0.15rem;
  padding-right: 0.1rem;
}
header .bottom {
  display: grid;
  grid-template-columns: repeat(5, 0.4rem);
  position: relative;
  left: 1.4rem;
}

mian.css

    main{
        min-height: 3000px;
        padding-bottom: 0.5rem;
        margin-top: 0.5rem;
    }
    /* 轮番图 */
main .banner{
    margin:  0.1rem 0;
    padding: 0.1rem 0;
    width: 100%;
    height: 2.875rem;
}
main .mainnavs{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    position: relative;
    top: -0.5rem;
    gap: 0;
}
/* 快速入口 */
main .kuaisu{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .05rem;
}
main .kuaisu > a:first-of-type{
    grid-row: span 2 ;
}
/* 手机、笔记本商品列表 */
main .shouji,
main .mpc .pc{
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    /* border-bottom: 1px solid #cecece; */
    padding-bottom: 0.1rem;
    border-bottom: 1px solid #cecece;
    background-color: white;
    gap: .08rem;
}
main .shouji > a,
main .mpc .pc > a{
    display: grid;
    place-items: center;
    padding-bottom: .1rem;   
}
main .shouji  button,
main .mpc .pc  button{
    border: none;
    outline: none;
    background-color: #ea625b;
    color: white;
    border-radius: 0.05rem;
    height: 0.3rem;
    width: 0.9rem;
}
/* 更多商品 */
main .gengduo,
main .xm{
    height: 50px;
    background-color: white;
    display: flex;
    place-content: center;
    place-items: center;
    font-size: larger;
    margin-bottom: 10px;
}
main .bottom{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: .1rem;
}
main .app{
    background-color: #ff6700;
    color: white;
    font-size: larger;
    width: 180px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    place-content: center;
    place-items: center;
    position: fixed;
    left: 120px;
    bottom: 60px;
}

public.css

header{
    width: 100vw;
    height: 0.7rem;
    background-color: #f2f2f2;
}
header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
}
/* 页尾 */
footer{
    width: 100vw;
    height: 0.4rem;
    background-color: #f2f2f2;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
}
footer {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    place-content: space-around;
    place-items: center;
}
footer > a{
    display: grid;
    place-items: center;
}

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

html基础：html前端环境部署

2022-07-01 10:13:58