search

博客列表 >10.31日作业

10.31日作业

子墨吖ฅฅ
子墨吖ฅฅ原创
2022年11月01日 11:23:25340浏览
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body{
  6.     background-color: lightpink;
  7.     min-height: 2000px;
  8. }
  10. /*清除列表默认样式*/
  11. li{
  12.     list-style: none;
  13. }
  14. /*顶部导航样式*/
  15. header .nav-bg {
  16.     background-color: #f4f4f4;
  17.     height: 34px;
  18.     display: grid;
  19. }
  20. header .nav-bg .nav{
  21.     width: 1200px;
  22.     margin: auto;
  23.     display: grid;
  24.     grid-template-columns: repeat(2,1fr);
  25.     background-color: #f4f4f4;
  26.     place-content: space-around;
  27.     gap:180px;
  28. }
  29. header .nav-bg .nav .nav-left{
  30.     display: flex;
  31.     place-content: space-between;
  32.     font-size: 14px;
  33. }
  34. header .nav-bg .nav .nav-right{
  35.     display: flex;
  36.     place-content: space-between;
  37.     font-size: 14px;
  38. }
  39. /*快速入口样式*/
  40. header .nav-ksrk{
  41.     width: 1200px;
  42.     height: 100px;
  43.     display: grid;
  44.     grid-template-columns: 80px repeat(5,1fr);
  45.     gap: 10px;
  46.     margin:10px auto;
  47. }
  49. header .nav-ksrk .item{
  50.     background-color: red;
  51.     border-radius:10px;
  52. }
  54. /*主体部分样式*/
  55. main .search-nav{
  56.     width: 1200px;
  57.     height: 100px;
  58.     display: grid;
  59.     grid-template-columns: 1100px 100px;
  60.     margin:auto;
  61.     margin-top: 10px;
  62.     background-color: #f4f4f4;
  63. }
  64. main .search-nav .erweima img{
  65.     width: 75px;
  66. }
  67. main .search-nav section{
  68.     display: grid;
  69.     grid-template-columns:200px 900px;
  70.     place-items: center;
  71. }
  72. main .search-nav section .search{
  73.     width: 700px;
  74.     height: 30px;
  75.     border: 2px solid #f40;
  76.     border-radius: 40px;
  77.     display: grid;
  78.     grid-template-columns: 50px 550px 100px;
  79.     place-items: center;
  80. }
  81. main .search-nav section .search span:first-of-type{
  82.     border-right: 1px solid;
  83. }
  84. main .search-nav section .search span:first-of-type + span{
  85.    place-self: center start;
  86.    color: #9b9b9b;
  87. }
  88. main .search-nav section .search span:last-of-type{
  89.     place-self: center end  ;
  90.     font-size: 18px;
  91.     font-weight: 700;
  92.     cursor: pointer;
  93.     border-radius: 30px;
  94.     padding:3px 20px;
  95.     color: #f4f4f4;
  96.     background-color: #ff4400;
  97. }
  99. .navs section{
  100.     width: 1200px;
  101.     height: 450px;
  102.     background-color: #f4f4f4;
  103.     margin: auto;
  104.     display: grid;
  105.     grid-template-columns: 350px 850px;
  106. }
  107. .navs .navs-left div{
  108.     width: 320px;
  109.     height: 440px;
  110.     background-color: #9b9b9b;
  111.     border-radius: 10px;
  112.     margin: auto;
  113. }
  114. .navs .navs-right{
  115.     display: grid;
  116.     grid-template-columns:540px 300px;
  117.     grid-template-rows:50px 400px;
  118. }
  119. .navs .navs-right div:first-of-type{
  120.     width: 800px;
  121.     height: 40px;
  122.     border-radius: 10px;
  123.     grid-column: span 2;
  124.     margin: auto;
  125. }
  126. .navs .navs-right div:first-of-type + div{
  127.     width: 530px;
  128.     height: 380px;
  129.     border-radius: 10px;
  130.     margin: auto;
  131. }
  132. .navs .navs-right div:last-of-type{
  133.     width: 270px;
  134.     height: 380px;
  135.     border-radius: 10px;
  136.     margin: auto;
  137. }
  139. main .title {
  140.     width: 1200px;
  141.     background-color: lightcyan;
  142.     display: flex;
  143.     place-items: center;
  144.     margin: auto;
  145. }
  147. main .title .tag {
  148.     background: linear-gradient(to left, orangered, orange);
  149.     color: white;
  150.     border-radius: 5px;
  151.     padding: 0 5px;
  152.     margin-left: 6px;
  153.     cursor: default;
  154. }
  156. main .list {
  157.     width: 1200px;
  158.     margin: 0 auto;
  159.     display: grid;
  160.     grid-template-columns: repeat(3, 1fr);
  161.     grid-auto-rows: 172px;
  162.     gap: 10px;
  163. }
  164. main .list > .item {
  165.     background-color: lightcyan;
  166.     border-radius: 6px;
  168.     display: grid;
  169.     grid-template-columns: 150px 1fr;
  170.     gap: 10px;
  171.     padding: 10px;
  172. }
  174. main .list > .item > * {
  175.     background-color: wheat;
  176.     border-radius: 6px;
  177. }
  179. main .list > .item img {
  180.     width: 100%;
  181.     border-radius: 6px;
  182. }
  184. main .list .item .detail {
  185.     display: grid;
  186.     grid-template-rows: 1fr 25px;
  188.     padding: 10px;
  189.     place-content: space-between;
  190. }
  192. main .list .item .detail > * {
  193.     background-color: aqua;
  194. }
  195. main .right{
  196.     position: fixed;
  197.     top: 40%;
  198.     right:0;
  199. }
  201. main .right div{
  202.     width: 50px;
  203.     height: 300px;
  204.     background-color:green;
  205. }
  207. footer{
  208.     width: 1200px;
  209.     height: 300px;
  210.     background-color: red;
  211.     margin: auto;
  212. }
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>淘宝pc端布局</title>
  9.     <link rel="stylesheet" href="index.css">
  10. </head>
  11. <body>
  12.         <header>
  13.             <div class="nav-bg">
  14.                 <div class="nav">
  15.                     <ul class="nav-left">
  16.                         <li>中国大陆</li>
  17.                         <li>亲，请登录</li>
  18.                         <li>免费注册</li>
  19.                         <li>手机逛淘宝</li>
  20.                         <li>网页无障碍</li>
  21.                     </ul>
  22.                     <ul class="nav-right">
  23.                         <li>我的淘宝</li>
  24.                         <li>购物车</li>
  25.                         <li>收藏夹</li>
  26.                         <li>商品分类</li>
  27.                         <li>免费开店</li>
  28.                         <li>千牛卖家中心</li>
  29.                         <li>联系客服</li>
  30.                     </ul>
  31.                 </div>
  32.             </div>
  33.             <!--快速入口-->
  34.             <div class="nav-ksrk">
  35.                 <div class="item"></div>
  36.                 <div class="item"></div>
  37.                 <div class="item"></div>
  38.                 <div class="item"></div>
  39.                 <div class="item"></div>
  40.                 <div class="item"></div>
  41.             </div>
  42.         </header>
  43.         <!--主体部分-->
  44.         <main>
  45.         <!--搜索框-->
  46.         <div class="search-nav">
  47.            <section>
  48.                 <div class="logo">
  49.                     <img src="https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png" alt="">
  50.                 </div>
  51.                 <div class="item">
  52.                     <div class="search">
  53.                         <span>宝贝</span>
  54.                         <span>输入搜索内容</span>
  55.                         <span>搜索</span>
  56.                     </div>
  57.                 </div>
  58.            </section>
  59.                 <div class="erweima">
  60.                     <span>下载淘宝</span>
  61.                     <img src="//gw.alicdn.com/imgextra/i4/O1CN01GZ8Gm51DHyo7asI5m_!!6000000000192-2-tps-160-160.png" alt="">
  62.                 </div>
  63.         </div>
  65.         <div class="navs">
  66.             <section>
  67.                 <div class="navs-left">
  68.                     <div>分类</div>
  69.                 </div>
  70.                 <div class="navs-right">
  71.                     <div style="background-color: green">顶部导航</div>
  72.                     <div style="background-color: red">轮播图</div>
  73.                     <div style="background-color: yellow">用户管理</div>
  74.                 </div>
  75.             </section>
  76.         </div>
  77.             <div class="title">
  78.                 <h2>猜你喜欢</h2>
  79.                 <div class="tag">个性推荐</div>
  80.             </div>
  82.             <div class="list">
  83.                 <div class="item">
  84.                     <a href=""><img src="" alt="" /></a>
  85.                     <div class="detail">
  86.                         <div class="desc">商品描述商品描述商品描述商品描述</div>
  87.                         <div class="price">159</div>
  88.                     </div>
  89.                 </div>
  90.                 <div class="item">
  91.                     <a href=""><img src="" alt="" /></a>
  92.                     <div class="detail">
  93.                         <div class="desc">商品描述商品描述商品描述商品描述</div>
  94.                         <div class="price">159</div>
  95.                     </div>
  96.                 </div>
  97.                 <div class="item">
  98.                     <a href=""><img src="" alt="" /></a>
  99.                     <div class="detail">
  100.                         <div class="desc">商品描述商品描述商品描述商品描述</div>
  101.                         <div class="price">159</div>
  102.                     </div>
  103.                 </div>
  104.             </div>
  106.             <div class="right">
  107.                 <div>固定导航</div>
  108.             </div>
  109.         </main>
  110.         <!--底部-->
  111.         <footer>
  112.             底部
  113.         </footer>
  114. </body>
  115. </html>

运行效果图

上一条：企业为什么要开发进销存系统？下一条：隐式网格, 对齐方式与行列间隙的设置方式与使用场景、前提
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多