仿移动端淘宝首页 - 第20期培训-大前端

首页 > 博客列表 > 仿移动端淘宝首页

博主信息

博文 37

粉丝 0

访问量 22296

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

仿移动端淘宝首页

秋闲独醉

原创

800人浏览过

<!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/index.css" />
    <link rel="stylesheet" href="static/font-icon/iconfont.css" />
  </head>
  <body>
    <!-- 页眉 -->
    <header>
      <!-- logo -->
      <a href="" class="logo"><img src="static/images/taobao.png" alt="" /> </a>
      <a href="" class="search">
        <span>寻找宝贝店铺</span>
        <span>搜索</span>
      </a>
      <a href="" class="iconfont icon-qiandao1"></a>
    </header>
    <!-- 内容 -->
    <main class="content">
      <div class="nav">
        <a href="">
          <img src="static/images/navs/tmxb.webp" alt="" />
          <span>天猫新品</span>
        </a>
        <a href="">
          <img src="static/images/navs/jrbk.webp" alt="" />
          <span>今日爆款</span>
        </a>
        <a href="">
          <img src="static/images/navs/tmgj.webp" alt="" />
          <span>天猫国际</span>
        </a>
        <a href="">
          <img src="static/images/navs/fzlx.webp" alt="" />
          <span>飞猪旅行</span>
        </a>
        <a href="">
          <img src="static/images/navs/tmcx.webp" alt="" />
          <span>天猫超市</span>
        </a>
        <a href="">
          <img src="static/images/navs/tbch.webp" alt="" />
          <span>淘宝吃货</span>
        </a>
        <a href="">
          <img src="static/images/navs/sqk.webp" alt="" />
          <span>省钱卡</span>
        </a>
        <a href="">
          <img src="static/images/navs/ltjb.webp" alt="" />
          <span>领淘金币</span>
        </a>
        <a href="">
          <img src="static/images/navs/alpm.webp" alt="" />
          <span>阿里拍卖</span>
        </a>
        <a href="">
          <img src="static/images/navs/fl.webp" alt="" />
          <span>分类</span>
        </a>
      </div>
      <div class="item">
        <a href="">
          <div>
            <span>聚划算</span>
            <span>品牌折扣</span>
          </div>
          <img src="static/images/items/item-1.webp" class="images" alt="" />
          <img src="static/images/items/item-2.webp" alt="" />
        </a>
        <a href="">
          <div>
            <span>天天特卖</span>
            <span>1元秒杀</span>
          </div>
          <img src="static/images/items/item-3.webp" alt="" />
          <img src="static/images/items/item-4.webp" alt="" />
        </a>
        <a href="">
          <div>
            <span>有好货</span>
            <span>好口碑</span>
          </div>
          <img src="static/images/items/item-5.webp" alt="" />
          <img src="static/images/items/item-6.webp" alt="" />
        </a>
        <a href="">
          <div>
            <span>每日好店</span>
            <span>特色</span>
          </div>
          <img src="static/images/items/item-7.webp" alt="" />
          <img src="static/images/items/item-8.webp" alt="" />
        </a>
      </div>
      <div class="product">
        <ul>
          <li>
            <img src="static/images/items/item-9.webp" alt="" />
            <div>
              <h4>这是产品名</h4>
              <div>
                <span class="iconfont icon-renminbi">288</span>
                <span>99人已购买</span>
              </div>
            </div>
          </li>
          <li>
            <img src="static/images/items/item-10.webp" alt="" />
            <div>
              <h4>这是产品名</h4>
              <div>
                <span class="iconfont icon-renminbi">288</span>
                <span>99人已购买</span>
              </div>
            </div>
          </li>
          <li>
            <img src="static/images/items/item-11.webp" alt="" />
            <div>
              <h4>这是产品名</h4>
              <div>
                <span class="iconfont icon-renminbi">288</span>
                <span>99人已购买</span>
              </div>
            </div>
          </li>
          <li>
            <img src="static/images/items/item-12.webp" alt="" />
            <div>
              <h4>这是产品名</h4>
              <div>
                <span class="iconfont icon-renminbi">288</span>
                <span>99人已购买</span>
              </div>
            </div>
          </li>
          <li>
            <img src="static/images/items/item-13.webp" alt="" />
            <div>
              <h4>这是产品名</h4>
              <div>
                <span class="iconfont icon-renminbi">288</span>
                <span>99人已购买</span>
              </div>
            </div>
          </li>
          <li>
            <img src="static/images/items/item-14.webp" alt="" />
            <div>
              <h4>这是产品名</h4>
              <div>
                <span class="iconfont icon-renminbi">288</span>
                <span>99人已购买</span>
              </div>
            </div>
          </li>
          <li>
            <img src="static/images/items/item-15.webp" alt="" />
            <div>
              <h4>这是产品名</h4>
              <div>
                <span class="iconfont icon-renminbi">288</span>
                <span>99人已购买</span>
              </div>
            </div>
          </li>
          <li>
            <img src="static/images/items/item-16.webp" alt="" />
            <div>
              <h4>这是产品名</h4>
              <div>
                <span class="iconfont icon-renminbi">288</span>
                <span>99人已购买</span>
              </div>
            </div>
          </li>
          <li>
            <img src="static/images/items/item-17.webp" alt="" />
            <div>
              <h4>这是产品名</h4>
              <div>
                <span class="iconfont icon-renminbi">288</span>
                <span>99人已购买</span>
              </div>
            </div>
          </li>
          <li>
            <img src="static/images/items/item-18.webp" alt="" />
            <div>
              <h4>这是产品名</h4>
              <div>
                <span class="iconfont icon-renminbi">288</span>
                <span>99人已购买</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </main>
    <!-- 页脚 -->
    <footer>
      <a href="" 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>

/* 初始化 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #555;
}
li {
  list-style: none;
}
html {
  font-size: calc(100vw / 3.75);
}
@media (max-width: 320px) {
  html {
    font-size: 85px;
  }
}
@media (min-width: 640px) {
  html {
    font-size: 170px;
  }
}
body {
  font-size: 0.13rem;
  color: #333;
  margin: auto;
  background-color: #f4f4f4;
  padding: 0 0.15rem;
  overflow-y: auto;
}
body img {
  width: 100%;
}
/* 页眉css */
header {
  background-color: #f4f4f4;
  height: 0.5rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 0.58rem 1fr 0.33rem;
  grid-auto-rows: 0.5rem;
  place-items: center;
  gap: 0.1rem;
}
header .logo {
  padding-left: 0.1rem;
}
header .search {
  width: 100%;
  height: 0.4rem;
  border: 1px solid #d50;
  border-radius: 0.3rem;
  background-color: white;
  display: flex;
  place-content: space-between;
  place-items: center;
}
header .search span:first-of-type {
  padding-left: 0.1rem;
  font-size: large;
}
header .search span:last-of-type {
  /* width: 0.8rem;
  height: 0.33rem;
  border: 1px solid red;
  border-radius: 0.3rem;
  place-self: center; */
  background: linear-gradient(to left, #ff5000, #ffa000);
  color: white;
  font-size: large;
  padding: 0.05rem 0.15rem;
  margin-right: 0.01rem;
  border-radius: 0.3rem;
}
header .iconfont {
  color: #d50;
  font-size: 0.3rem;
  margin-right: 0.1rem;
}
main {
  /* min-height: 2000px; */
  overflow: hidden;
  position: relative;
  top: 0.6rem;
}
/* 页脚css */
footer {
  height: 0.5rem;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-content: space-around;
  place-items: center;
  background-color: white;
}
footer a {
  display: grid;
  place-items: center;
}
footer a:first-of-type {
  font-size: 0.5rem;
  color: #ff5000;
}
/* 顶布导行css */
main .nav {
  background-color: white;
  border-radius: 0.2rem;
  padding: 0.08rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
main .nav a {
  display: grid;
  place-items: center;
}
/* 中部菜单 */
main .item {
  background-color: white;
  border-radius: 0.2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 0.1rem;
  margin-top: 0.08rem;
}
main .item a {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  padding: 0.08rem;
}
main .item a:nth-of-type(-n + 2) {
  border-bottom: 1px solid rgb(232, 228, 228);
}
main .item a:nth-of-type(odd) {
  border-right: 1px solid rgb(232, 228, 228);
}
main .item a div {
  grid-column: 1 / span 2;
  place-self: end start;
}
main .item a div span:nth-of-type(1) {
  color: black;
  font-size: medium;
  font-weight: bold;
  padding-left: 0.08rem;
}
main .item a div span:last-of-type {
  background-color: #ff5000;
  color: white;
  font-size: smaller;
}
main .item a:nth-of-type(2) div span:last-of-type {
  background-color: rgb(255, 66, 0);
}
main .item a:nth-of-type(3) div span:last-of-type {
  background-color: rgb(0, 144, 234);
}
main .item a:nth-of-type(4) div span:last-of-type {
  background-color: rgb(255, 151, 17);
}
main .product {
  margin-bottom: 0.6rem;
}
main .product ul {
  margin-top: 0.08rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.08rem;
}
main .product ul li img {
  border-radius: 0.1rem 0.1rem 0 0;
}
main .product ul li div {
  background-color: white;
  border-radius: 0 0 0.1rem 0.1rem;
  padding: 0.08rem;
}
main .product ul li div div span:first-of-type {
  color: #ff5500;
  font-size: 0.14rem;
}
main .product ul li div div span:last-of-type {
  color: #999999;
  font-size: 0.11rem;
}

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Markdown语法和emmet语法

2022-07-02 10:20:44