请问侧边栏service区的小图标如何显示？
来源：2-2 便捷服务和广告
我学习太差被关起来了
2020-11-09 23:51:54
# 问题
侧边栏service区的小图标如何显示？
# 页面显示
# 问题描述
小图标如何才能正确显示呢？我的程序目录如下。
# index.html如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>2-2</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<base target="_blank">
<link type="text/css" rel="stylesheet" href="../reset.css">
<link type="text/css" rel="stylesheet" href="css/public.css">
<link type="text/css" rel="stylesheet" href="css/index.css">
<link type="text/css" rel="stylesheet" href="iconfont1/iconfont.css">
<link type="text/css" rel="stylesheet" href="iconfont2/iconfont.css">
</head>
<body>
<!-- 顶部 -->
<div class="topPart">
<div class="top__wrap wrap">
<!-- 顶部左边部分 -->
<ol class="top__wrap__left">
<!-- 请登录 -->
<li class="top__wrap__left__li"><a href="javascript:;" class="top__wrap__left__li__login">亲，请登录</a></li>
<!-- 免费注册 -->
<li class="top__wrap__left__li"><a href="javascript:;" class="top__wrap__left__li__signUp link">免费注册</a></li>
<!-- 手机慕淘 -->
<li class="top__wrap__left__li"><a href="javascript:;" class="top__wrap__left__li__app link">手机慕淘</a></li>
</ol>
<!-- 顶部右边部分 -->
<ol class="top__wrap__right">
<!-- “我的慕淘” -->
<li class="top__wrap__right__li top dropDown" data-on="top">
<a href="javascript:;" class="top__wrap__right__li__dropDown-toggle dropDown-toggle link">我的慕淘<i class="dropDown-arrow"></i></a>
<!-- “我的慕淘”下拉列表 -->
<ol class="top__wrap__right__li__dropDown-layer dropDown-layer dropDown-left">
<li class="top-item"><a href="javascript:;">已买到的宝贝</a></li>
<li class="top-item"><a href="javascript:;">我的足迹</a></li>
</ol>
</li>
<!-- “收藏夹” -->
<li class="top__wrap__right__li top dropDown" data-on="top">
<a href="javascript:;" class="top__wrap__right__li__dropDown-toggle dropDown-toggle link">收藏夹<i class="dropDown-arrow"></i></a>
<!-- “收藏夹”下拉列表 -->
<ol class="top__wrap__right__li__dropDown-layer dropDown-layer dropDown-left">
<li class="top-item"><a href="javascript:;">收藏的宝贝</a></li>
<li class="top-item"><a href="javascript:;">收藏的店铺</a></li>
</ol>
</li>
<!-- “商品分类” -->
<li class="top__wrap__right__li"><a href="javascript:;" class="top__wrap__right__li__category link">商品分类</a></li>
<!-- “卖家中心” -->
<li class="top__wrap__right__li top dropDown" data-on="top" data-load="json/top-seller.json">
<a href="javascript:;" class="top__wrap__right__li__dropDown-toggle dropDown-toggle link">卖家中心<i class="dropDown-arrow"></i></a>
<!-- “卖家中心”下拉列表 -->
<ol class="top__wrap__right__li__dropDown-layer dropDown-layer dropDown-left">
<li class="dropDown-loading"></li>
</ol>
</li>
<!-- “联系客服” -->
<li class="top__wrap__right__li top dropDown" data-on="top">
<a href="javascript:;" class="top__wrap__right__li__dropDown-toggle dropDown-toggle link">联系客服<i class="dropDown-arrow"></i></a>
<!-- “联系客服”下拉列表 -->
<ol class="top__wrap__right__li__dropDown-layer dropDown-layer dropDown-left">
<li class="top-item"><a href="javascript:;">买家客服</a></li>
<li class="top-item"><a href="javascript:;">卖家客服</a></li>
</ol>
</li>
</ol>
</div>
</div>
<!-- 头部 -->
<div class="header">
<div class="header__wrap wrap">
<!-- logo部分 -->
<h1 class="header__wrap__logo fl">
<a href="#" class="header__wrap__logo__a hideText" title="慕淘网，品质生活">慕淘网</a>
</h1>
<!-- 搜索部分 -->
<div class="header__wrap__search search fl">
<!-- 搜索表单 -->
<form action="https://s.taobao.com/search" class="header__wrap__search__form search-form">
<!-- 搜索输入框 -->
<input type="text" class="search-input fl" name="q" placeholder="居家必备、旅行神器" autocomplete="off">
<!-- 搜索按钮 -->
<input type="submit" class="search-button fl" value="搜索">
</form>
<!-- 搜索下拉层 search-layer -->
<ul class="header__wrap__search__layer search-layer">
<!-- 搜索下拉层选项 search-layer-item -->
<!-- <li class="search-layer-item textOverflowEllipsis">item</li> -->
</ul>
</div>
<!-- 购物车部分 -->
<div class="header__wrap__cart cart dropDown fr" data-on="cart">
<!-- 购物车按钮 -->
<div class="header__wrap__cart__button dropDown-toggle cartTransition">
<!-- 购物车图标 -->
<i class="iconfont icon-cart"></i><span class="cart-text">购物车</span>
<!-- 购物车商品数 -->
<span class="cart-number">0</span>
<!-- 购物车箭头 -->
<span class="cart-arrow dropDown-arrow"></span>
</div>
<!-- 购物车下拉层 -->
<!-- <div class="header__wrap__cart__layer dropDown-layer dropDown-right">-->
<!-- </div>-->
</div>
</div>
</div>
<!-- 主导航区 -->
<div class="nav-main">
<!-- 主导航区容器 -->
<div class="nav-main__wrap wrap">
<a href="##" class="link nav-main__wrap__a">数码城</a>
<a href="##" class="link nav-main__wrap__a">天黑黑</a>
<a href="##" class="link nav-main__wrap__a">团购</a>
<a href="##" class="link nav-main__wrap__a">发现</a>
<a href="##" class="link nav-main__wrap__a">二手特价</a>
<a href="##" class="link nav-main__wrap__a">名品汇</a>
</div>
</div>
<!-- focus区 -->
<div class="focus">
<div class="focus__wrap wrap">
<!-- 菜单 -->
<div class="focus__wrap__category category fl">
<a href="##" class="focus__wrap__category__item">
<i class="iconfont icon-jiugongge"></i>商品分类
</a>
<!-- 商品分类列表 -->
<ul class="focus__wrap__category__list">
<li class="dropDown" data-on="category" data-load="json/category-details-01.json">
<div class="dropDown-toggle">
<a href="##" class="dropDown-link">家用电器</a>
<i class="dropDown-arrow">></i>
</div>
<div class="dropDown-layer">
<div class="dropDown-loading"></div>
</div>
</li>
<li class="dropDown" data-on="category" data-load="json/category-details-02.json">
<div class="dropDown-toggle">
<a href="##" class="dropDown-link">手机、运营商、数码</a>
<i class="dropDown-arrow">></i>
</div>
<div class="dropDown-layer">
<div class="dropDown-loading"></div>
</div>
</li>
<li class="dropDown" data-on="category" data-load="json/category-details-03.json">
<div class="dropDown-toggle">
<a href="##" class="dropDown-link">电脑、办公</a>
<i class="dropDown-arrow">></i>
</div>
<div class="dropDown-layer">
<div class="dropDown-loading"></div>
</div>
</li>
<li class="dropDown" data-on="category" data-load="json/category-details-04.json">
<div class="dropDown-toggle">
<a href="##" class="dropDown-link">家具、厨具、家居、装修</a>
<i class="dropDown-arrow">></i>
</div>
<div class="dropDown-layer">
<div class="dropDown-loading"></div>
</div>
</li>
<li class="dropDown" data-on="category" data-load="json/category-details-05.json">
<div class="dropDown-toggle">
<a href="##" class="dropDown-link">女装、男装、童装、内衣</a>
<i class="dropDown-arrow">></i>
</div>
<div class="dropDown-layer">
<div class="dropDown-loading"></div>
</div>
</li>
<li class="dropDown" data-on="category" data-load="json/category-details-06.json">
<div class="dropDown-toggle">
<a href="##" class="dropDown-link">化妆、美容、清洁</a>
<i class="dropDown-arrow">></i>
</div>
<div class="dropDown-layer">
<div class="dropDown-loading"></div>
</div>
</li>
<li class="dropDown" data-on="category" data-load="json/category-details-07.json">
<div class="dropDown-toggle">
<a href="##" class="dropDown-link">运动、户外、旅行</a>
<i class="dropDown-arrow">></i>
</div>
<div class="dropDown-layer">
<div class="dropDown-loading"></div>
</div>
</li>
<li class="dropDown" data-on="category" data-load="json/category-details-08.json">
<div class="dropDown-toggle">
<a href="##" class="dropDown-link">汽车、车用物品</a>
<i class="dropDown-arrow">></i>
</div>
<div class="dropDown-layer">
<div class="dropDown-loading"></div>
</div>
</li>
<li class="dropDown" data-on="category" data-load="json/category-details-09.json">
<div class="dropDown-toggle">
<a href="##" class="dropDown-link">母婴、玩具、早教</a>
<i class="dropDown-arrow">></i>
</div>
<div class="dropDown-layer">
<div class="dropDown-loading"></div>
</div>
</li>
<li class="dropDown" data-on="category" data-load="json/category-details-10.json">
<div class="dropDown-toggle">
<a href="##" class="dropDown-link">美食、酒水、生鲜、特产</a>
<i class="dropDown-arrow">></i>
</div>
<div class="dropDown-layer">
<div class="dropDown-loading"></div>
</div>
</li>
<li class="dropDown" data-on="category" data-load="json/category-details-11.json">
<div class="dropDown-toggle">
<a href="##" class="dropDown-link">医药、保健</a>
<i class="dropDown-arrow">></i>
</div>
<div class="dropDown-layer">
<div class="dropDown-loading"></div>
</div>
</li>
<li class="dropDown" data-on="category" data-load="json/category-details-12.json">
<div class="dropDown-toggle">
<a href="##" class="dropDown-link">图书、影视、音乐</a>
<i class="dropDown-arrow">></i>
</div>
<div class="dropDown-layer">
<div class="dropDown-loading"></div>
</div>
</li>
<li class="dropDown" data-on="category" data-load="json/category-details-13.json">
<div class="dropDown-toggle">
<a href="##" class="dropDown-link">票务、酒店、旅游</a>
<i class="dropDown-arrow">></i>
</div>
<div class="dropDown-layer">
<div class="dropDown-loading"></div>
</div>
</li>
<li class="dropDown" data-on="category" data-load="json/category-details-14.json">
<div class="dropDown-toggle">
<a href="##" class="dropDown-link">保险、理财、众筹、白条</a>
<i class="dropDown-arrow">></i>
</div>
<div class="dropDown-layer">
<div class="dropDown-loading"></div>
</div>
</li>
</ul>
</div>
<!-- 轮播图 -->
<div class="focus__wrap__slider fl">
</div>
<!-- 右边的侧栏 -->
<div class="focus__wrap__sidebar fr">
<!-- 慕快报 -->
<div class="focus__wrap__sidebar__news">
<div class="focus__wrap__sidebar__news__head">
<div class="focus__wrap__sidebar__news__head__title fl">慕快报</div>
<a href="##" class="link fr">更多 ></a>
</div>
<div class="focus__wrap__sidebar__news__body">
<p class="textOverflowEllipsis">
<a href="##" class="link"><strong>[特惠]</strong>精选图书每满150减50</a>
</p>
<p class="textOverflowEllipsis">
<a href="##" class="link"><strong>[公告]</strong>因广州图书仓搬迁升级配送延迟</a>
</p>
<p class="textOverflowEllipsis">
<a href="##" class="link"><strong>[特惠]</strong>爆款手机12期免息 抽奖赢电视</a>
</p>
<p class="textOverflowEllipsis">
<a href="##" class="link"><strong>[公告]</strong>广东、福建受台风影响配送延迟</a>
</p>
<p class="textOverflowEllipsis">
<a href="##" class="link"><strong>[特惠]</strong>大闸蟹领券满399减150</a>
</p>
</div>
</div>
<!-- 常用服务 -->
<div class="focus__wrap__sidebar__service clearfix">
<a href="##" class="focus__wrap__sidebar__service__item fl">
<i class="focus__wrap__sidebar__service__item__icon icon"></i>
<span class="focus__wrap__sidebar__service__item__text">话费</span>
</a>
<a href="##" class="focus__wrap__sidebar__service__item fl">
<i class="focus__wrap__sidebar__service__item__icon icon"></i>
<span class="focus__wrap__sidebar__service__item__text">机票</span>
</a>
<a href="##" class="focus__wrap__sidebar__service__item fl">
<i class="focus__wrap__sidebar__service__item__icon icon"></i>
<span class="focus__wrap__sidebar__service__item__text">电影票</span>
</a>
<a href="##" class="focus__wrap__sidebar__service__item fl">
<i class="focus__wrap__sidebar__service__item__icon icon"></i>
<span class="focus__wrap__sidebar__service__item__text">游戏</span>
</a>
<a href="##" class="focus__wrap__sidebar__service__item fl">
<i class="focus__wrap__sidebar__service__item__icon icon"></i>
<span class="focus__wrap__sidebar__service__item__text">彩票</span>
</a>
<a href="##" class="focus__wrap__sidebar__service__item fl">
<i class="focus__wrap__sidebar__service__item__icon icon"></i>
<span class="focus__wrap__sidebar__service__item__text">加油卡</span>
</a>
<a href="##" class="focus__wrap__sidebar__service__item fl">
<i class="focus__wrap__sidebar__service__item__icon icon"></i>
<span class="focus__wrap__sidebar__service__item__text">酒店</span>
</a>
<a href="##" class="focus__wrap__sidebar__service__item fl">
<i class="focus__wrap__sidebar__service__item__icon icon"></i>
<span class="focus__wrap__sidebar__service__item__text">火车票</span>
</a>
<a href="##" class="focus__wrap__sidebar__service__item fl">
<i class="focus__wrap__sidebar__service__item__icon icon"></i>
<span class="focus__wrap__sidebar__service__item__text">众筹</span>
</a>
<a href="##" class="focus__wrap__sidebar__service__item fl">
<i class="focus__wrap__sidebar__service__item__icon icon"></i>
<span class="focus__wrap__sidebar__service__item__text">理财</span>
</a>
<a href="##" class="focus__wrap__sidebar__service__item fl">
<i class="focus__wrap__sidebar__service__item__icon icon"></i>
<span class="focus__wrap__sidebar__service__item__text">礼品卡</span>
</a>
<a href="##" class="focus__wrap__sidebar__service__item fl">
<i class="focus__wrap__sidebar__service__item__icon icon"></i>
<span class="focus__wrap__sidebar__service__item__text">白条</span>
</a>
</div>
<!-- 广告区 -->
<div class="focus__wrap__sidebar__ad"></div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
window.jQuery || document.write('<script src="../jquery-1.12.4.min.js"><\/script>');
</script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/showHide.js"></script>
<script type="text/javascript" src="js/dropDown.js"></script>
<script type="text/javascript" src="js/search.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
public.css如下：
/**************** 公共样式 开始 ****************/
/*定宽样式*/
.wrap
{
margin: 0 auto;
width: 1200px;
min-width: 1200px;
}
/*左浮动*/
.fl
{
float: left;
}
/*右浮动*/
.fr
{
float: right;
}
/*清除浮动*/
.clearfix::after
{
display: block;
content: " ";
height: 0;
clear: both;
zoom: 1;
}
/*文字隐藏*/
.hideText
{
text-indent: -9999px;
overflow: hidden;
}
/*文字溢出省略号处理*/
.textOverflowEllipsis
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*超链接样式*/
.link
{
color: #4D555D;
}
/*超链接样式*/
.link:hover
{
color: #F01414 !important;
cursor: pointer;
}
/**************** 公共样式 结束 ****************/
/**************** 下拉菜单dropDown样式 开始 ****************/
/*下拉菜单*/
.dropDown
{
position: relative;
}
/*切换文字*/
.dropDown-toggle
{
position: relative;
z-index: 1;
}
/*下拉箭头*/
.dropDown-arrow
{
position: absolute;
}
/*下拉层，默认隐藏*/
.dropDown-layer
{
display: none;
overflow: hidden;
position: absolute;
z-index: 3;
}
/*下拉层左对齐*/
.dropDown-left
{
left: 0;
right: auto;
}
/*下拉层右对齐*/
.dropDown-right
{
right: 0;
left: auto;
}
/* 动画时间 */
.transition
{
-o-transition: all .4s;
-ms-transition: all .4s;
-moz-transition: all .4s;
-webkit-transition: all .4s;
transition: all .4s;
}
.cartTransition
{
-o-transition: all .1s;
-ms-transition: all .1s;
-moz-transition: all .1s;
-webkit-transition: all .1s;
transition: all .1s;
}
/*淡出效果*/
.fadeOut
{
opacity: 0 !important;
visibility: hidden !important;
}
/* 上下滑动隐藏 */
.slideUpDownCollapse
{
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* 左右滑动隐藏 */
.slideLeftRightCollapse
{
width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.dropDown-loading
{
margin: 20px;
width: 32px;
height: 32px;
background-image: url(../img/loading.gif);
background-repeat: no-repeat;
}
/**************** 下拉菜单dropDown样式 结束 ****************/
/**************** 搜索框样式 开始 ****************/
/*搜索部分*/
.search
{
position: relative;
border: 1px solid #CFD2D5;
}
/*搜索输入框*/
.search-input
{
outline-color: #DFDFDF;
border-style: none;
padding: 0 10px;
width: 580px;
height: 40px;
line-height: 40px;
font-size: 16px;
background-color: #FFF;
}
/*搜索按钮*/
.search-button
{
border-style: none;
width: 72px;
height: 40px;
line-height: 36px;
font-size: 15px;
text-align: center;
color: #FFF;
background-color: #07111B;
cursor: pointer;
}
/*搜索下拉层*/
.search-layer
{
display: none;
position: absolute;
top: 100%;
left: -1px;
border: 1px solid #CFD2D5;
width: 100%;
background-color: #FFF;
}
/*搜索下拉层选项*/
.search-layer-item
{
height: 24px;
line-height: 24px;
padding: 2px 8px;
font-size: 15px;
cursor: pointer;
}
.search-layer-item:hover
{
background-color: #F3F5F7;
}
/**************** 搜索框样式 结束 ****************/
/**************** focus区 开始 ****************/
.category
{
position: relative;
margin-top: -62px;
width: 208px;
font-size: 14px;
}
.category .dropDown
{
position: static;
}
.category .dropDown-toggle
{
height: 36px;
line-height: 36px;
padding-left: 16px;
color: #FFF;
}
.category .dropDown-link
{
color: #FFF;
}
.category .dropDown-arrow
{
position: absolute;
top: 0;
right: 12px;
font-family: 黑体;
font-weight: bold;
}
.category-on .dropDown-toggle,
.category-on .dropDown-link
{
color: #F01414;
}
.category-on .dropDown-toggle
{
background-color: #FFF;
}
.category .dropDown-layer
{
top: 54px;
left: 100%;
padding: 8px 0 30px 0;
width: 744px;
min-height: 472px;
background-color: #FFF;
box-shadow: 0 0 4px rgba(7, 27, 47, .2);
}
.category-details
{
margin-top: 24px;
width: 744px;
line-height: 22px;
}
.category-details-title
{
border-right: 1px solid #D9DDE1;
padding-right: 16px;
width: 84px;
text-align: right;
font-weight: bold;
color: #07111B;
cursor: pointer;
}
.category-details-item
{
margin-bottom: 10px;
padding-left: 15px;
width: 592px;
cursor: pointer;
}
.category-details-item:last-of-type
{
margin-bottom: 0;
}
.category-details-item > .link
{
display: inline-block;
margin-right: 16px;
}
.focus__wrap__category__list .dropDown-loading
{
margin: 230px auto;
background-size: 45px;
width: 45px;
height: 45px;
}
/**************** focus区 结束 ****************/
index.css如下：
/**************** 顶部top基本样式 开始 ****************/
/*顶部*/
.topPart
{
width: 100%;
font-size: 12px;
background-color: #F3F5F7;
}
/*顶部*/
.top__wrap
{
height: 44px;
line-height: 44px;
border-bottom: 1px solid #CDD0D4;
}
/*顶部左边部分*/
.top__wrap__left,
.top__wrap__left__li
{
float: left;
}
/*请登录*/
.top__wrap__left__li__login
{
margin-left: 15px;
color: #F01414;
}
/*免费注册、手机慕淘*/
.top__wrap__left__li__signUp,
.top__wrap__left__li__app
{
margin-left: 15px;
}
/*顶部右边部分*/
.top__wrap__right
{
float: right;
}
/*顶部右边部分*/
.top__wrap__right__li
{
float: left;
}
/*商品分类*/
.top__wrap__right__li__category
{
margin: 0 10px;
}
/*联系客服*/
.top__wrap__right__li:last-child > a
{
margin-right: 15px;
}
/**************** 顶部top基本样式 结束 ****************/
/**************** 顶部top的下拉菜单样式 开始 ****************/
/*我的慕淘*/
.top .dropDown-toggle
{
display: inline-block;
padding: 0 24px 0 12px;
height: 100%;
border-left: 1px solid #F3F5F7;
border-right: 1px solid #F3F5F7;
}
/*下拉箭头*/
.top .dropDown-arrow
{
top: 20px;
right: 8px;
border-width: 5px;
border-style: solid;
border-color: #4D555D transparent transparent transparent;
width: 0;
height: 0;
-o-transition: all .2s;
-ms-transition: all .2s;
-moz-transition: all .2s;
-webkit-transition: all .2s;
transition: all .2s;
}
/*下拉层*/
.top .dropDown-layer
{
top: 44px;
border: 1px solid #CDD0D4;
border-top-style: none;
background-color: #FFF;
}
/*下拉列表项*/
.top .top-item
{
display: block;
padding: 0 8px;
height: 30px;
line-height: 30px;
white-space: nowrap;
color: #4D555D;
}
/*下拉列表项*/
.top .top-item > a
{
color: #4D555D;
}
.top .top-item:hover
{
background-color: #F3F5F7;
}
/*我的慕淘*/
.top-on .dropDown-toggle
{
border-color: #CDD0D4;
background-color: #FFF;
}
/*下拉箭头*/
.top-on .dropDown-arrow
{
border-top-color: #F01414;
top: 14px;
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
/**************** 顶部top的下拉菜单样式 结束 ****************/
/**************** header样式 开始 ****************/
.header
{
width: 100%;
height: 124px;
background-color: #F3F5F7;
}
.header__wrap__logo
{
margin-top: 36px;
margin-left: 16px;
}
.header__wrap__logo__a
{
display: inline-block;
width: 136px;
height: 48px;
background-image: url(../img/logo.png);
background-repeat: no-repeat;
}
.header__wrap > .search
{
margin-top: 36px;
margin-left: 140px;
}
/**************** header样式 结束 ****************/
/**************** 购物车样式 开始 ****************/
/*购物车按钮*/
.cart .dropDown-toggle
{
margin-top: 36px;
margin-right: 15px;
width: 160px;
height: 40px;
line-height: 40px;
font-size: 15px;
color: #FFF;
background-color: #F01414;
cursor: pointer;
}
/*购物车图标*/
.cart .icon-cart
{
margin: auto 8px;
font-size: 20px !important;
}
.cart .cart-text
{
position: relative;
}
.cart .cart-text::after
{
position: absolute;
right: -10px;
content: "|";
color: #FFF;
}
/*购物车商品数*/
.cart .cart-number
{
margin-left: 10px;
margin-right: 8px;
display: inline-block;
width: 34px;
text-align: center;
}
/*购物车箭头*/
.cart .cart-arrow
{
top: 20px;
right: 14px;
margin-left: 10px;
border-width: 5px;
border-style: solid;
border-color: #FFF transparent transparent transparent;
width: 0;
height: 0;
}
.cart .dropDown-layer
{
display: block !important;
right: 15px;
border: 1px solid #F3F5F7;
box-shadow: 0 0 1px 2px rgba(200, 210, 220, .6);
width: 320px;
height: 160px;
background-color: #FFF;
}
.cart-on .dropDown-toggle
{
box-shadow: 0 0 1px 2px rgba(200, 210, 220, .6), 0 0 1px 2px rgba(200, 210, 220, .6), 0 0 1px 2px rgba(200, 210, 220, .6), 0 0 0 0 #FFF;
color: #F01414;
background-color: #FFF;
}
.cart-on .cart-text::after
{
color: #F01414;
}
.cart-on .cart-arrow
{
top: 14px;
border-color: transparent transparent #F01414 transparent;
}
/**************** 购物车样式 结束 ****************/
/**************** 主导航区 开始 ****************/
.nav-main
{
margin-bottom: 8px;
width: 100%;
height: 48px;
text-indent: 182px;
background-color: #07111B;
}
.nav-main__wrap__a
{
margin-left: 50px;
line-height: 48px;
font-size: 15px;
color: #FFF;
}
/**************** 主导航区 结束 ****************/
/**************** focus区 开始 ****************/
.focus
{
margin-bottom: 8px;
width: 100%;
height: 504px;
background-color: #EEE;
}
.focus__wrap__category__item
{
display: block;
padding: 0 20px;
height: 54px;
line-height: 54px;
color: #FFF;
background-color: #C81414;
}
.focus__wrap__category__item > .iconfont
{
margin-right: 10px;
}
/*商品分类列表*/
.focus__wrap__category__list
{
height: 512px;
background-color: #F01414;
}
.focus__wrap__category__list > li
{
cursor: pointer;
}
/*右边的侧栏*/
.focus__wrap__sidebar
{
width: 249px;
}
/*慕快报*/
.focus__wrap__sidebar__news
{
border: 1px solid #D9DDE1;
border-bottom-style: none;
padding: 7px 20px 12px;
background-color: #FFF;
}
.focus__wrap__sidebar__news__head
{
height: 38px;
line-height: 38px;
font-size: 15px;
}
.focus__wrap__sidebar__news__head__title
{
font-size: 18px;
color: #F01414;
}
.focus__wrap__sidebar__news__body
{
line-height: 28px;
font-size: 14px;
}
.focus__wrap__sidebar__service
{
border: 1px solid #D9DDE1;
background-color: #FFF;
}
.focus__wrap__sidebar__service__item
{
border-top: 1px solid #D9DDE1;
border-right: 1px solid #D9DDE1;
width: 61px;
height: 71px;
text-align: center;
}
.focus__wrap__sidebar__service__item__icon,
.focus__wrap__sidebar__service__item__text
{
display: inline-block;
width: 100%;
}
.focus__wrap__sidebar__service__item__icon
{
margin-top: 17px;
color: #F67272;
font-size: 22px;
}
.focus__wrap__sidebar__service__item__text
{
margin-top: 6px;
color: #4D555D;
}
/**************** focus区 结束 ****************/
# 文件夹iconfont-sidebar-service里面的4个文件如下：
这4个文件是从课程资料《慕淘网之中心focus区组件化--分步代码》的“2-2 便捷服务和广告”下的test下的font文件夹中复制过来的。
写回答
1回答
-
同学你好，需要设置@font-face自定义，在‘《慕淘网之中心focus区组件化--分步代码》的“2-2 便捷服务和广告”’下的common.css文件中有代码，可以粘贴使用
老师这边添加上代码是显示出来的
祝学习愉快！
0
相似问题