search

博客列表 >编写淘宝网PC端首页布局框架

编写淘宝网PC端首页布局框架

手机用户1580651468
手机用户1580651468原创
2022年11月03日 13:25:33776浏览

编写淘宝网PC端首页布局框架

一. 使用Grid / Flex , 编写淘宝网PC端首页布局

  1.   淘宝PC端首页的分析：首先可分为三块：
  2. 1.头部：头部可分为顶部导航和快速入口。
  3. 2.主体：搜索框、导航区和商品列表
  4.      1）搜索框可分为logo、搜素框和图标。
  5.      2）导航区可分为左侧分类、左侧轮播图和标题区
  6. 3.尾部：各种第三方信息

一）要实现pc端的页眉的关键代码可分为html代码和css代码

1.pc端头部的html代码

  1.      <header>
  2.    <!-- 一）.头部 -->
  3.       <!-- 1.顶部导航 -->
  4.       <div class="top">
  5.         <div class="content"></div>
  6.       </div>
  7.       <!-- 2.快速入口 -->
  8.       <div class="entry">
  9.         <div class="content">
  10.           <div class="item logo"></div>
  11.           <div class="item"></div>
  12.           <div class="item"></div>
  13.           <div class="item"></div>
  14.           <div class="item"></div>
  15.           <div class="item"></div>
  16.         </div>
  17.         </header>

2.pc端头部的css代码

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. body {
  7.   min-height: 2000px;
  8. }
  10. /* 头部导航 */
  11. .wrap header .top {
  12.   width: 100vw;
  13.   height: 36px;
  14.   background-color: yellow;
  15. }
  17. .wrap header .top .content {
  18.   width: 1190px;
  19.   height: inherit;
  20.   background-color: wheat;
  21.   margin: auto;
  22. }
  24. /* 头部：快速入口 */
  25. .wrap header .entry {
  26.   height: 100px;
  27.   padding: 15px;
  28.   background-color: #ccc;
  29. }
  30. .wrap header .entry .content {
  31.   width: 1190px;
  32.   min-width: 940px;
  33.   height: inherit;
  34.   background-color: lawngreen;
  35.   margin: auto;
  36.   display: grid;
  37.   grid-template-columns: 80px repeat(5, 1fr);
  38.   grid-auto-rows: 80px;
  39.   gap: 10px;
  40.   padding: 10px;
  41. }
  42. .wrap header .entry .content .item {
  43.   background-color: aqua;
  44.   border-radius: 15px;
  45. }

2.pc端头部运行的效果图

二）要实现pc端的主体的关键代码可分为html代码和css代码

1.pc端主体的html代码

  1. <!-- 主体 -->
  2.         <main>
  3.           <!-- 1.搜素框 -->
  4.           <div class="search">
  5.             <div class="item logo"></div>
  6.             <div class="item input"></div>
  7.             <div class="item ewm"></div>
  8.           </div>
  9.           <!-- 2.导航区 -->
  10.           <div class="navs">
  11.             <!-- 1)左侧分类 -->
  12.               <div class="cate"></div>
  13.               <!-- 2）在侧轮播图与用户信息 -->
  14.               <div class="user">
  15.                     <!-- 1.1顶部导航 -->
  16.                     <div class="user-top"></div>
  17.                     <!-- 1.2左侧轮播 -->
  18.                     <div class="slider"></div>
  19.                     <!-- 右侧用户信息 -->
  20.                     <div class="user-info"></div>
  21.               </div>
  22.           </div>
  23.               <!-- 3标题区 -->
  24.               <div class="title">
  25.                 <h2>猜你喜欢</h2>
  26.                 <div class="tag">个性推荐</div>
  27.               </div>
  28.               <!-- 3.商品列表 -->
  29.               <div class="list">
  30.                 <div class="item">
  31.                   <a href="">
  32.                     <img src="images/items1/item2.jpg" alt=""></a>
  33.                     <div class="detail">
  34.                       <div class="desc">打底裤子女士秋冬季加绒加厚内穿</div>
  35.                       <div class="price">
  36.                       <span class="iconfont icon-renminbi_o">9</span>
  37.                         </div>
  38.                     </div>
  39.                 </div>
  40.                 -----------------------
  41.                 中间有很多个商品这里省略
  42.                 -------------------------
  44.         </main>

2.pc端主体的css代码

  1. /* ------------------ */
  2. /* 主体 */
  3. .wrap main {
  4.   max-width: 1190px;
  5.   min-width: 940px;
  6.   height: 1800px;
  7.   background-color: lightgreen;
  8.   margin: auto;
  9.   padding: 20px;
  10. }
  12. /* 搜素框 */
  13. .wrap main .search {
  14.   height: 88px;
  15.   display: grid;
  16.   grid-template-columns: 190px 1fr 90px;
  17.   gap: 10px;
  18.   /* 粘性定位 */
  19.   position: sticky;
  20.   top: 0;
  21. }
  23. .wrap main .search .item {
  24.   background-color: lightcoral;
  25. }
  27. /* 主体导航区 */
  28. main .navs {
  29.   height: 423px;
  30.   margin: 20px 0;
  31.   display: grid;
  32.   grid-template-columns: 270px 1fr;
  33.   gap: 10px;
  34. }
  35. main .navs > * {
  36.   background-color: rgb(20, 20, 81);
  37. }
  38. main .navs > .user {
  39.   display: grid;
  40.   grid-template-columns: 564px 1fr;
  41.   grid-template-rows: 42px 1fr;
  42.   gap: 10px;
  43. }
  44. main .navs > .user > * {
  45.   background-color: lightcyan;
  46. }
  48. main .navs > .user .user-top {
  49.   grid-column: span 2;
  50. }
  51. main .title {
  52.   background-color: lightgoldenrodyellow;
  53.   display: flex;
  54.   place-items: center;
  55. }
  56. main .title .tag {
  57.   background: linear-gradient(to left, orangered, yellow);
  58. }
  60. /* 主体：商品列表 */
  61. main .list {
  62.   margin: 20px;
  63.   display: grid;
  64.   grid-template-columns: repeat(3, 1fr);
  65.   grid-auto-rows: 172px;
  66.   gap: 10px;
  67. }
  68. main .list > .item {
  69.   background-color: lightcyan;
  70.   border-radius: 6px;
  71.   display: grid;
  72.   grid-template-columns: 150px 1fr;
  73.   gap: 10px;
  74.   padding: 10px;
  75. }
  76. main .list > .item > * {
  77.   background-color: wheat;
  78.   border-radius: 6px;
  79. }
  80. main .list > .item img {
  81.   width: 100%;
  82.   border-radius: 6px;
  83. }
  85. main .list .item .detail {
  86.   display: grid;
  87.   grid-template-columns: 1fr 25px;
  88.   padding: 10px;
  89.   place-content: space-between;
  90. }
  91. main .list .item .detail > * {
  92.   background-color: lightgreen;
  93. }

3.pc端主体的媒体查询和运行效果图

  1. /* 媒体查询 */
  2. @media (max-width: 940px) {
  3.   .wrap header .entry .content {
  4.     grid-template-columns: 80px repeat(4, 1fr);
  5.   }
  7.   main .list {
  8.     grid-template-columns: repeat(2, 1fr);
  9.   }
  10.   main .navs {
  11.     grid-template-columns: 1fr;
  12.   }
  13.   main .navs .cate {
  14.     display: none;
  15.   }
  16. }


二. (可选) 淘宝移动端首页的主导航和商品列表

  1. 淘宝移动端首页的分析：首先可分为三块：
  2. 1.页眉：页眉可分为logo、搜素框和签到图标。
  3. 2.主体：可分为导航、快速入口和商品列表。
  4. 3.页脚：可分为淘宝图标、购物车和我的淘宝。

一）要实现页眉的关键代码可分为html代码和css代码

1.页眉的html代码

  1.  <!-- 页眉 -->
  2.     <header>
  3.       <!-- 1.logo -->
  4.       <a class="logo" href="https://m.taobao.com">
  5.         <img src="images/taobao.png" alt="" />
  6.       </a>
  7.       <!-- 2.搜索框 -->
  8.       <a href="" class="search">
  9.         <span>寻找宝贝店铺</span>
  10.         <span>搜素</span>
  11.       </a>
  12.       <!-- 3.签到图标 -->
  13.       <a href="" class="iconfont icon-qiandao-xuanzhong"></a>
  14.     </header>

2.页眉的html代码

  1. /* 页眉布局 */
  2. header {
  3.   /* grid */
  4.   display: grid;
  5.   /* 1行3列 */
  6.   grid-template-columns: 0.58rem 1fr 0.33rem;
  7.   grid-auto-rows: 0.5rem;
  8.   place-items: center;
  9.   gap: 0.1rem;
  10. }
  11. header a.logo {
  12.   padding-left: 0.1rem;
  13. }
  14. header > a.search {
  15.   width: 100%;
  16.   border: 2px solid #ff5000;
  17.   height: 0.35rem;
  18.   border-radius: 0.3rem;
  19.   display: flex;
  20.   place-content: space-between;
  21.   place-items: center;
  22. }
  23. header > a.search > span:first-of-type {
  24.   padding-left: 0rem;
  25. }
  26. header > a.search > span:last-of-type {
  27.   background: linear-gradient(to left, #ff5000, #ffc000);
  28.   color: white;
  29.   padding: 0.06rem 0.2rem;
  30.   border-radius: 0.3rem;
  31.   margin-right: 0.01rem;
  32. }
  33. header > a.iconfont {
  34.   color: #ff5000;
  35.   font-size: large;
  36. }

2.页眉的实现的效果图

二）要实现主体的关键代码可分为html代码和css代码

1.主体的html代码

  1.     <!-- 主体 -->
  2.     <main>
  3.     <!-- 1. 顶部导航 -->
  4.     <ul class="navs">
  5.   <li class="item">
  6.   <a href=""><img src="images/navs/tmxb.webp" alt=""/></a>
  7.   <a href="">天猫新品</a>
  8.    </li>
  9.    /---------------/
  10.    //中间多个li的标签//
  11.    /---------------/
  12.     <li class="item">
  13.    <a href=""><img src="images/navs/fl.webp" alt="" /></a>
  14.     <a href="">分类</a>
  15.     </li>
  16.     </ul>
  18.  <!-- 2. 快速入口 -->
  20. <ul class="entry">
  21. <li class="item">
  22. <div class="title">
  23.   <h3>聚划算</h3>
  24.   <span>品牌折扣</span>
  25. </div>
  26. <a href=""><img src="images/items/item-1.webp" alt="" /></a>
  27.  <a href=""><img src="images/items/item-2.webp" alt="" /></a>
  28.  </li>
  29.     /---------------/
  30.    //中间多个li的标签//
  31.    /---------------/
  32.  <li class="item">
  33.   <div class="title">
  34.    <h3>每日好店</h3>
  35.    <span style="background-color: orange">特色</span>
  36.     </div>
  37. <a href=""><img src="images/items/item-7.webp" alt="" /></a>
  38. <a href=""><img src="images/items/item-8.webp" alt="" /></a>
  39.  </li>
  40. </ul>
  42.       <!-- 3. 商品列表 -->
  43.       <ul class="list">
  44.         <li class="item">
  45.           <!-- 图片 -->
  46.           <a href=""><img src="images/items/item-9.webp" alt="" /></a>
  47.           <!-- 描述 -->
  48.           <div class="desc">
  49.             <a href="">商品简介商品简介商品简介商品简介商品简介</a>
  50.             <div class="price">
  51.               <span class="iconfont icon-renminbi_o">14.9</span>
  52.             </div>
  53.           </div>
  54.         </li>
  55.    /---------------/
  56.    //中间多个li的标签//
  57.    /---------------/
  58.         <li class="item">
  59.           <a href=""><img src="images/items/item-22.webp" alt="" /></a>
  60.           <div class="desc">
  61.             <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  62.             <div class="price">
  63.               <span class="iconfont icon-renminbi_o">288</span>
  64.               <span>123人已购买</span>
  65.             </div>
  66.           </div>
  67.         </li>
  68.       </ul>
  69.     </main>

1.主体的css代码

  1. /* 主体样式 */
  3. main {
  4.   min-height: 2000px;
  5.   overflow: hidden;
  6. }
  7. /* 主体顶部导航 */
  8. main .navs,
  9. main .entry,
  10. main .list > .item {
  11.   background-color: #fff;
  12.   border-radius: 0.1rem;
  13.   margin-top: 0.08rem;
  14. }
  16. /* 1.导航区 */
  17. main .navs {
  18.   display: grid;
  19.   /* 5列等比例  */
  20.   grid-template-columns: repeat(5, 1fr);
  21.   gap: 0 0.1rem;
  22. }
  23. main .navs .item {
  24.   display: grid;
  25.   place-items: center;
  26. }
  28. /* 2.快速入口 */
  29. main .entry {
  30.   display: grid;
  31.   grid-template-columns: repeat(2, 1fr);
  32.   padding: 0.1rem;
  33. }
  34. main .entry .item {
  35.   display: grid;
  36.   grid-template-columns: repeat(2, 1fr);
  37.   padding: 0.1rem;
  38. }
  39. main .entry .item .title {
  40.   grid-column: span 2;
  41.   display: flex;
  42.   place-items: center;
  43. }
  44. main .entry .item:nth-of-type(-n + 2) {
  45.   border-bottom: 1px solid #dedede;
  46. }
  47. main .entry .item .title span {
  48.   background-color: #ff5000;
  49.   color: white;
  50.   border-radius: 0.05rem;
  51.   font-size: smaller;
  52.   padding: 0 0.03rem;
  53.   margin-left: 0.05rem;
  54. }
  55. /* 3.商品列表 */
  56. main .list {
  57.   display: grid;
  58.   /* 2列等比例  */
  59.   grid-template-columns: repeat(2, 1fr);
  60.   padding: 0.1rem;
  61. }
  63. /* 商品图片的圆角 */
  64. main .list .item img {
  65.   /* 上 右 下 左 */
  66.   border-radius: 0.1rem 0.1rem 0 0;
  67. }
  68. /* 商品描述的细节 */
  69. main .list .item desc {
  70.   padding: 0.1rem;
  71.   font-size: smaller;
  72. }
  73. /* 价格 */
  74. main .list,
  75. item .price .iconfont {
  76.   color: #ff5000;
  77. }
  78. main .list .item .price span:last-of-type {
  79.   color: #bbb;
  80.   font-style: x-small;
  81. }

3.主体实现的效果图

三）要实现页脚的关键代码可分为html代码和css代码

1.页脚的html代码

  1.  <footer>
  2.       <a href="m.taobao.com" class="iconfont icon-taobao"></a>
  3.       <a href="">
  4.         <span class="iconfont icon-gouwuche"></span>
  5.         <span>购物车</span>
  6.       </a>
  7.       <a href="">
  8.         <span class="iconfont icon-wode"></span>
  9.         <span>我的淘宝</span>
  10.       </a>
  11.     </footer>

2.页脚的css代码

  1. /* 页脚 */
  2. footer {
  3.   border-top: 1px solid #ccc;
  4.   display: grid;
  5.   grid-template-columns: repeat(3, 1fr);
  6.   /* 水平分散对齐 */
  7.   place-content: space-around;
  8.   place-items: center;
  9.   font-size: smaller;
  10. }
  11. footer > a {
  12.   display: grid;
  13.   place-items: center;
  14. }
  16. footer > a:first-of-type {
  17.   color: #ff5500;
  18.   font-size: 0.35rem;
  19. }
  21. footer > a:first-of-type + a > span.iconfont {
  22.   font-size: x-large;
  23. }

3.页脚实现的效果图

上一条：11.2日作业下一条：linux（本文为AlibabaLinux）上 ，pbootcms（ueditor上传视频） ：php使用FFMpeg获取视频第一帧为缩略图方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多