携程静态页面初测试（html+CSS）之自学flex布局（遇到问题该怎么办？）

最新推荐文章于 2022-11-30 23:57:20 发布
学习前端的一只旺财
最新推荐文章于 2022-11-30 23:57:20 发布
阅读量360
点赞数 2
分类专栏：自学html+css flex 固定定位fixed 文章标签： html css
本文链接：https://blog.csdn.net/weixin_46972646/article/details/110744647
版权
自学html+css 同时被 3 个专栏收录
12 篇文章 5 订阅
订阅专栏
flex
1 篇文章 0 订阅
订阅专栏
固定定位fixed
1 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">
<body>
   <div class="search-index">
       <div class="search">搜索:目的地/酒店/景点/航班号</div>

       <div class="user">我 的</div>
   </div>

   <div class="foucs">
       <a href=""> 
           <img src="./upload/focus.jpg" alt="">
       </a>
   </div>

   <ul class="local-nav">
    <li>       <!--  不能直接在li上添加title描述，因为li上添加的只在有字的地方才显示，而效果是在整个部分，因此添加a上的title； -->
        <a href="" title="景点·玩乐">
            <span class="local-nav-icon-icon1"></span>
            </span>景点·玩乐</span>
        </a>
    </li>

    <li>       <!--  不能直接在li上添加title描述，因为li上添加的只在有字的地方才显示，而效果是在整个部分，因此添加a上的title； -->
        <a href="" title="周边·玩乐">
            <span class="local-nav-icon-icon2"></span>
            </span>周边·玩乐</span>
        </a>
    </li>

     <li>       <!--  不能直接在li上添加title描述，因为li上添加的只在有字的地方才显示，而效果是在整个部分，因此添加a上的title； -->
        <a href="" title="美食·吃货">
            <span class="local-nav-icon-icon3"></span>
            </span>美食·吃货</span>
        </a>
    </li>

    <li>       <!--  不能直接在li上添加title描述，因为li上添加的只在有字的地方才显示，而效果是在整个部分，因此添加a上的title； -->
        <a href="" title="周边·一日游">
            <span class="local-nav-icon-icon4"></span>
            </span>周边·一日游</span>
        </a>
    </li>

    <li>       <!--  不能直接在li上添加title描述，因为li上添加的只在有字的地方才显示，而效果是在整个部分，因此添加a上的title； -->
        <a href="" title="附近·景点">
            <span class="local-nav-icon-icon5"></span>
            </span>附近·景点</span>
        </a>
    </li>
   </ul>


    <!-- nav-common 模块 -->
    <div class="nav-common com1">
        <div class="nav-items">
            <a href="">酒店</a>
        </div>
        <div class="nav-items">
            <a href="">海外酒店</a>
            <a href="">特价酒店</a>
        </div>
        <div class="nav-items">
            <a href="">团购</a>
            <a href="">民宿·客栈</a>
        </div>
    </div>

    <div class="nav-common com2">
        <div class="nav-items">
            <a href="">机票</a>
        </div>
        <div class="nav-items">
            <a href="">火车票</a>
            <a href="">特价机票</a>
        </div>
        <div class="nav-items">
            <a href="">汽车票·船票</a>
            <a href="">专车·租车</a>
        </div>
    </div>

    <div class="nav-common com3">
        <div class="nav-items">
            <a href="">旅游</a>
        </div>
        <div class="nav-items">
            <a href="">门票</a>
            <a href="">目的地攻略</a>
        </div>
        <div class="nav-items">
            <a href="">邮轮旅行</a>
            <a href="">定制旅行</a>
        </div>
    </div>

   <!--  subnav-entry 模块 -->
    <ul class="subnav-entry">
        <li> <!-- 因为li整体可以点，所以外应该有个a -->
            <a href="">    
                 <span class="subnav-entry-icon1"></span>
                 <span>WIFI</span>
            </a>
        </li>

        <!-- 一个a内有两个span，总结方法如何放精灵图？
                1.用span分隔的，有明显特征即为引用后的图片f12可以单独查看
                2.-->
        <li> <!-- 因为li整体可以点，所以外应该有个a -->
            <a href="">    
                 <span class="subnav-entry-icon2"></span>
                 <span>安全卫士</span>
            </a>
        </li>
        <li> <!-- 因为li整体可以点，所以外应该有个a -->
            <a href="">    
                 <span class="subnav-entry-icon3"></span>
                 <span>电话费</span>
            </a>
        </li>
        <li> <!-- 因为li整体可以点，所以外应该有个a -->
            <a href="">    
                 <span class="subnav-entry-icon4"></span>
                 <span>帽子</span>
            </a>
        </li>
        <li> <!-- 因为li整体可以点，所以外应该有个a -->
            <a href="">    
                 <span class="subnav-entry-icon5"></span>
                 <span>礼物~</span>
            </a>
        </li>
        <li> <!-- 因为li整体可以点，所以外应该有个a -->
            <a href="">    
                 <span class="subnav-entry-icon6"></span>
                 <span>没看出来~</span>
            </a>
        </li>
        <li> <!-- 因为li整体可以点，所以外应该有个a -->
            <a href="">    
                 <span class="subnav-entry-icon7"></span>
                 <span>巴黎铁塔</span>
            </a>
        </li>
        <li> <!-- 因为li整体可以点，所以外应该有个a -->
            <a href="">    
                 <span class="subnav-entry-icon8"></span>
                 <span>话费卡</span>
            </a>
        </li>
        <li> <!-- 因为li整体可以点，所以外应该有个a -->
            <a href="">    
                 <span class="subnav-entry-icon9"></span>
                 <span>握手~</span>
            </a>
        </li>
        <li> <!-- 因为li整体可以点，所以外应该有个a -->
            <a href="">    
                 <span class="subnav-entry-icon10"></span>
                 <span>应用</span>
            </a>
        </li>
        
    </ul>

<!-- sales-box 销售模块 -->
<div class="sales-box">
        <div class="sales-box-hd">
            <h2>热门活动</h2> <!-- 这里必须有字将其撑开（高度），css进行的操作只是将文字隐藏，文字还在原来的位置 ，否则定位失效-->
            <a href="">获取更多福利</a>
        </div>

        <div class="sales-box-by">
            <!-- 这里的结构用a包裹img比全部div套div效果好，因为效果图img整体变成小手了 -->
                <a href="">             
                    <img src="./upload/pic1.jpg" alt="">
                </a>
                <a href="">             
                    <img src="./upload/pic2.jpg" alt="">
                </a>
         </div>

         <div class="sales-box-by">
            <!-- 这里的结构用a包裹img比全部div套div效果好，因为效果图img整体变成小手了 -->
                <a href="">             
                    <img src="./upload/pic3.jpg" alt="">
                </a>
                <a href="">             
                    <img src="./upload/pic4.jpg" alt="">
                </a>
         </div>

         <div class="sales-box-by">
            <!-- 这里的结构用a包裹img比全部div套div效果好，因为效果图img整体变成小手了 -->
                <a href="">             
                    <img src="./upload/pic5.jpg" alt="">
                </a>
                <a href="">             
                    <img src="./upload/pic6.jpg" alt="">
                </a>
         </div>
</div>
</body>
</html>

css：
body{

    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
    color: #000;
    background: #f2f2f2;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    
}

.search-index{
    width: 100%;
    height: 44px;
    display: flex;
    font-size: 12px;
    position: fixed;/*fixed依托的是可视窗口，就算设置body设置了限制，也不好使，因此重新与body通用设置一下大小限制*/
    max-width: 540px;
    min-width: 320px;
    background-color: #F6F6F6;
    /*  至此，基本效果已经完成，但感觉到大search-index非居中，如何修改？ */
    /*因为设置了por，已经脱离文档流，用偏移量确定位置*/
    top: 0px;/*设置固定定位fix所固定到的位置*/
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
   

}
.search-index .search{
    flex: 1;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-radius:5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    height: 26px;
    margin: 7px 10px;/*这里的margin 第一个7px是给上下的，距离顶部的距离*/
    /* padding-left: 25px; *//*让搜索框内部整体往右边挤,margin控制的是整体，内部框的高是变动padding搞的鬼*/
    /*而这里的文字到不了中间，只在顶部，不是padding的影响，修改其内部的padding-top会使得整个search的div高度变高，而这里的效果应该是不变高度，只让字到中间，即修改行高*/
    padding-left:25px;
    line-height: 26px;
    color: #666;
    
   

}
.search-index .user{
    width: 44px;
    height:44px;
    text-align: center;
    color:#2EAAE0;
    margin-top: 2px;
}
.search-index .user::before{
    content: " ";
    display: block;
    width: 23px;
    height: 23px;
    margin-left: 10px;
    margin-top: 3px;
    background: url(../images/sprite.png) no-repeat -59px -194px;
    background-size: 104px auto;
}
.search::before{
    content: " ";
    /* display: block; */
    /*因为是块元素，因此search中的文字被挤下去了，想实现左右的效果，用定位，浮动即可通过偏移量确定位置 */
    position: absolute;/*父决子项，找父*/
    left: 16px;
    top: 14px;
    width: 15px;
    height: 15px;
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;
    /*这里既然已经设置了poa，则通过偏移量移动确定before：里放大镜的位置，不要再借助margin
    使用margin慧使得放大镜的位置发生移动(偏移便不会)，通过f12即可看出区别，分别取消，确定margin，拿小手看放大镜的位置*/
    
}

.foucs a img{
    /* width: 540px; */
    width: 100%;/*这两种方法均可*/
    /*由于上方设置的固定定位脱离文档流，下面的火车头自动到顶，因此要留出距离顶部的距离，同样设置margin值，与search-index以前的高度一样*/
    margin-top: 44px;
}

.local-nav{
    background-color: #fff;
    display: flex;
    /* 这里的flex为了设置内部的平均分等份 */
    border-radius: 8px;
    height: 64px;
    margin-top: 3px;
    font-size: 12px;
    padding: 0;
    /*————————————————————————————————————————————————————— 问题  —————————————————————————————————————————————————————————————*/
    /*在页面中f12查看效果发现这里多出了设置的padding-left：40px，导致flex内部平均分配空间位置不对，将其清除至0即可，尚未找到原因！*/
    /*在页面中f12查看效果发现这里多出了设置的margin-bottom导致两大模块间存在距离，将其清除至0，有一定距离，设置bottom未3px即可，尚未找到原因！*/
     /*————————————————————————————————————————————————————— 问题  —————————————————————————————————————————————————————————————*/
    margin-bottom: 4px;
    /**/
}

li{
    list-style: none;
                        }
.local-nav li{
    flex: 1;/*所有li均未设置宽度，即将100%的宽度平均分成5份，每个li各一份*/


}

.local-nav li a{
       text-decoration: none;
       color: #222;
      /*  text-decoration: none;用于清除超链接默认的下划线 */
      
      /*flex可以设置在任意的盒子上，因此local-nav平均分为5块a，a内存在两个小块，即可将a变为父，a内两小块变成容器*/
      display: flex;
      flex-direction:column;
      /*让主轴变成y轴*/
      align-items: center;
      /*设置侧轴的属性（单行）居中*/
}

/* .local-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
    background-color: pink;
    margin-top: 8px;
    font-size: 12px;
} */

.local-nav-icon-icon1{

    /* span为行内元素，不能直接设置宽高，需要转换为块元素*/
    width: 32px;
    height: 32px;
    /*精灵图的引用必须设置宽高*/
    /*发现在 local-nav li a设置了display:flex属性后，取消行内元素的限制*/
    /* background-color: pink; */
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
    margin-top: 8px;


/*     flex-direction: column;
    align-items: center;
    不是在这里设置，这里是a中的一个span标签，flex的这两个属性是给外面的父亲容器的，里面只有一个子元素属性algin-self；
     */

} 

.local-nav-icon-icon2{
    width: 32px;
    height: 32px;
    background: url(../images/localnav_bg.png) no-repeat 0 -32px;
    background-size: 32px auto;
    margin-top: 8px;

}

.local-nav-icon-icon3{
    width: 32px;
    height: 32px;
    background: url(../images/localnav_bg.png) no-repeat 0 -64px;
    background-size: 32px auto;
    margin-top: 8px;

}

.local-nav-icon-icon4{
    width: 32px;
    height: 32px;
    background: url(../images/localnav_bg.png) no-repeat 0 -96px;
    background-size: 32px auto;
    margin-top: 8px;

}

.local-nav-icon-icon5{
    width: 32px;
    height: 32px;
    background: url(../images/localnav_bg.png) no-repeat 0 -128px;
    background-size: 32px auto;
    margin-top: 8px;

}

/*总结：background-size：px auto 若为二倍图，则只需设置宽的一半。
          background: url(../images/localnav_bg.png) no-repeat 0 -128px;中的 0 -128px才是控制显示图片位置的关键属性

            */



.nav-common{
    width: 100%;
    height: 88px;
    border-radius:8px;
    display: flex;
    /*外部距离上面距离*/
    margin-bottom: 3px;
    background-color: pink;
    
} 


/* .nav-common:nth-child(1){
    margin-top: 12px;   
    不好使？————————————————>为什么
} */
.nav-items{
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nav-items a{
    flex: 1;
    text-decoration: none;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    color: #ffffff;
    /*添加字体阴影，使得字更加立体*/
    text-shadow: 1px 1px rgba(0, 0, 0, .2);;
}


/*如何让 <a href="">海外酒店</a>
            <a href="">特价酒店</a>
                                    中的文字居中，而非div居中，仅让文字垂直水平居中*
                                    line-height: 44px ;text-align: center;*/

.nav-common .nav-items a{
    text-align: center;/*水平*/
    line-height: 44px ;/*其nav-items。88的一半 ————>垂直*/
}


/*精灵图在a中*/
/*此处center加不加效果相同*/
/* .nav-items:nth-child(1) a{
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size:121px auto;
    此时的效果为三个大块的第一个nav-items均为一样的
} */
/*美工告诉的是三倍图 363/3 =121*/

/*.nav-items:nth-child(2) a 整个意思错了，以四为将每个大nav里的第二个nav-item中的a进行操作，所以动的永远是第二个
    由于伪类出问题，因此用class来设置样式*/
/* .nav-items:nth-child(2) a{
    background: url(../images/sprite.png) no-repeat 0px -294px ;
    background-size:104px auto;
} */
/*这样即可通过新的多设置的class单独设置伪类*/
.com1 .nav-items:nth-child(1) a{
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size:121px auto;
}/*因为a是单独的一张图片，可以直接拿来用*/
.com2 .nav-items:nth-child(1) a{
    position: relative;
    /*通过f12可以看到 nav-items的a自动撑满第一个items
        left：0px top:0px 在左上方*/
}
.com2 .nav-items:nth-child(1) a::after{
    position: absolute;
    content: "";
    width: 42px;
    height: 25px;
    bottom:12px;
    left: 69px;
    background: url(../images/sprite.png) no-repeat 0px -297px;
    background-size:104px auto;
    /*这里的background-size的值是二倍图/2后的宽度值*/
}
.com3 .nav-items:nth-child(1) a{
    position: relative;
}
.com3 .nav-items:nth-child(1) a::after{
    position: absolute;
    content: "";
    width: 37px;
    height: 30px;
    left: 69px;
    bottom: 12px;
    background: url(../images/sprite.png) no-repeat 0 -240px;
    background-size: 104px auto;
}


/*实现各个大nav中的第一个nav-items的a后面放图片效果，由于一开始伪类失效，结合定位进行弥补*/
/*精灵图fw的用法*/
/* .com3 .nav-items:nth-child(1) a{
    background: url(../images/hotel.png) no-repeat x y ;
    background-size:121px auto;
    
    设置的x y就是fw上面显示的xy，但是一定记住要设置宽高，也是fw上切片取得的宽高
    background-size的值是二倍图/2后的宽度值，三倍图就/3，后面默认auto；

}
 */

.com1{
    background: -webkit-linear-gradient(left,#fa5a55,#fa994d);
}
.com2{
    background: -webkit-linear-gradient(left,#4B90ED, #53BCED);
}
.com3{
    background: -webkit-linear-gradient(left,#34C2A9, #6CD559);
}
/*在此伪类元素失效了！，不明原因，通过同一个元素创建多个类解决问题*/
/* .nav-common:nth-child(1){
  background: -webkit-linear-gradient(left,#fa5a55,#fa994d);
}   
 */


 .subnav-entry{
    border-radius: 8px;
    background-color:#fff;
    margin-top: 0px;
    margin-bottom: 0px;/*仍然影响到下面的模块了，通过f12发现*/
    display: flex;
    flex-wrap: wrap;
    padding:0;  /*默认有padding值，用0取消，尚未发现原因！*/
    padding: 4px 0px;
 }

 .subnav-entry li{
     flex: 20%;/*每个20%加上自动换行，即5个一换行*/
     padding: 3px 0px;/*太挤了，撑开它*/
 }

 .subnav-entry li a{
     text-decoration: none;
     color: #000;
     text-align: center;
     display: flex;
    flex-direction: column;
    align-items: center;

 }
 
/* .subnav-entry li a span{
    flex: 1;                为何不出来?找到原因所在，这一行代码把两个span平均分配，空间不够之前精灵图设置的width，则一直出不来效果。
} 
 */
.subnav-entry-icon1{
    width: 22px;
    height: 19px;
    background-color:pink;
    /*默认icon1是行内元素，不能设置大小，因此要为其父元素设置flex*/
    background: url(../images/subnav-bg.png) no-repeat 0 0 ;
    background-size: 24px auto;
    margin-top: 2px
}
.subnav-entry-icon2{
    width: 22px;
    height: 19px;
    background-color:pink;
    /*默认icon1是行内元素，不能设置大小，因此要为其父元素设置flex*/
    background: url(../images/subnav-bg.png) no-repeat 0 -26px;
    background-size: 24px auto;
    margin-top: 2px
}
.subnav-entry-icon3{
    width: 22px;
    height: 20px;
    background-color:pink;
    /*默认icon1是行内元素，不能设置大小，因此要为其父元素设置flex*/
    background: url(../images/subnav-bg.png) no-repeat 0 -55px;
    background-size: 24px auto;
    margin-top: 2px
}
.subnav-entry-icon4{
    width: 22px;
    height: 22px;
    background-color:pink;
    /*默认icon1是行内元素，不能设置大小，因此要为其父元素设置flex*/
    background: url(../images/subnav-bg.png) no-repeat 0 -84px;
    background-size: 24px auto;
    margin-top: 2px
}
.subnav-entry-icon5{
    width: 22px;
    height: 19px;
    background-color:pink;
    /*默认icon1是行内元素，不能设置大小，因此要为其父元素设置flex*/
    background: url(../images/subnav-bg.png) no-repeat 0 -112px;
    background-size: 24px auto;
    margin-top: 2px
}
.subnav-entry-icon6{
    width: 22px;
    height: 19px;
    background-color:pink;
    /*默认icon1是行内元素，不能设置大小，因此要为其父元素设置flex*/
    background: url(../images/subnav-bg.png) no-repeat 0 -140px;
    background-size: 24px auto;
    margin-top: 2px
}
.subnav-entry-icon7{
    width: 22px;
    height: 19px;
    background-color:pink;
    /*默认icon1是行内元素，不能设置大小，因此要为其父元素设置flex*/
    background: url(../images/subnav-bg.png) no-repeat 0 -168px;
    background-size: 24px auto;
    margin-top: 2px
}
.subnav-entry-icon8{
    width: 22px;
    height: 19px;
    background-color:pink;
    /*默认icon1是行内元素，不能设置大小，因此要为其父元素设置flex*/
    background: url(../images/subnav-bg.png) no-repeat 0 -196px ;
    background-size: 24px auto;
    margin-top: 2px
}
.subnav-entry-icon9{
    width: 22px;
    height: 19px;
    background-color:pink;
    /*默认icon1是行内元素，不能设置大小，因此要为其父元素设置flex*/
    background: url(../images/subnav-bg.png) no-repeat 0 -224px ;
    background-size: 24px auto;
    margin-top: 2px
}
.subnav-entry-icon10{
    width: 22px;
    height: 19px;
    background-color:pink;
    /*默认icon1是行内元素，不能设置大小，因此要为其父元素设置flex*/
    background: url(../images/subnav-bg.png) no-repeat 0 -248px;
    background-size: 24px auto;
    margin-top: 2px
}

/*通过伪类使得每个li 中的 a 中 的 第二个span 均与第一个span有margin-top距离！*/
.subnav-entry li a span:nth-child(2){
    margin-top: 4px;
}
.sales-box{
    background-color: pink;
    padding: 0px;
    margin-top: 3px;
    background-color: #ffffff;
}
.sales-box .sales-box-hd {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    position: relative;
}
/* .sales-box .sales-box-hd h2{
    position: relative;
    text-indent: -999px;
    overflow: hidden;      
    background-color: green;
} */
/*  //脱离文档流，隐藏文字，但还在原来位置可以通过poa根据此位置进行定位 */
.sales-box-hd h2 {
    position: relative;
    text-indent: -999px;
    overflow: hidden;
   /*  background-color: green; */
}

.sales-box .sales-box-hd h2::after{
    content: "";
    width: 79px;
    height: 16px;
    position: absolute; /*为外层的h2 por ，内部的 h2 伪类background 根据h2的por进行定位，但右侧的方块poa不能根据h2进行定位“子绝父相”，*/
    /* left: 0px;即为隐藏的h2所在的位置
    top: 0px; */
    left: 6px;
    top: 5px;    
    background: url(../images/hot.png) no-repeat 0 -20px;
    background-size: 79px auto;

    /*在测量完之后千万不要在fw里保存，否则你缩小的倍数。精灵图就变成一倍的了，而数值都是二倍，而且保存了就找不到了，除非在fw重新修改为两倍
    这里就是犯了这个错误，我就是翻过来不小心保存了，从fw绑定宽高链接变成两倍之后才可以正常查找到*/
}


.sales-box .sales-box-hd a{
    /*子绝父相，其父元素为大的sales-box-hd，为其设置por，由于为设置的伪类设置poa，h2为por，是因其为特殊的伪类，这个a正常则不根据h2*/
    position: absolute; 
    right: 0px;
    text-decoration: none;
    color:#ffffff;
    right: 10px;
    bottom: 19px;
    background: -webkit-linear-gradient(left, #FF506C, #FF6BC6);/*渐变色*/
    border-radius: 15px;
    padding: 4px 25px 4px 12px;/*太挤了，所以我们通过padding将其a所在的内部撑开，为即将右侧的after伪类留出位置*/
    text-align: center;

}


.sales-box .sales-box-hd a::after{
    font-size: 12px;
    content: "";    
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: rotate(45deg);
    width: 7px;                 /*反转上右边框45度即可，反转通过transform: rotate(45deg);*/
                                /*而且反转过来的>必须设置宽高，可以通过f12设置就会很奇怪*/
                                /*此时也要翻转>也要添加定位，此时伪类的poa因其对应a是poa，找a的父亲 sales-box-hd 是por，即为这里的poa根据hd定位*/
    height: 7px;    
    position: absolute;
    right: 11px;
    bottom: 10px;
    
}

.sales-box-by{
    display: flex;
   
}

.sales-box-by a{
    flex: 1;
}
/*图片太宽了超出了所限定的位置，用width；100%限制最大至body的540px*/
.sales-box-by a img{
    width: 100%;
}

.sales-box-by a:nth-child(1){
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
}

.sales-box-by a:nth-child(2){
    border-bottom: 1px solid #eee;
}
在这里插入图片描述
学习前端的一只旺财
关注
2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
携程静态页面初测试（html+CSS）之自学flex布局（遇到问题该怎么办？）

Document 搜索:目的地/酒店/景点/航班号 <div class="user">我的</div> 景点·玩乐 <li> <!-- 不能直接在li上添加title描述...
复制链接

扫一扫