搜索 登录
初学第十三章：仿淘宝移动端布局

初学第十三章：仿淘宝移动端布局

huixiang / / 0 评论 / 560 阅读 /0 赞
钱才是硬道理
本文阅读 2 分钟
首页 › 前端经典实战案例,实战案例 › 正文

演示截图

l5rkp1os.png

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" />
    <title>淘宝首页实例演示移动端布局</title>
    <link rel="stylesheet" href="static/css/header.css" />
    <link rel="stylesheet" href="static/css/navs.css" />
    <link rel="stylesheet" href="static/css/nav.css" />
    <link rel="stylesheet" href="static/css/main.css" />
  </head>
  <body>
    <header>
      <nav>
        <div class="logo">
          <span class="iconfont icon-taobaowang alogo"></span>
        </div>
        <div class="sousuo">
          <input type="search" name="" id="" />
          <span>搜索</span>
        </div>
        <div class="qiandao">
          <span class="iconfont icon-qiandao qd"></span>
        </div>
      </nav>
    </header>
    <main>
      <!-- 导航 -->
      <div class="nav">
        <a href="">
          <img src="static/images/a.jpg" alt="" />
          <p>天猫新品</p>
        </a>
        <a href="">
          <img src="static/images/a.jpg" alt="" />
          <p>天猫新品</p>
        </a>
        <a href="">
          <img src="static/images/a.jpg" alt="" />
          <p>天猫新品</p>
        </a>
        <a href="">
          <img src="static/images/a.jpg" alt="" />
          <p>天猫新品</p>
        </a>

        <a href="">
          <img src="static/images/a.jpg" alt="" />
          <p>天猫新品</p>
        </a>
        <a href="">
          <img src="static/images/a.jpg" alt="" />
          <p>天猫新品</p>
        </a>
        <a href="">
          <img src="static/images/a.jpg" alt="" />
          <p>天猫新品</p>
        </a>
        <a href="">
          <img src="static/images/a.jpg" alt="" />
          <p>天猫新品</p>
        </a>
        <a href="">
          <img src="static/images/a.jpg" alt="" />
          <p>天猫新品</p>
        </a>
        <a href="">
          <img src="static/images/a.jpg" alt="" />
          <p>天猫新品</p>
        </a>
      </div>
      <!-- 快速入口 -->
      <div class="ksrk">
        <div class="a">
          <div class="title">
            <h3>聚划算</h3>
            <span>品牌折扣</span>
          </div>
          <a href=""><img src="static/images/b.jpg" alt="" /></a>
          <a href=""><img src="static/images/c.jpg" alt="" /></a>
        </div>
        <div class="a">
          <div class="title">
            <h3>聚划算</h3>
            <span>品牌折扣</span>
          </div>
          <a href=""><img src="static/images/b.jpg" alt="" /></a>
          <a href=""><img src="static/images/c.jpg" alt="" /></a>
        </div>
        <div class="a">
          <div class="title">
            <h3>聚划算</h3>
            <span>品牌折扣</span>
          </div>
          <a href=""><img src="static/images/b.jpg" alt="" /></a>
          <a href=""><img src="static/images/c.jpg" alt="" /></a>
        </div>
        <div class="a">
          <div class="title">
            <h3>聚划算</h3>
            <span>品牌折扣</span>
          </div>
          <a href=""><img src="static/images/b.jpg" alt="" /></a>
          <a href=""><img src="static/images/c.jpg" alt="" /></a>
        </div>
      </div>
      <div class="list">
        <div class="lista">
          <a href=""><img src="static/images/d.jpg" alt="" /></a>
          <div class="desc">
            <a href="">商品描述商品描述商品描述商品描述商品描述</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">￥288</span>
              <span>123人已购买</span>
            </div>
          </div>
        </div>
        <div class="lista">
          <a href=""><img src="static/images/d.jpg" alt="" /></a>
          <div class="desc">
            <a href="">商品描述商品描述商品描述商品描述商品描述</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">￥288</span>
              <span>123人已购买</span>
            </div>
          </div>
        </div>
        <div class="lista">
          <a href=""><img src="static/images/d.jpg" alt="" /></a>
          <div class="desc">
            <a href="">商品描述商品描述商品描述商品描述商品描述</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">￥288</span>
              <span>123人已购买</span>
            </div>
          </div>
        </div>
        <div class="lista">
          <a href=""><img src="static/images/d.jpg" alt="" /></a>
          <div class="desc">
            <a href="">商品描述商品描述商品描述商品描述商品描述</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">￥288</span>
              <span>123人已购买</span>
            </div>
          </div>
        </div>
        <div class="lista">
          <a href=""><img src="static/images/d.jpg" alt="" /></a>
          <div class="desc">
            <a href="">商品描述商品描述商品描述商品描述商品描述</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">￥288</span>
              <span>123人已购买</span>
            </div>
          </div>
        </div>
        <div class="lista">
          <a href=""><img src="static/images/d.jpg" alt="" /></a>
          <div class="desc">
            <a href="">商品描述商品描述商品描述商品描述商品描述</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">￥288</span>
              <span>123人已购买</span>
            </div>
          </div>
        </div>
        <div class="lista">
          <a href=""><img src="static/images/d.jpg" alt="" /></a>
          <div class="desc">
            <a href="">商品描述商品描述商品描述商品描述商品描述</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">￥288</span>
              <span>123人已购买</span>
            </div>
          </div>
        </div>
        <div class="lista">
          <a href=""><img src="static/images/d.jpg" alt="" /></a>
          <div class="desc">
            <a href="">商品描述商品描述商品描述商品描述商品描述</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">￥288</span>
              <span>123人已购买</span>
            </div>
          </div>
        </div>
        <div class="lista">
          <a href=""><img src="static/images/d.jpg" alt="" /></a>
          <div class="desc">
            <a href="">商品描述商品描述商品描述商品描述商品描述</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">￥288</span>
              <span>123人已购买</span>
            </div>
          </div>
        </div>
        <div class="lista">
          <a href=""><img src="static/images/d.jpg" alt="" /></a>
          <div class="desc">
            <a href="">商品描述商品描述商品描述商品描述商品描述</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">￥288</span>
              <span>123人已购买</span>
            </div>
          </div>
        </div>
        <div class="lista">
          <a href=""><img src="static/images/d.jpg" alt="" /></a>
          <div class="desc">
            <a href="">商品描述商品描述商品描述商品描述商品描述</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">￥288</span>
              <span>123人已购买</span>
            </div>
          </div>
        </div>
        <div class="lista">
          <a href=""><img src="static/images/d.jpg" alt="" /></a>
          <div class="desc">
            <a href="">商品描述商品描述商品描述商品描述商品描述</a>
            <div class="price">
              <span class="iconfont icon-renminbi_o">￥288</span>
              <span>123人已购买</span>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer>
      <div class="d_nav">
        <div class="a">
          <span class="iconfont icon-shejiaotubiao-44 shouye"> </span>
        </div>
        <div class="b">
          <span class="iconfont icon-gouwuchekong gwc"> </span>
          <p>购物车</p>
        </div>
        <div class="c">
          <span class="iconfont icon-wode-copy wode"> </span>
          <p>我的淘宝</p>
        </div>
      </div>
    </footer>
  </body>
</html>
  • header.css文件
@import url(font_icon/iconfont.css);
html {
  font-size: calc(100vw / 3.75);
}
body {
  font-size: 16px;
}
header {
  position: fixed;
  z-index: 99;
  background-color: #f4f4f4;
}
header nav {
  width: 3.57rem;
  display: flex;
  place-content: space-around;
  place-items: center;
  margin: auto;
}
header nav .logo .alogo {
  margin-left: -0.1rem;
  font-size: 0.35rem;
  color: rgb(255, 102, 0);
}
header nav .sousuo {
  position: relative;
}
header nav .sousuo input {
  width: 2rem;
  height: 0.35rem;
  border-radius: 0.2rem;
  border: 0.01rem solid rgb(255, 102, 0);
}
header nav .sousuo span {
  position: absolute;
  top: 0.025rem;
  right: 0.04rem;
  width: 0.64rem;
  height: 0.3rem;
  text-align: center;
  border-radius: 0.2rem;
  border: 00.01rem solid #fff;
  color: #fff;
  padding-top: 0.05rem;
  font-weight: bold;
  font-size: 0.14rem;
  background: linear-gradient(to right, #ff8d0e, #ff5000);
}
header nav .qiandao .qd {
  font-size: 0.3rem;
  color: #ff5000;
}

  • main.css文件

    main .ksrk {
width: 3.57rem;
height: 1.835rem;
display: grid;
grid-template-columns: repeat(2, 1.785rem);
grid-template-rows: repeat(2, 0.92rem);
position: relative;
margin: auto;
top: 0.1rem;
background-color: #fff;
border-radius: 0.2rem;
}
main .ksrk .a {
padding: 0.05rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
main .ksrk .a:first-of-type {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
main .ksrk .a:nth-of-type(2) {
border-bottom: 1px solid #ccc;
}
main .ksrk .a:nth-of-type(3) {
border-right: 1px solid #ccc;
}
main .ksrk .a .title {
display: flex;
grid-column: span 2;
}
main .ksrk .a a img {
width: 0.63rem;
}
main .ksrk .a .title h3 {
font-size: 0.15rem;
}
main .ksrk .a .title span {
padding: 0.01rem;
background-color: #f50;
font-size: 0.11rem;
color: #fff;
text-align: center;
border-radius: 0.04rem;
}
main .list {
place-content: center;
margin: 0.2rem 0.1rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.1rem;
margin-bottom: 0.6rem;
}
main .list .lista {
background-color: #fff;
border-radius: 0.2rem;
border-radius: 0.1rem;
display: flex;
flex-flow: column;
}
main .list .lista a img {
border-radius: 10px 10px 0 0;
width: 1.725rem;
}
main .list .lista .desc a {
color: #555;
font-size: small;
}

main .list .lista .desc .price span:first-of-type {
color: #f50;
}
main .list .lista .desc .price span:last-of-type {
font-size: smaller;
color: #ccc;
}
  • nav.css
footer {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
footer .d_nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  place-content: center;
  width: 3.57rem;
  margin: auto;
  height: 0.46rem;
}
footer .d_nav .a .shouye {
  font-size: 0.5rem;
  color: rgb(255, 102, 0);
}
footer .d_nav .b,
footer .d_nav .c {
  display: flex;
  flex-flow: column;
  place-items: center;
}
footer .d_nav .b .gwc {
  font-size: 0.25rem;
  color: #5d656b;
}
footer .d_nav .c .wode {
  font-size: 0.25rem;
  color: #5d656b;
}
footer .d_nav .c p,
footer .d_nav .b p {
  margin: 0.05rem;
  color: #666666;
  font-size: 0.12rem;
}
  • navs.css文件
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
html {
  font-size: calc(100vw / 3.75);
}
body {
  font-size: 16px;
  background-color: #f4f4f4;
}
header {
  height: 0.5rem;
  width: 100vw;
}

main {
  width: 100vw;
  position: relative;
  top: 0.45rem;
  padding-bottom: 0.2rem;
}
main .nav {
  background-color: #fff;
  height: 1.46rem;
  width: 3.57rem;
  display: grid;
  grid-template-columns: repeat(5, 0.61rem);
  grid-template-rows: repeat(2, 0.66rem);
  gap: 0.1rem;
  place-items: center;
  place-content: space-between;
  margin: auto;
  border-radius: 0.12rem;
}
main .nav a {
  margin-bottom: 0.1rem;
}
main .nav a img {
  width: 100%;
}
main .nav a p {
  font-size: 0.13rem;
  height: 0.13rem;
  color: #666666;
}
@media (max-width: 374px) {
  html {
    font-size: 87.5px;
  }
}
原创文章，作者：huixiang，如若转载，请注明出处：http://hui-xiang.cn/archives/101.html
-- 展开阅读全文 --
初学第十二章：移动端布局详解/实例演示
« 上一篇 07-16
初学第十四章：js变量常量/作用域/函数体/实例演示
下一篇 » 07-20

随机推荐

初学第十九章：DOM操作之增删改查/仿制简易留言板

初学第二十章：js事件冒泡/事件委托/常用字符串API实例演示

表单中的常用控件/内联框架的使用

初学第十一章：用grid和flex布局完成php中文网首页上半部分

作者信息
huixiang
钱才是硬道理
发表文章 46 篇
最新文章

动态快讯

热门文章

搭建本站同款Typecho博客+Joe模板从基础开始到完美运行
1k 阅读 ，
VUE安装/VUE基础指令
923 阅读 ，
学习环境安装与配置/必知术语介绍
850 阅读 ，
最近在使用npm安装Vue脚手架遇到的报错问题解决方案
840 阅读 ，

标签TAG