老师，请问下，我的右箭头iconfont为什么有一个背景色
来源：3-3 机酒自由行部分开发（2）
帅得无心敲代码
2021-11-09 10:57:19
HTML：
相关代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>慕云游商城 - 机票、酒店、旅游攻略</title> <meta name="Keywords" content="机票，酒店，旅游攻略，签证，出国，自由行"> <meta name="Description" content="慕云游商城有10多年旅游行业经验，为您提供全方位旅游服务"> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/css.css"> </head> <body> <!-- 头部区域 --> <header class="site-head"> <div class="topbar"> <div class="content-wrap"> <nav class="shortcut-links"> <ul> <li> <a href="">目的地</a> </li> <li> <a href="">锦囊</a> </li> <li class="have-menu"> <a href="">社区</a> <em class="arrow"> <b></b> <i></i> </em> <div class="menu sqmenu"> <ul> <li><a href="">旅行论坛</a></li> <li><a href="">旅行专栏</a></li> <li><a href="">旅行问答</a></li> <li><a href="">旅行生活分享平台</a></li> <li><a href="">JNE旅行生活美学</a></li> <li><a href="">Biu伴（原结伴同游)</a></li> <li><a href="">负责任的旅行</a></li> <li><a href="">特别策划</a></li> </ul> </div> </li> <li> <a href="">行程助手</a> </li> <li class="have-menu"> <a href="">商城</a> <em class="arrow"> <b></b> <i></i> </em> <div class="menu scmenu"> <ul> <li><a href="">机酒自由行</a></li> <li><a href="">当地玩乐</a></li> <li><a href="">签证</a></li> <li><a href="">保险</a></li> <li><a href="">租车自驾</a></li> <li><a href="">邮轮</a></li> <li><a href="">河轮</a></li> <li><a href="">私人订制</a></li> <li><a href="">欧洲铁路</a></li> </ul> </div> </li> <li class="have-menu"> <a href="">酒店·民宿</a> <em class="arrow"> <b></b> <i></i> </em> <div class="menu scmenu"> <ul> <li><a href="">酒店</a></li> <li><a href="">爱彼迎</a></li> <li><a href="">华人旅馆</a></li> </ul> </div> </li> <li> <a href="">特价酒店</a> </li> </ul> </nav> <div class="topbar-right"> <a class="iconfont" href=""></a> <span>|</span> <a class="iconfont" href="">󰀼</a> <a class="iconfont" href="">󰆯</a> <a class="iconfont" href=""></a> <a href="">登录</a> <a href="">注册</a> </div> </div> </div> <nav class="main-nav"> <div class="content-wrap"> <ul class="long-links"> <li class="have-menu"> <a href="">机酒自由行</a> <div class="main-menu jjmenu"> <dl> <dt>全部</dt> <dd><a href="">自由行</a></dd> <dd><a href="">优惠机票</a></dd> <dd><a href="">酒店</a></dd> <dd><a href="">邮轮</a></dd> <dd><a href="">定制游</a></dd> <dd><a href="">马尔代夫</a></dd> <dd><a href="">海岛游</a></dd> </dl> </div> </li> <li> <a href="">优惠机票</a> </li> <li class="have-menu"> <a href="">跟团游</a> <div class="main-menu gtymenu"> <dl> <dt>全部</dt> <dd><a href="">跟团游</a></dd> <dd><a href="">半自助游</a></dd> </dl> </li> <li> <a href="">酒店</a> </li> <li class="have-menu"> <a href="">当地玩乐</a> <div class="main-menu ddwlmenu"> <dl> <dt>全部</dt> <dd><a href="">日游小团</a></dd> <dd><a href="">深度体验</a></dd> <dd><a href="">门票票券</a></dd> <dd><a href="">餐饮美食</a></dd> <dd><a href="">WIFI电话卡</a></dd> <dd><a href="">购物</a></dd> <dd><a href="">交通票券</a></dd> </dl> </div> </li> <li> <a href="">签证</a> </li> <li> <a href="">游轮</a> </li> <li> <a href="">河轮</a> </li> <li> <a href="">保险</a> </li> <li> <a href="">租车自驾</a> </li> <li class="have-menu"> <a href="">深度旅游</a> <div class="main-menu sdlymenu"> <dl> <dt>全部</dt> <dd><a href="">CityWalk</a></dd> <dd><a href="">特色长线</a></dd> <dd><a href="">Q-Home</a></dd> </dl> </div> </li> <li> <a href="">私人定制</a> </li> </ul> </div> </nav> <div class="head-content"> <div class="content-wrap"> <nav class="head-main-content"> <h1>慕云游商城</h1> <div class="search-box"> <input type="text" placeholder="请输入搜索内容"> <a href="" class="btn iconfont"></a> </div> </nav> </div> </div> </header> <!-- banner区域 --> <section class="banner"> <img src="./images/banner1.jpg" alt=""> <div class="cotent-wrap"> <a href="" class="leftbtn"></a> <a href="" class="rightbtn"></a> <nav class="banner-nav"> <ul> <li class="hot"> <dl> <dt>热门出发地</dt> <dd> <em>北京</em> <em>上海</em> <em>广深</em> <em>西南</em> <em>国内其他</em> </dd> </dl> </li> <li class="hk"> <dl> <dt>港澳台 国内</dt> <dd> <em>香港</em> <em>澳门</em> <em>台湾</em> <em>国内其他</em> </dd> </dl> </li> <li class="jp"> <dl> <dt>日本 韩国</dt> <dd> <em>东京</em> <em>大阪</em> <em>冲绳</em> <em>北海道</em> <em>福冈</em> </dd> </dl> </li> <li class="as"> <dl> <dt>东南亚 南亚</dt> <dd> <em>泰国</em> <em>新加坡</em> <em>马来西亚</em> <em>马尔代夫</em> </dd> </dl> </li> <li class="eu"> <dl> <dt>欧洲 美洲</dt> <dd> <em>英国</em> <em>法国</em> <em>美国</em> <em>加拿大</em> </dd> </dl> </li> <li class="au"> <dl> <dt>澳新 中东非</dt> <dd> <em>澳大利亚</em> <em>新西兰</em> <em>迪拜</em> </dd> </dl> </li> </ul> <div class="nav-menus"> <div class="menu"> <dl> <dt>港澳台</dt> <dd> <a href="">香港</a> <a href="">澳门</a> <a href="">台北</a> <a href="">高雄</a> <a href="">香港迪士尼</a> <a href="">香港海洋公园</a> <a href="">交通接驳</a> <a href="">澳门</a> <a href="">塔新濠天地水舞间</a> <a href="">澳门豪华自助 台北101</a> <a href="">台湾美食</a> </dd> </dl> <dl> <dt>国内热门城市</dt> <dd> <a href="">三亚</a> <a href="">东北雪乡</a> <a href="">大理</a> <a href="">丽江</a> <a href="">昆明</a> <a href="">西双版纳</a> <a href="">拉萨</a> <a href="">成都</a> <a href="">重庆</a> <a href="">长白山</a> <a href="">厦门</a> <a href="">长沙</a> <a href="">桂林北京</a> <a href="">西安</a> <a href="">敦煌</a> <a href="">杭州</a> <a href="">上海</a> <a href="">无锡</a> <a href="">南京</a> <a href="">广州</a> <a href="">黄山</a> <a href="">莫干山</a> <a href="">新疆</a> <a href="">北海</a> <a href="">九华山</a> <a href="">太原</a> <a href="">张家口</a> </dd> </dl> </div> </div> </nav> </div> </section> <!-- 热门广告区域 --> <section class="hot-ads clearfix"> <div class="content-wrap"> <ul> <li> <a href=""> <img src="./images/hot-ads/small01.png" alt=""> </a> </li> <li> <a href=""> <img src="./images/hot-ads/small02.png" alt=""> </a> </li> <li> <a href=""> <img src="./images/hot-ads/small03.png" alt=""> </a> </li> <li> <a href=""> <img src="./images/hot-ads/small04.png" alt=""> </a> </li> </ul> </div> </section> <!-- 新鲜甩尾区域 --> <section class="xxsw content-part"> <div class="content-wrap"> <div class="hd clearfix"> <h2>新鲜甩尾</h2> <em>每日不可不看的好货</em> </div> <div class="content"> <ul> <li> <a href=""> <div class="pic-box"> <img src="./images/xxsw/xxsw1.png" alt=""> </div> <div class="pic-content"> 北京直飞马尔代夫6-7天往返含税机票（首都航空/售完为止）… </div> </a> </li> <li> <a href=""> <div class="pic-box"> <img src="./images/xxsw/xxsw2.png" alt=""> </div> <div class="pic-content"> [甩尾狂欢] 北京/天津直飞日本东京/大阪/冲绳/札幌/福冈4-7… </div> </a> </li> <li> <a href=""> <div class="pic-box"> <img src="./images/xxsw/xxsw3.png" alt=""> </div> <div class="pic-content"> [拒签全退][全国25城联运] 北京往返格鲁吉亚+阿塞拜疆7-30天自由行 </div> </a> </li> <li> <a href=""> <div class="pic-box"> <img src="./images/xxsw/xxsw4.png" alt=""> </div> <div class="pic-content"> [樱花季] 北京直飞东京/大阪/名古屋/冲绳/札幌/福冈/仙台2-30天… </div> </a> </li> <li> <a href=""> <div class="pic-box"> <img src="./images/xxsw/xxsw5.png" alt=""> </div> <div class="pic-content"> [品质小团/快速确认] 新西兰福克斯冰川直升机观光+冰川徒步… </div> </a> </li> <li> <a href=""> <div class="pic-box"> <img src="./images/xxsw/xxsw6.png" alt=""> </div> <div class="pic-content"> [北欧破冰船] 芬兰+瑞典极地探险号破冰船活动+冰上漂浮+瑞典… </div> </a> </li> <li> <a href=""> <div class="pic-box"> <img src="./images/xxsw/xxsw7.png" alt=""> </div> <div class="pic-content"> [指定班期特惠][全程中文伴游] 摩洛哥全景深度10日游（卡萨进…) </div> </a> </li> <li> <a href=""> <div class="pic-box"> <img src="./images/xxsw/xxsw8.png" alt=""> </div> <div class="pic-content"> 马来西亚天空之镜+河口赏鹰+夜游萤火虫+寻找蓝眼泪（马来西亚瓜…) </div> </a> </li> </ul> </div> </div> </section> <!-- 机酒自由行 --> <section class="jjzyx content-part"> <div class="content-wrap"> <div class="hd clearfix"> <h2>机酒自由行</h2> <em>挑选全球机票、酒店、邮轮等旅行产品</em> <nav> <ul> <li class="current"><a href="">近期好货</a></li> <li><a href="">新品汇聚</a></li> <li><a href="">定制游</a></li> <li><a href="">国内推荐</a></li> <li><a href="">优惠机票</a></li> <li><a href="">热门海岛</a></li> <li><a href="">热卖签证</a></li> </ul> </nav> </div> <div class="bd"> <ul> <li class="big-grid"> <a href=""> <img src="./images/jjzyx/jjzyx1.png" alt=""> </a> <div class="info"> <p>[樱花季]天津直飞东京/大阪/名古屋/冲绳/札幌2-30天往返<br>含税机票【甩尾/多团期】</p> </div> <span>机票</span> </li> <li class="pro-grid"> <a href=""> <div class="pic-box"> <img src="./images/jjzyx/jjzyx2.png" alt=""> <span>跟团游</span> </div> <div class="pic-content"> 北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险… </div> </a> </li> <li class="pro-grid"> <a href=""> <div class="pic-box"> <img src="./images/jjzyx/jjzyx3.png" alt=""> <span>机票</span> </div> <div class="pic-content"> 北京/天津直飞日本东京/大阪/东阪/福冈/名古屋冲绳/北海道4-7天往返… </div> </a> </li> <li class="pro-grid"> <a href=""> <div class="pic-box"> <img src="./images/jjzyx/jjzyx4.png" alt=""> <span>机票</span> </div> <div class="pic-content"> [樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返… </div> </a> </li> <li class="pro-grid"> <a href=""> <div class="pic-box"> <img src="./images/jjzyx/jjzyx5.png" alt=""> <span>机票</span> </div> <div class="pic-content"> 杭州/上海/宁波/义乌直飞越南芽庄/岘港4-6天往返含税机票（20KG行… </div> </a> </li> <li class="pro-grid"> <a href=""> <div class="pic-box"> <img src="./images/jjzyx/jjzyx6.png" alt=""> <span>机票</span> </div> <div class="pic-content"> [赠自由行礼包] 上海/杭州/南京/合肥/宁波/徐州直飞日本东京/大阪… </div> </a> </li> <li class="last-grid"> <p>查看更多</p> <p>机酒自由行产品</p> <span class="iconfont"></span> <ul> <li> <p>机票</p> </li> <li> <p>酒店</p> </li> <li> <p>机+酒</p> </li> <li> <p>邮轮</p> </li> </ul> </li> </ul> </div> </div> </section> </body> </html>
CSS：
CSS.CSS相关代码：
/* 顶部导航栏一 */
.site-head{
min-width: 1152px;
height: 150px;
}
.site-head .topbar {
min-width: 1152px;
height: 32px;
background-color: #2A2A2A;
color: white;
line-height: 32px;
}
.site-head .topbar a {
color: white;
}
.site-head .topbar .shortcut-links {
float: left;
}
.site-head .topbar .topbar-right {
float: right;
width: 225px;
line-height: 32px;
}
.site-head .topbar .shortcut-links > ul {
}
.site-head .topbar .shortcut-links > ul > li {
float: left;
font-size: 14px;
margin-right: 18px;
}
.site-head .topbar .shortcut-links > ul > li.have-menu {
padding-right: 12px;
position: relative;
}
.site-head .topbar .shortcut-links > ul > li.have-menu .menu {
position: absolute;
top: 30px;
background-color: white;
z-index: 9999;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
padding: 10px;
padding-bottom: 20px;
display: none;
}
.site-head .topbar .shortcut-links > ul > li.have-menu .menu a {
font-size: 12px;
color: #1C1F21;
line-height: 20px;
}
.site-head .topbar .shortcut-links > ul > li.have-menu .menu > ul > li {
height: 20px;
line-height: 20px;
}
.site-head .topbar .shortcut-links > ul > li.have-menu .menu > ul > li:hover {
background-color: pink;
}
.site-head .topbar .shortcut-links > ul > li.have-menu .menu.sqmenu {
width: 121px;
}
.site-head .topbar .shortcut-links > ul > li.have-menu .menu.scmenu {
width: 76px;
}
.site-head .topbar .shortcut-links > ul > li.have-menu .menu.jdmsmenu {
width: 64px;
}
.site-head .topbar .shortcut-links > ul > li.have-menu:hover .menu {
display: block;
}
.site-head .topbar .shortcut-links > ul > li.have-menu .menu > ul {
}
.site-head .topbar .shortcut-links > ul > li.have-menu .arrow {
position: absolute;
right: 0;
top: 50%;
margin-top: -6px;
width: 12px;
height: 12px;
transition: all .1s ease-in-out 0s;
}
.site-head .topbar .shortcut-links > ul > li.have-menu:hover .arrow {
transform: rotate(180deg);
}
.site-head .topbar .shortcut-links > ul > li.have-menu .arrow b{
position: absolute;
left: 4px;
top: 2px;
width: 6px;
height: 6px;
background-color: white;
transform: rotate(45deg);
}
.site-head .topbar .shortcut-links > ul > li.have-menu .arrow i{
position: absolute;
left: 4px;
top: 0.5px;
width: 6px;
height: 6px;
background-color: #2A2A2A;
transform: rotate(45deg);
}
.site-head .topbar .topbar-right a, .site-head .topbar .topbar-right span {
float: left;
margin-right: 13px;
}
/* 顶部导航栏二 */
.site-head .main-nav {
height: 40px;
background-color: #20BD9A;
}
.site-head .main-nav .content-wrap .long-links {
float: left;
}
.site-head .main-nav .content-wrap > ul > li {
float: left;
margin-right: 18px;
}
.site-head .main-nav .content-wrap > ul > li.have-menu {
position: relative;
padding-right: 16px;
}
.site-head .main-nav .content-wrap > ul > li > a {
color:white;
font-size: 16px;
line-height: 40px;
}
.site-head .main-nav .content-wrap > ul > li.have-menu::before {
position: absolute;
content: '';
right: 0;
top: 18px;
height: 0;
width: 0;
border: 6px solid transparent;
border-top-color: white;
border-bottom: none;
transition: all .2s ease-in-out 0s;
}
.site-head .main-nav .content-wrap > ul > li.have-menu:hover::before {
transform: rotate(180deg);
}
.site-head .main-nav .content-wrap > ul > li.have-menu .main-menu {
position: absolute;
top: 33px;
background: #FFFFFF;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
z-index: 9999;
display: none;
}
.site-head .main-nav .content-wrap > ul > li.have-menu:hover .main-menu {
display: block;
}
.site-head .main-nav .content-wrap > ul > li.have-menu .main-menu a {
font-size: 12px;
color: #1C1F21;
font-family: "PingFangSC-Regular";
line-height: 20px;
}
.site-head .main-nav .content-wrap > ul > li.have-menu .main-menu dl {
padding: 6px 0 6px 8px;
}
.site-head .main-nav .content-wrap > ul > li.have-menu .main-menu dt {
font-weight: bold;
font-size: 14px;
color: #1C1F21;
text-align: justify;
line-height: 22px;
}
.site-head .main-nav .content-wrap > ul > li.have-menu .main-menu dd {
float: left;
margin-right: 4px;
}
.site-head .main-nav .content-wrap > ul > li.have-menu .main-menu.jjmenu {
width: 160px;
}
.site-head .main-nav .content-wrap > ul > li.have-menu .main-menu.gtymenu {
width: 106px;
}
.site-head .main-nav .content-wrap > ul > li.have-menu .main-menu.ddwlmenu {
width: 172px;
}
.site-head .main-nav .content-wrap > ul > li.have-menu .main-menu.sdlymenu {
width: 118px;
}
/* 顶部内容栏 */
.site-head .head-content {
height: 36px;
padding: 21px 0;
}
.site-head .head-content .content-wrap .head-main-content {
float: left;
}
.site-head .head-content .content-wrap h1 {
float: left;
font-family: PingFangSC-Medium;
font-size: 24px;
color: #20BD9A;
line-height: 36px;
}
.site-head .head-content .content-wrap .search-box {
float: left;
margin-left: 20px;
margin-top: 4px;
width: 405px;
}
.site-head .head-content .content-wrap .search-box input {
float: left;
width: 351px;
height: 28px;
border-radius: 4px 0 0 4px;
outline: none;
border: 1px solid #20BD9A;
padding-left: 20px;
}
.site-head .head-content .content-wrap .search-box .btn {
display: inline-block;
float: left;
width: 30px;
height: 30px;
background: #20BD9A;
color: white;
font-size: 21px;
text-align: center;
line-height: 30px;
}
/* 轮播图 */
.banner {
position: relative;
}
.banner img {
min-width: 1152px;
width: 100%;
vertical-align: middle;
}
.banner .cotent-wrap {
position: absolute;
min-width: 1152px;
top: 0;
left: 50%;
margin-left: -576px;
height: 100%;
}
.banner .cotent-wrap .banner-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.banner .cotent-wrap .banner-nav > ul {
height: 100%;
}
.banner .cotent-wrap .banner-nav > ul > li {
height: 16.66%;
width: 296px;
background-color: #0000006b;
color: white;
border-bottom: 1px solid white;
box-sizing: border-box;
}
.banner .cotent-wrap .banner-nav > ul > li:last-child {
border-bottom: none;
}
.banner .cotent-wrap .leftbtn {
position: absolute;
width: 28px;
height: 44px;
top: 50%;
margin-top: -22px;
left: -38px;
background: url(../images/icons.png) no-repeat -21px -94px;
}
.banner .cotent-wrap .rightbtn {
position: absolute;
width: 28px;
height: 44px;
background: url(../images/icons.png) no-repeat -21px -29px;
top: 50%;
right: -38px;
margin-top: -22px;
}
.banner .cotent-wrap .leftbtn:hover, .banner .cotent-wrap .rightbtn:hover {
opacity: 0.7;
}
/* 轮播图一级菜单栏 */
.banner .cotent-wrap .banner-nav > ul > li {
position: relative;
}
.banner .cotent-wrap .banner-nav > ul > li > dl {
position: absolute;
height: 48px;
top: 50%;
left: 40px;
margin-top: -24px;
}
.banner .cotent-wrap .banner-nav > ul > li > dl > dt {
font-size: 18px;
}
.banner .cotent-wrap .banner-nav > ul > li > dl > dd {
font-size: 14px;
}
.banner .cotent-wrap .banner-nav > ul > li::before {
content: '';
top: 50%;
left: 10px;
position: absolute;
background-image: url(../images/icons.png);
}
.banner .cotent-wrap .banner-nav > ul > li.hot::before {
content: '';
width: 22px;
height: 18px;
background-position: -29px -399px;
margin-top: -9px;
}
.banner .cotent-wrap .banner-nav>ul>li.hk::before {
width: 18px;
height: 21px;
background-position: -28px -217px;
margin-top: -10.5px;
left: 13px;
}
.banner .cotent-wrap .banner-nav>ul>li.jp::before {
width: 24px;
height: 19px;
background-position: -25px -171px;
margin-top: -9.5px;
}
.banner .cotent-wrap .banner-nav>ul>li.as::before {
width: 18px;
height: 19px;
background-position: -28px -262px;
margin-top: -9.5px;
left: 12px;
}
.banner .cotent-wrap .banner-nav>ul>li.eu::before {
width: 20px;
height: 14px;
background-position: -29px -351px;
margin-top: -7px;
left: 11px;
}
.banner .cotent-wrap .banner-nav>ul>li.au::before {
width: 18px;
height: 17px;
background-position: -28px -305px;
margin-top: -8.5px;
left: 12px;
}
/* 轮播图二级菜单栏 */
.banner .cotent-wrap .banner-nav .nav-menus {
/* diplay: none; */
position: absolute;
width: 356px;
background-color: orange;
top: 0;
left: 296px;
height: 100%;
padding: 16px;
opacity: 0.7;
background: #1C1F21;
box-sizing: border-box;
}
.banner .cotent-wrap .banner-nav .nav-menus .menu dl {
margin-bottom: 12px;
}
.banner .cotent-wrap .banner-nav .nav-menus .menu dl dt {
font-family: "PingFangSC-Semibold";
font-size: 16px;
color: #FFFFFF;
text-align: justify;
height: 24px;
line-height: 24px;
margin-bottom: 12px;
}
.banner .cotent-wrap .banner-nav .nav-menus .menu dl dd {
font-family: "PingFangSC-Regular";
font-size: 14px;
color: #FFFFFF;
text-align: justify;
line-height: 22px;
}
.banner .cotent-wrap .banner-nav .nav-menus .menu dl dd a {
color: white;
margin-right: 6px;
}
/* 热门广告hot-ads */
.hot-ads {
margin: 32px 0;
}
.hot-ads .content-wrap > ul > li {
float: left;
margin-right: 32px;
}
.hot-ads .content-wrap > ul > li:last-child {
margin-right: 0;
}
/* 新鲜甩尾xxsw */
.xxsw {
background: #F7F7F7;
height: 738px;
}
.xxsw .content-wrap .hd {
height: 54px;
padding-top: 40px;
padding-bottom: 32px;
}
.xxsw .content-wrap .hd h2 {
float: left;
}
.content-part h2 {
font-family: "PingFangSC";
font-weight: bold;
font-size: 36px;
color: #1C1F21;
text-align: justify;
line-height: 54px;
}
.content-part em {
position: relative;
top: 28px;
left: 14px;
font-family: "PingFangSC";
font-size: 12px;
color: #1C1F21;
text-align: justify;
line-height: 18px;
}
.xxsw .content-wrap .hd em {
float: left;
}
.xxsw .content-wrap .content {
margin-bottom: 40px;
}
.xxsw .content-wrap .content ul li {
float: left;
width: 264px;
height: 270px;
margin-right: 32px;
background: #FFFFFF;
}
.xxsw .content-wrap .content ul li:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.50);
}
.xxsw .content-wrap .content ul li:nth-child(4n) {
margin-right: 0;
margin-bottom: 32px;
}
.xxsw .content-wrap .content .pic-box {
width: 264px;
height: 184px;
}
.xxsw .content-wrap .content .pic-content {
font-family: "PingFangSC";
font-size: 14px;
color: #1C1F21;
line-height: 22px;
margin: 20px 14px 22px 14px;
text-align: justify;
}
/* 机酒自由行 */
.jjzyx {
height: 738px;
}
.jjzyx span {
font-family: "PingFangSC-Regular";
font-size: 14px;
color: #FFFFFF;
text-align: center;
line-height: 40px;
background-color: rgba(0, 0, 0, 0.5);
width: 74px;
height: 40px;
}
.jjzyx .hd {
padding: 40px 0 40px 0;
}
.jjzyx .hd h2 {
float: left;
}
.jjzyx .hd em {
float: left;
}
.jjzyx .hd nav {
float: right;
width: 490px;
padding-top: 22px;
}
.jjzyx .hd nav > ul > li {
float: left;
margin-right: 16px;
}
.jjzyx .hd nav > ul > li a {
font-family: "PingFangSC";
font-size: 14px;
color: rgba(0,0,0,0.85);
text-align: center;
line-height: 22px;
}
.jjzyx .hd nav > ul > li.current {
border-bottom: 4px solid #20BD9A;
}
.jjzyx .hd nav > ul > li.current a {
font-family: "PingFangSC";
font-size: 14px;
color: #20BD9A;
text-align: center;
line-height: 22px;
}
.jjzyx .bd > ul > li {
float: left;
margin-right: 32px;
margin-bottom: 32px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
.jjzyx .bd > ul > li:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
}
.jjzyx .bd > ul > li:nth-child(3), .jjzyx .bd > ul > li:nth-child(7) {
margin-right: 0;
}
.jjzyx .bd > ul > li.big-grid {
position: relative;
width: 560px;
height: 270px;
overflow: hidden;
}
.jjzyx .bd > ul > li.big-grid .info {
position: absolute;
width: 560px;
height: 103px;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.jjzyx .bd > ul > li.big-grid .info p {
padding: 30px 26px 29px 26px;
text-align: justify;
font-size: 14px;
color: #FFFFFF;
line-height: 22px;
}
.jjzyx .bd > ul > li.big-grid span{
position: absolute;
left: 0;
top: 127px;
}
.jjzyx .bd > ul > li.pro-grid {
width: 264px;
height: 270px;
}
.jjzyx .bd > ul > li.last-grid {
position: relative;
width: 264px;
height: 270px;
padding-top: 46px;
background-image: linear-gradient(180deg, #34E3BC 0%, #15AF7A 98%);
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
box-sizing: border-box;
}
.jjzyx .bd > ul > li.pro-grid .pic-box {
width: 264px;
height: 184px;
position: relative;
}
.jjzyx .bd > ul > li.pro-grid .pic-box span {
position: absolute;
left: 0;
bottom: 0;
}
.jjzyx .bd > ul > li.pro-grid .pic-content {
font-family: "PingFangSC";
font-size: 14px;
color: #1C1F21;
line-height: 22px;
margin: 20px 14px 22px 14px;
text-align: justify;
}
.jjzyx .bd > ul > li.last-grid .iconfont {
position: absolute;
color: white;
font-size: 48px;
text-align: center;
width: 48px;
height: 48px;
}base.css:
相关代码：
@font-face {
font-family: "PingFangSCRegular";
src: url(../fonts/PingFangSCRegular.ttf);
}
@font-face {
font-family: 'iconfont';
src: url('../fonts/iconfont.ttf') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: "PingFangSCRegular";
}
a {
font-family: "PingFangSCRegular";
}
.clearfix {
overflow: hidden;
}
.clearfix::after {
clear:both;
content:'';
display: block;
overflow: hidden;
}
.content-wrap {
width: 1152px;
margin: 0 auto;
}相关截图：
写回答
1回答
-
好帮手慕星星
2021-11-09
同学你好，是因为机酒自由行下面的 span都设置了背景色
所以图标这里的span也有。可以自己设置背景色为透明色覆盖掉，如下
祝学习愉快！
0
相似问题