search

博客列表 >唯品会首页部分页面模仿

唯品会首页部分页面模仿

xsrsblog
xsrsblog原创
2020年06月28日 12:49:473404浏览

模仿了首页大部分呈现

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <link rel="stylesheet" href="font/iconfont.css" />
  8.     <link rel="stylesheet" href="css/common.css" />
  9.     <link rel="stylesheet" href="css/index.css" />
  11.     <script>
  12.       window.onload = function () {
  13.         let itemclassify = document.querySelector(".itemclassify");
  14.         // console.log(itemclassify.innerHTML);
  15.         itemclassify.addEventListener("mouseover", showList);
  16.         itemclassify.addEventListener("mouseout", hideList);
  17.         function showList(ev) {
  18.           if (
  19.             ev.target.nodeName == "SPAN" &&
  20.             ev.target.nextElementSibling.nodeName == "UL"
  21.           ) {
  22.             //判断触发事件的对象是否为A标签的兄弟标签ul
  23.             ev.target.nextElementSibling.style.display = "block";
  24.           }
  25.         }
  26.         function hideList(ev) {
  27.           if (
  28.             ev.target.nodeName == "SPAN" &&
  29.             ev.target.nextElementSibling.nodeName == "UL"
  30.           ) {
  31.             //判断触发事件的对象是否为A标签的兄弟标签ul
  32.             ev.target.nextElementSibling.style.display = "none";
  33.           }
  34.         }
  36.         let leftSideBar = document.querySelector(".leftSideBar");
  37.         let ht = document.documentElement;
  38.         console.log(ht.scrollTop);
  39.         document.body.addEventListener("scroll", showMM);
  40.         window.addEventListener("load", showMM);
  41.         function showMM() {
  42.           console.log(document.body.scrollTop);
  43.           if (document.body.scrollTop >= 400) {
  44.             leftSideBar.style.display = "block";
  45.           } else {
  46.             leftSideBar.style.display = "none";
  47.           }
  48.         }
  49.       };
  50.     </script>
  51.   </head>
  52.   <body>
  53.     <header>
  54.       <div class="flexDis flexJContentSb container flexAlignItemsC">
  55.         <div>
  56.           <span>xx市</span>  
  58.           <span class="iconfont icon-xiala iconS"></span>
  59.         </div>
  60.         <div class="flexDis">
  61.           <div>
  62.             <span>请登入</span>
  63.           </div>
  64.           <div>
  65.             <span>注册</span>
  66.           </div>
  67.           <div>
  68.             <span>签到有礼</span>
  69.           </div>
  70.           <div>
  71.             <span>我的订单</span>
  72.           </div>
  73.           <div>
  74.             <span>我的特卖</span>
  75.             <span class="iconfont icon-xiala iconS"></span>
  76.           </div>
  77.           <div>
  78.             <span>会员俱乐部</span>
  79.             <span class="iconfont icon-xiala iconS"></span>
  80.           </div>
  81.           <div>
  82.             <span>客户服务</span>
  83.             <span class="iconfont icon-xiala iconS"></span>
  84.           </div>
  85.           <div>
  86.             <span class="iconfont icon-shouji"></span>
  87.             <span>手机版</span>
  88.           </div>
  89.           <div>
  90.             <span>更多</span>
  91.             <span class="iconfont icon-xiala iconS"></span>
  92.           </div>
  93.         </div>
  94.       </div>
  95.     </header>
  97.     <section class="sectcon1 flexDis container flexAlignItemsC flexJContentSb">
  98.       <div><img src="pic/vip_logo.jpg" alt="" /></div>
  99.       <div class="flexDis flexJContentSb" style="width: 300px;">
  100.         <a href="#">
  101.           <span class="iconfont icon-anquan"></span>
  102.           <span>100%正品</span>
  103.         </a>
  104.         <a href="#">
  105.           <span class="iconfont icon-smile"></span>
  106.           <span>88元免邮</span>
  107.         </a>
  108.         <a href="#">
  109.           <span class="iconfont icon-tianmaoqitiantuihuo"></span>
  110.           <span>退换无忧</span>
  111.         </a>
  112.       </div>
  113.       <div>
  114.         <div>
  115.           <input type="text" value="" name="search" class="search_input" /><a
  116.             href="#"
  117.             class="search_a"
  118.           >
  119.             <span class="iconfont icon-sousuo iconse"></span
  120.           ></a>
  121.         </div>
  122.         <div
  123.           class="hot-search flexDis flexJContentSb"
  124.           style="color: gray; font-size: 0.8em;"
  125.         >
  126.           <span>连衣裙</span>| <span>护肤套装</span>| <span>耐克nike</span>|
  127.           <span>女士T恤</span>| <span>女士休闲裤</span>|
  128.           <span>手机</span>
  129.         </div>
  130.       </div>
  131.       <div class="spackage">
  132.         <span class="iconfont icon-gouwudai gggwdsize"></span>
  133.         <span>购物袋</span>
  134.         <span class="spackagenum">0</span>
  135.       </div>
  136.     </section>
  138.     <nav class="flexDis container flexJContentSb flexAlignItemsC">
  139.       <div class="itemclassify">
  140.         <span class="iconfont icon-fenlei"></span>
  141.         <span>商品分类</span>
  142.         <ul class="itemclassifyList">
  143.           <li>女装/男装/内衣</li>
  144.           <li>女鞋/男鞋/箱包</li>
  145.           <li>运动户外</li>
  146.           <li>家电数码</li>
  147.           <li>居家用品</li>
  148.           <li>母婴童装</li>
  149.           <li>手表配饰</li>
  150.         </ul>
  151.       </div>
  152.       <div
  153.         class="flexDis flexJContentSb"
  154.         style="width: 800px; font-size: 1.2em;"
  155.       >
  156.         <span>首页</span>
  157.         <span>端午特卖</span>
  158.         <span>最后疯抢</span>
  159.         <span>唯品快抢</span>
  160.         <span>女装</span>
  161.         <span>母婴</span>
  162.         <span>家电</span>
  163.         <span>国际</span>
  164.         <span>美妆</span>
  165.         <span>鞋包</span>
  166.         <span>男装</span>
  167.       </div>
  168.       <div style="font-size: 1.2em;">
  169.         <span>更多</span>
  170.         <span class="iconfont icon-down"></span>
  171.       </div>
  172.     </nav>
  174.     <section class="lunbotu">
  175.       <div class="inner">
  176.         <img src="pic/bac3.jpg" alt="" />
  177.         <img src="pic/bac2.jpg" alt="" />
  179.         <div class="lunboContent flexDis flexJContentSa">
  180.           <span>端午特卖 亿元补贴</span>|
  181.           <span>阿迪达斯VIP大牌日 全场低至2折</span>|
  182.           <span>欧莱雅VIP大牌日 逆时瓶买1享4</span>|
  183.           <span>假期宅家攻略</span>
  184.         </div>
  186.         <div class="before-after flexDis flexJContentSb">
  187.           <span class="iconfont icon-zuo"></span>
  188.           <span class="iconfont icon-xiangyou"></span>
  189.         </div>
  190.       </div>
  191.     </section>
  193.     <div class="rightSideBar">
  194.       <ul class="flexDis flexDirV flexJContentFS">
  195.         <li class="flexDis flexDirV">
  196.           <span class="iconfont icon-sun iconRB"></span>
  197.           <span style="width: 16px;">账号</span>
  198.         </li>
  199.         <li class="flexDis flexDirV">
  200.           <span class="iconfont icon-Handshake iconRB"></span>
  201.           <span style="width: 16px;">购物袋</span>
  202.         </li>
  203.         <li>
  204.           <span class="iconfont icon-smile iconRB"> </span>
  205.         </li>
  206.         <li>
  207.           <span class="iconfont icon-smile iconRB"></span>
  208.         </li>
  209.         <li>
  210.           <span class="iconfont icon-smile iconRB"></span>
  211.         </li>
  212.         <li>
  213.           <span class="iconfont icon-smile iconRB"></span>
  214.         </li>
  215.       </ul>
  216.     </div>
  218.     <div class="leftSideBar">
  219.       <ul class="flexDis  flexDirV">
  220.         <li style="background-color: rgb(241,1,128); border-radius: 2px;">
  221.           精选
  222.         </li>
  223.         <li>
  224.           <span class="iconfont icon-smile"></span>
  225.           <span>女装</span>
  226.         </li>
  227.         <li>
  228.           <span class="iconfont icon-smile"></span>
  229.           <span>鞋包</span>
  230.         </li>
  231.         <li>
  232.           <span class="iconfont icon-smile"></span>
  233.           <span>男装</span>
  234.         </li>
  235.         <li>
  236.           <span class="iconfont icon-smile"></span>
  237.           <span>运动</span>
  238.         </li>
  239.         <li>
  240.           <span class="iconfont icon-smile"></span>
  241.           <span>女装</span>
  242.         </li>
  243.         <li>
  244.           <span class="iconfont icon-smile"></span>
  245.           <span>鞋包</span>
  246.         </li>
  247.         <li>
  248.           <span class="iconfont icon-smile"></span>
  249.           <span>男装</span>
  250.         </li>
  251.         <li>
  252.           <span class="iconfont icon-smile"></span>
  253.           <span>运动</span>
  254.         </li>
  255.         <li>
  256.           <span class="iconfont icon-smile"></span>
  257.           <span>男装</span>
  258.         </li>
  259.         <li>
  260.           <span class="iconfont icon-smile"></span>
  261.           <span>运动</span>
  262.         </li>
  263.       </ul>
  264.     </div>
  266.     <section class="container" style="margin-top: 100px; margin-bottom: 20px;">
  267.       <img src="pic/banner1.jpg" alt="" />
  268.     </section>
  270.     <section class="container" style="width: 100%;">
  271.       <div style="text-align: center; margin: 20px;">
  272.         <img src="pic/banner2.jpg" alt="" />
  273.       </div>
  274.       <div class="flexDis flexJContentC">
  275.         <img src="pic/banner3.jpg" alt="" />
  276.         <img src="pic/banner4.jpg" alt="" />
  277.         <img src="pic/banner5.jpg" alt="" />
  278.       </div>
  279.     </section>
  281.     <footer class="container footerBorder" style="margin-top: 50px;padd">
  282.       <div class="flexDis flexJContentSa">
  283.         <div class="flexDis flexDirV">
  284.           <span class="circle">
  285.             <span class="iconfont icon-anquan circleSize1"></span>
  286.           </span>
  287.           <span style="color: gray; padding: 5px;" >全球领先</span>
  288.         </div>                
  289.         <div class="flexDis flexDirV">
  290.           <span class="circle">
  291.             <span class="iconfont icon-anquan circleSize1"></span>
  292.           </span>
  293.           <span style="color: gray; padding: 5px;" >全球领先</span>
  294.         </div>                
  295.         <div class="flexDis flexDirV">
  296.           <span class="circle">
  297.             <span class="iconfont icon-anquan circleSize1"></span>
  298.           </span>
  299.           <span style="color: gray; padding: 5px;" >全球领先</span>
  300.         </div>                
  301.         <div class="flexDis flexDirV">
  302.           <span class="circle">
  303.             <span class="iconfont icon-anquan circleSize1"></span>
  304.           </span>
  305.           <span style="color: gray; padding: 5px;" >全球领先</span>
  306.         </div>                
  307.         <div class="flexDis flexDirV">
  308.           <span class="circle">
  309.             <span class="iconfont icon-anquan circleSize1"></span>
  310.           </span>
  311.           <span style="color: gray; padding: 5px;" >全球领先</span>
  312.         </div>                
  313.         <div class="flexDis flexDirV">
  314.           <span class="circle">
  315.             <span class="iconfont icon-anquan circleSize1"></span>
  316.           </span>
  317.           <span style="color: gray; padding: 5px;" >全球领先</span>
  318.         </div>                
  319.         <div class="flexDis flexDirV">
  320.           <span class="circle">
  321.             <span class="iconfont icon-anquan circleSize1"></span>
  322.           </span>
  323.           <span style="color: gray; padding: 5px;" >全球领先</span>
  324.         </div>                
  325.         <div class="flexDis flexDirV">
  326.           <span class="circle">
  327.             <span class="iconfont icon-anquan circleSize1"></span>
  328.           </span>
  329.           <span style="color: gray; padding: 5px;" >全球领先</span>
  330.         </div>                
  331.       </div>
  333.       <div class="flexDis flexJContentSe flexAlignItemsC" style="font-size: 10px; margin-top: 20px;">
  334.         <div class="rightBorder">
  335.           <span>服务保障</span>
  336.           <ul>
  337.             <li><a href="">正品保证</a></li>
  338.             <li><a href="">7天无理由放心退</a></li>
  339.             <li><a href="">7x15小时客户服务</a></li>
  340.             <li><a href="">7天无理由随心换</a></li>
  341.             <li><a href=""></a></li>
  342.             <li><a href=""></a></li>
  343.           </ul>
  344.         </div>
  345.         <div class="rightBorder">
  346.           <span>服务保障</span>
  347.           <ul>
  348.             <li><a href="">正品保证</a></li>
  349.             <li><a href="">7天无理由放心退</a></li>
  350.             <li><a href="">7x15小时客户服务</a></li>
  351.             <li><a href="">7天无理由随心换</a></li>
  352.             <li><a href=""></a></li>
  353.             <li><a href=""></a></li>
  354.           </ul>
  355.         </div>
  356.         <div class="rightBorder">
  357.           <span>服务保障</span>
  358.           <ul>
  359.             <li><a href="">正品保证</a></li>
  360.             <li><a href="">7天无理由放心退</a></li>
  361.             <li><a href="">7x15小时客户服务</a></li>
  362.             <li><a href="">7天无理由随心换</a></li>
  363.             <li><a href=""></a></li>
  364.             <li><a href=""></a></li>
  365.           </ul>
  366.         </div>
  367.         <div class="rightBorder"> 
  368.           <span>服务保障</span>
  369.           <ul>
  370.             <li><a href="">正品保证</a></li>
  371.             <li><a href="">7天无理由放心退</a></li>
  372.             <li><a href="">7x15小时客户服务</a></li>
  373.             <li><a href="">7天无理由随心换</a></li>
  374.             <li><a href=""></a></li>
  375.             <li><a href=""></a></li>
  376.           </ul>
  377.         </div>
  378.         <div class="rightBorder">
  379.           <span>服务保障</span>
  380.           <ul>
  381.             <li><a href="">正品保证</a></li>
  382.             <li><a href="">7天无理由放心退</a></li>
  383.             <li><a href="">7x15小时客户服务</a></li>
  384.             <li><a href="">7天无理由随心换</a></li>
  385.             <li><a href=""></a></li>
  386.             <li><a href=""></a></li>
  387.           </ul>
  388.         </div>
  389.         <div class="flexDis flexDirV flexAlignItemsC">
  390.           <span>唯品会APP二维码</span>
  391.           <img src="pic/二维码.JPG" alt="">
  392.           <span>下载唯品会移动APP</span>
  393.         </div>
  395.       </div>
  397.       <div > 
  399.         <div  class="flexDis flexJContentC about" >
  400.           <span>关于我们</span>|
  401.           <span>About Us</span>|
  402.           <span>Investor Relations</span>|
  403.           <span>媒体报道</span>|
  404.           <span>品牌招商</span>|
  405.           <span>隐私条款</span>|
  406.           <span>唯品诚聘</span>|
  407.           <span>唯品卡</span>|
  408.           <span>联系我们</span>
  409.         </div >
  411.         <div class="relativeItem">
  412. <p>Copyright © 2008-2020 vip.com，All Rights Reserved  使用本网站即表示接受 唯品会用户协议。版权所有 广州唯品会电子商务有限公司</p>
  413. <p>粤公网安备 44010302111111号    粤ICP备08114786号 增值业务经营许可证：粤B2-20170777 网络文化经营许可证：粤网文〔2018〕5030-1743号</p>
  414. <p>经营主体证照   风险监测信息   互联网药品信息服务资格证书：（粤）-经营性-2018-0271 网络食品交易第三方平台备案凭证：粤B2-20170777 医疗器械网络交易服务第三方平台备案</p>
  415. <p>凭证：（粤）网械平台备字[2019]第00001号</p>
  417.         </div>
  419.       </div>
  420.     </footer>
  421.   </body>
  422. </html>

CSS代码（首页部分）

  1. header > div > div:nth-child(2) > div {
  2.   /* border: 1px solid green; */
  3.   padding: 0 10px;
  4. }
  5. /* 设置头部背景和字体 */
  6. header {
  7.   height: 30px;
  8.   background-color: lightgray;
  9. }
  11. header > div {
  12.   /* background-color: lightgray; */
  13.   height: 100%;
  14. }
  16. /* 设置搜索框的边框颜色，以及其后图标的背景色 */
  17. .search_input {
  18.   /* background-color: tomato; */
  19.   border: 1px solid tomato;
  20.   /* display: inline-block; */
  21.   height: 45px;
  22.   width: 400px;
  23.   margin: 0;
  24.   font-size: 25px;
  25. }
  27. .search_a {
  28.   display: inline-block;
  29.   border: rgb(241,1,128);
  30.   color: white;
  31.   background-color:rgb(241,1,128);
  32.   height: 45px;
  33.   width: 50px;
  34.   text-align: center;
  35.   vertical-align: top;
  36.   margin: 0;
  37. }
  39. .iconse {
  40.   line-height: 45px;
  41.   font-size: 25px;
  42. }
  44. /* 设置搜索区域 */
  45. .sectcon1 {
  46.   height: 150px;
  47.   /* border: 1px solid red; */
  48. }
  49. /* 设置购物袋 */
  50. .spackage {
  51.   /* margin-left: -100px; */
  52.   border: 1px solid lightgray;
  53.   height: 45px;
  54.   line-height: 40px;
  55.   width: 120px;
  56.   text-align: center;
  57.   border-radius: 5px;
  58.   background-color: lightsteelblue;
  59.   margin-bottom: 20px;
  60. }
  61. .gggwdsize {
  62.   font-size: 25px; */
  63. }
  65. .spackagenum{
  66.     display: inline-block;
  67.     background-color:rgb(241,1,128);
  68.     height: 20px;
  69.     width: 30px;
  70.     border-radius: 5px;
  71.     color: white;
  72.     vertical-align: text-bottom;
  73.     font-size: 20px;
  74.     line-height: 20px;
  75. }
  76. /* 商品分类样式设置 */
  77. .itemclassify{
  79.     background-color: rgb(241,1,128);
  80.     padding: 10px 30px;
  81.     color: white;
  82.     font-size: large;
  83.     position: relative;
  85. }
  86. /* 商品分类下拉列表 */
  87. .itemclassifyList{
  88.   position: absolute;
  89.   top: 40px;
  90.   left: 0;
  91.   z-index: 1;
  92.   display: none;
  94.   ;
  96.   width: 100%;
  98.   background-color: rgb(241,1,128);
  99.   /* display: none; */
  100. }
  102. .itemclassifyList >li{
  103.   text-align: center;
  104.   height: 50px;
  105.   font-size: 15px;
  106.   line-height: 50px;
  107. }
  108. /* 轮播途背景设置 */
  109. .lunbotu{
  110.     background-image: url("pic/bac1.jpg");
  111.     height: 400px;
  112.     width: 100%;
  113.     border: 1px solid white;
  114.     margin: 20px;
  115.     background-color: lightblue;
  116.     background-repeat: no-repeat;
  117.     background-size: cover;
  118. }
  119. /* 轮播图内框设置 ，开启相对定位*/
  120. .inner{
  121.     height: 100%;
  122.     width: 75%;
  123.     background-color: white;
  124.     border-top: 1px solid white;
  125.     background-origin: border-box;
  126.     margin-left:  auto ;
  127.     margin-right: auto;
  128.     margin-top: 35px;
  129.     box-shadow: 0 3px 5px rgba(0,0,0,0.2);
  130.     position:relative
  131.     }
  132. /* 轮播图片设置，开启绝对定位 */
  133.   .inner > img{
  134.     display: block;
  136.     width: 95%;
  137.     height: 88%;
  138.     position: absolute;
  139.     left: 2.5%;
  140.     top: 4%;
  141.   }
  142.   /* 设置轮播图下方的文字 */
  143.   .lunboContent{
  144.     width: 100%;
  145.     position: absolute;
  146.     right: 0;
  147.     bottom: 0;
  149.   }
  150.   .lunboContent > span:nth-child(1){
  151.     border-bottom: rgb(241,1,128) solid 3px;
  152.   }
  153.   .lunboContent > span:hover{
  154.     border-bottom: rgb(241,1,128) solid 3px;
  155.   }
  156. /* 设置轮播图片按钮 */
  157.   .before-after{
  158.     position: absolute;
  159.     top: 40%;
  160.     width: 95%;
  161.     left: 2.5%;
  164.   }
  165.   .before-after  > span{
  166.     font-size: 20px;
  167.     line-height: 50px;
  168.     color: lightgrey;
  169.     height: 50px;
  170.     width: 50px;
  171.     background-color: rgba(17, 15, 15, 0.349);
  172.     text-align: center;
  173.     transition: width 2s;
  176.   }
  177.   .before-after  > span:nth-child(1){
  178.     font-weight: bold;
  179.   }
  180.   .before-after  > span:hover{
  181.     color: white;
  182.     width: 100px;
  183.   }
  184. /* 左侧边栏设置 */
  185.   .leftSideBar{
  186.     display: none;
  187.     position: fixed;
  188.     left: 5px;
  189.     top:200px;
  190.     border: 1px solid lightgray;
  191.     border-radius: 2px;
  192.     box-shadow: 0 5px 5px rgba(0,0,0,0.2);
  193.   }
  195.   .leftSideBar > ul > li{
  196.     text-align: center;
  197.     padding: 5px;border-bottom: 1px solid rgb(161, 159, 159);
  198.     margin: 10px;
  199.     color: gray;
  200.     font-size: 13px;
  201.   }
  203. /* 右侧边栏设置 */
  204.   .rightSideBar{
  205.     position: fixed;
  206.     height: 100%;
  207.     width: 40px;
  208.     /* border: 1px solid red; */
  209.     /* z-index: 1; */
  210.     right: 17px;
  211.     top: 0px;
  212.   }
  213. /* 设置高度为窗口高度 */
  214.   .rightSideBar > ul{
  215.     height: 100%;
  216.   }
  217. /*  */
  218.   .rightSideBar > ul > li{
  219.       /* border: 1px solid red; */
  220.   }
  221.   .rightSideBar > ul > li:nth-child(2){
  222.     height: 25%;
  223.     background-color:red;
  224.     color: white;
  225.     font-size: 25px;
  227.   }
  228.   .rightSideBar > ul > li:nth-child(1){
  229.     height: 20%;
  230.     background-color:black;
  231.     color: white;
  232.     font-size: 25px;
  234.   }
  235.   .rightSideBar > ul > li:nth-child(n+3) {
  236.     height: 15%;
  239.   }
  240.   .rightSideBar > ul > li:nth-child(n+3) > span{
  241.     display: block;
  242.     height: 100%;
  243.     line-height: 100%;
  244.     color: white;
  245.     background-color: black;
  246.     text-align: center;
  247.   }
  248. /* 设置字体图标 */
  249. .iconRB{
  250.   font-size: 25px;
  251. }
  253. /* 页脚设置 */
  256. .circle{
  257.   display: inline-block;
  258.   height: 70px;
  259.   text-align: center;
  260.   border-radius: 50%;
  261.   width: 70px;
  262.   border: rgba(17, 15, 15, 0.349) 1px solid;
  263. }
  264. /* 字体图标外框圆形设置 */
  265. .circleSize1{
  267.   font-size: 40px;
  268.   color: gray;
  269.   line-height: 70px;
  270. }
  272. .rightBorder{
  273.   padding-right: 40px;
  274.   border-right: 1px solid black;
  275.   padding-left: 0px;
  276. }
  277. /* 页脚边框设置 */
  278. .footerBorder{
  279.   /* border: 1px solid red; */
  280.   box-shadow: 0 5px 5px rgba(17, 15, 15, 0.349);
  281. }
  283. .about{
  284.   font-size: 13px;
  285.   margin: 5px auto;
  286.   background-color: rgb(241,1,128);
  287.   color:white;
  288. }
  290. .about >span{
  291.   padding: 2px 5px;
  292. }
  293. .relativeItem{
  294.   padding: 20px;
  296. }
  297. .relativeItem >p{
  298.   margin: 0 auto;
  299.   color: gray;
  300.   font-size: 13px;
  301. }

css代码（公共部分）

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5.   list-style: none;
  6. }
  7. /* 页面宽高设为浏览器窗口的100%，垂直方向滚动 */
  8. html,
  9. body {
  10.   width: 100%;
  11.   height: 100%;
  12.   overflow-x: hidden;
  13.   font-size: 16px;
  14. }
  15. /* 通用容器宽度 */
  16. .container {
  17.   width: 1200px;
  18.   margin: 0 auto;
  20.   /* border: 1px solid red; */
  21. }
  23. /* 清除a标签下划线 */
  24. a {
  25.   color: lightslategrey;
  26.   text-decoration: none;
  27. }
  28. /* 清除button,img的边框和外轮廓线 */
  29. button,
  30. img {
  31.   border: none;
  32.   outline: none;
  33. }
  34. /* 启动弹性盒子 */
  35. .flexDis {
  36.   display: flex;
  37. }
  38. /* 主轴在垂直方向 */
  39. .flexDirV {
  40.   flex-direction: column;
  41. }
  43. .flexJContentFS {
  44.   justify-content: flex-start;
  45. }
  46. .flexJContentC {
  47.   justify-content: center;
  48. }
  50. /* 弹性盒子主轴剩余空间 */
  51. .flexJContentSb {
  52.   justify-content: space-between;
  53. }
  55. .flexJContentSe {
  56.   justify-content: space-evenly;
  57. }
  58. .flexJContentSa {
  59.   justify-content: space-around;
  60. }
  61. /* 弹性盒子辅助轴对齐方式 */
  62. .flexAlignItemsC {
  63.   align-items: center;
  64. }
  65. /* 调整字体图标的颜色和大小 */
  66. .iconS {
  67.   color: grey;
  68.   font-size: 10px;
  69. }

效果：（动态部分实现分类下拉列表和左边导航栏在滚动条滚到指定位置才出现）

上一条：flex学习二：pc端手机端通用解决方案下一条：项目属性: order控制项目顺序
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多