【CSS】移动端布局-实战淘宝首页 - PHP前端

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > List of blog posts > 【CSS】移动端布局-实战淘宝首页

Blogger Information

Blog 94

fans 0

comment 0

visits 92420

Special Recommendation

More>

Related recommendations

移动端布局-实战淘宝首页

HTML DOM 结构

<!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" />
    <title>淘宝移动端首页布局顶部-页眉</title>
    <link rel="stylesheet" href="font_icon/iconfont.css" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <!-- 1. 页眉 -->
    <header>
      <a class="logo" href="https://m.taobao.com"><img src="images/taobao.png" alt="" /></a>
      <a class="search" href="">
        <span>寻找宝贝店铺</span>
        <span>搜索</span>
      </a>
      <a href="" class="iconfont icon-qiandao-xuanzhong"></a>
    </header>
    <!-- 2. 主体 -->
    <main>
      <!-- 1. 顶部导航 -->
      <ul class="navs">
        <li class="item">
          <a href=""><img src="images/navs/tmxb.webp" alt=""></a>
          <a href="">天猫新品</a>
        </li>
        <li class="item">
          <a href=""><img src="images/navs/jrbk.webp" alt=""></a>
          <a href="">今日爆款</a>
        </li>
        <li class="item">
          <a href=""><img src="images/navs/tmgj.webp" alt=""></a>
          <a href="">天猫国际</a>
        </li>
        <li class="item">
          <a href=""><img src="images/navs/fzlx.webp" alt=""></a>
          <a href="">飞猪旅行</a>
        </li>
        <li class="item">
          <a href=""><img src="images/navs/tmcx.webp" alt=""></a>
          <a href="">天猫超时</a>
        </li>
        <li class="item">
          <a href=""><img src="images/navs/tbch.webp" alt=""></a>
          <a href="">淘宝吃货</a>
        </li>
        <li class="item">
          <a href=""><img src="images/navs/sqk.webp" alt=""></a>
          <a href="">省钱卡</a>
        </li>
        <li class="item">
          <a href=""><img src="images/navs/ltjb.webp" alt=""></a>
          <a href="">领淘金币</a>
        </li>
        <li class="item">
          <a href=""><img src="images/navs/alpm.webp" alt=""></a>
          <a href="">阿里拍卖</a>
        </li>
        <li class="item">
          <a href=""><img src="images/navs/fl.webp" alt=""></a>
          <a href="">分类</a>
        </li>
      </ul>
      <!-- 2. 快速列表 -->
      <ul class="entry">
        <li class="item">
          <div class="title">
            <h3>聚划算</h3>
            <span>品牌折扣</span>
          </div>
          <a href=""><img src="images/items/item-1.webp" alt=""></a>
          <a href=""><img src="images/items/item-2.webp" alt=""></a>
        </li>
        <li class="item">
          <div class="title">
            <h3>天天特卖</h3>
            <span>1元秒杀</span>
          </div>
          <a href=""><img src="images/items/item-3.webp" alt=""></a>
          <a href=""><img src="images/items/item-4.webp" alt=""></a>
        </li>
        <li class="item">
          <div class="title">
            <h3>有好货</h3>
            <span>好口碑</span>
          </div>
          <a href=""><img src="images/items/item-5.webp" alt=""></a>
          <a href=""><img src="images/items/item-6.webp" alt=""></a>
        </li>
        <li class="item">
          <div class="title">
            <h3>每日好店</h3>
            <span>头条</span>
          </div>
          <a href=""><img src="images/items/item-7.webp" alt=""></a>
          <a href=""><img src="images/items/item-8.webp" alt=""></a>
        </li>
      </ul>
      <!-- 3. 商品列表 -->
      <ul class="list">
        <li class="item">
          <!-- 图片 -->
          <a href=""><img src="images/items/item-9.webp" alt=""></a>
          <!-- 描述 -->
          <div class="desc">
            <a href="">商品简介商品简介商品简介</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">14.9</span>
              <span>123人购买</span>
            </div>
          </div>
        </li>
        <li class="item">
          <!-- 图片 -->
          <a href=""><img src="images/items/item-10.webp" alt=""></a>
          <!-- 描述 -->
          <div class="desc">
            <a href="">商品简介商品简介商品简介</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">14.9</span>
              <span>123人购买</span>
            </div>
          </div>
        </li>
        <li class="item">
          <!-- 图片 -->
          <a href=""><img src="images/items/item-11.webp" alt=""></a>
          <!-- 描述 -->
          <div class="desc">
            <a href="">商品简介商品简介商品简介</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">14.9</span>
              <span>123人购买</span>
            </div>
          </div>
        </li>
        <li class="item">
          <!-- 图片 -->
          <a href=""><img src="images/items/item-12.webp" alt=""></a>
          <!-- 描述 -->
          <div class="desc">
            <a href="">商品简介商品简介商品简介</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">14.9</span>
              <span>123人购买</span>
            </div>
          </div>
        </li>
        <li class="item">
          <!-- 图片 -->
          <a href=""><img src="images/items/item-13.webp" alt=""></a>
          <!-- 描述 -->
          <div class="desc">
            <a href="">商品简介商品简介商品简介</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">14.9</span>
              <span>123人购买</span>
            </div>
          </div>
        </li>
        <li class="item">
          <!-- 图片 -->
          <a href=""><img src="images/items/item-14.webp" alt=""></a>
          <!-- 描述 -->
          <div class="desc">
            <a href="">商品简介商品简介商品简介</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">14.9</span>
              <span>123人购买</span>
            </div>
          </div>
        </li>
        <li class="item">
          <!-- 图片 -->
          <a href=""><img src="images/items/item-15.webp" alt=""></a>
          <!-- 描述 -->
          <div class="desc">
            <a href="">商品简介商品简介商品简介</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">14.9</span>
              <span>123人购买</span>
            </div>
          </div>
        </li>
        <li class="item">
          <!-- 图片 -->
          <a href=""><img src="images/items/item-16.webp" alt=""></a>
          <!-- 描述 -->
          <div class="desc">
            <a href="">商品简介商品简介商品简介</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">14.9</span>
              <span>123人购买</span>
            </div>
          </div>
        </li>
        <li class="item">
          <!-- 图片 -->
          <a href=""><img src="images/items/item-17.webp" alt=""></a>
          <!-- 描述 -->
          <div class="desc">
            <a href="">商品简介商品简介商品简介</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">14.9</span>
              <span>123人购买</span>
            </div>
          </div>
        </li>
        <li class="item">
          <!-- 图片 -->
          <a href=""><img src="images/items/item-18.webp" alt=""></a>
          <!-- 描述 -->
          <div class="desc">
            <a href="">商品简介商品简介商品简介</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">14.9</span>
              <span>123人购买</span>
            </div>
          </div>
        </li>
        <li class="item">
          <!-- 图片 -->
          <a href=""><img src="images/items/item-19.webp" alt=""></a>
          <!-- 描述 -->
          <div class="desc">
            <a href="">商品简介商品简介商品简介</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">14.9</span>
              <span>123人购买</span>
            </div>
          </div>
        </li>
        <li class="item">
          <!-- 图片 -->
          <a href=""><img src="images/items/item-20.webp" alt=""></a>
          <!-- 描述 -->
          <div class="desc">
            <a href="">商品简介商品简介商品简介</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">14.9</span>
              <span>123人购买</span>
            </div>
          </div>
        </li>
      </ul>
    </main>
    <!-- 3. 页脚 -->
    <footer>
      <a href="m.taobao.com" class="iconfont icon-taobao"></a>
      <a href="">
        <span class="iconfont icon-gouwuche"></span>
        <span>购物车</span>
      </a>
      <a href="">
        <span class="iconfont icon-wode"></span>
        <span>我的淘宝</span>
      </a>
    </footer>
  </body>
</html>

public CSS

/* 页眉 */
header,
footer {
    height: 50px;
    /* 固定定位 */
    position: fixed;
}
header {
    background-color: #f4f4f4;
    /* 定位空间 */
    top: 0;
    left: 0;
    right: 0;
    /* z-index: 控制定位元素的显示层级 */
    z-index: 1;
}
footer {
    background-color: #f4f4f4;
    /* 页脚与页眉相比，只要把top,改为 bottom  */
    bottom: 0;
    left: 0;
    right: 0;
}
main {
    /* background-color: yellow; */
    min-height: 2000px;
    /* overflow: hidden; */
    position: relative;
    top: 50px;
}
header {
    display: grid;
    grid-template-columns: 0.56rem 1fr 0.33rem;
    grid-auto-rows: 0.5rem;
    place-items: center;
    gap: 0.1rem;
}
header a.logo {
    padding-left: 0.1rem;
}
header>a.search {
    width: 100%;
    border: 2px solid #ff5000;
    height: 0.35rem;
    border-radius: 0.3rem;
    /* grid:整体  fiex:细节 */
    display: flex;
    place-content: space-between;
    place-items: center;
}
header>a.search>span:first-of-type {
    padding-left: 0.1rem;
}
header>a.search>span:last-of-type {
    /* background-color: #ff5000; */
    /* 渐变色：从左开始 */
    background: linear-gradient(to left, #ff5000, #ffa000);
    color: white;
    padding: 0.05rem 0.2rem;
    border-radius: 0.3rem;
    margin-right: 0.02rem;
}
header>a.iconfont {
    color: #ff5000;
}
/* 页脚 */
footer {
    border-top: 1px solid #ccc;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    place-content: space-around;
    place-items: center;
    font-size: smaller;
}
footer > a {
    display: grid;
    place-items: center;
}
footer > a:first-of-type {
    color: #f50;
    font-size: xx-large;
}
footer > a:first-of-type + a > span.iconfont {
    font-size: x-large;
}

main CSS

/* 主体样式 */
main {
    min-height: 2000px;
    overflow: hidden;
}
/* 主体 顶部导航 */
/* 顶部导航，快速入口，商品列表的public style */
main .navs,
main .entry,
main .list > item {
    background-color: #fff;
    border-radius: 0.1rem;
    margin-top: 0.08rem;
}
main .navs {
    display: grid;
    /* 水平5列等宽 */
    grid-template-columns: repeat(5,1fr);
    gap: 0 10px;
}
main .navs .item {
    display: grid;
    place-items: center;
}
main .entry {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding: 0.1rem;
}
main .entry .item {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding: 0.1rem;
}
main .entry .item .title {
    grid-column: span 2;
    display: flex;
    place-items: center;
}
main .entry .item:nth-of-type(-n + 2){
    border-bottom: 1px solid #dedede;
}
main .entry .item span {
    background-color: #f50;
    color: white;
    border-radius: 0.03rem;
    font-size: smaller;
    padding: 0 0.03rem;
    margin-left: 0.05rem;
}
/* 商品列表 */
main .list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 0 10px;
}
/* 商品图片圆角 */
main .list .item img {
    border-radius: 0.1rem 0.1rem 0 0;
}
/* 商品描述 */
main .list .item .desc {
    padding: 0.1rem;
}
/* 价格 */
main .list .item .desc .iconfont {
    color: #f50;
}
main .list .item .price span:last-of-type {
    color: #bbb;
    font-style: x-small;
}

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】文档结构与元素，标签，属性的类型

2022-11-27 20:51:59

About us Disclaimer Sitemap: php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

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 DOM 结构

public CSS

main CSS