点击左右按钮发现圆点current没能实现移动,自己做的第二遍，第一遍跟着老师做实现了，第二遍再次对照发现找不出问题所在了
html部分（超链接）
请问该如何上传问题，这一节代码过多！
//js部分
// 姓名：马炎
// 时间：2020年11月15日
// 轮播图效果制作：
(function(){
//dom获取盒子
var carousel_list=document.getElementById('carousel_list');
var right_btn=document.getElementById('right_btn');
var left_btn=document.getElementById('left_btn');
//克隆一张图片
var clone_li=carousel_list.firstElementChild.cloneNode(true);
//上树
carousel_list.appendChild(clone_li);
//添加点击事件
var idx=0;
right_btn.onclick=function(){
//循环一遍再次添加过渡效果
carousel_list.style.transition='transform .5s linear 0s';
idx++;
carousel_list.style.transform='translateX('+-16.66*idx+'%)';
//当到第五张时停止过渡效果，但是又要有过渡效果回到第一张所以用延时器
if(idx>4){
setTimeout(function(){
carousel_list.style.transform='none';
carousel_list.style.transition='none';
//重新回到第0张
idx=0;
},500)
}
//调用函数
setCircles();
};
left_btn.onclick=function(){
if(idx==0){
//瞬间拉动到最后
carousel_list.style.transition='none';
//拉到最后瞬间移动
carousel_list.style.transform='translateX('+-16.66*5+'%)';
idx=4;
//添加延时器0秒
setTimeout(function(){
//延迟0毫秒后跳转到第四张加上过渡
carousel_list.style.transition='transform .5s linear 0s';
carousel_list.style.transform='translateX('+-16.66*4+'%)';
},0)
}else{
idx--;
carousel_list.style.transform='translateX('+-16.66*idx+'%)';
}
//调用函数
setCircles();
}
//利用dom得到盒子
var circle_ol=document.getElementById('circle_ol');
var circle_lis=circle_ol.getElementsByClassName('li');
//进行小圆点的切换 点击按钮小圆点跟着切换
function setCircles(){
for( var i=0;i<=4;i++){
if(i==idx){
circle_lis[i].className='current';
}else{
circle_lis[i].className='';
}
}
}
})()
//css部分
.header-top{
min-width: 1152px;
height: 150px;
background-color: rgb(228, 187, 187);
}
.A{
min-width: 1152px;
height: 32px;
background-color: #2A2A2A ;
line-height: 32px;
}
.header-top .A .center-wrap{
}
.header-top .A .center-wrap .right .iconfont{
float: right;
margin-right: 16px;
line-height: 32px;
}
.header-top .A .center-wrap .right .iconfont:first-child{
margin-right: 0;
}
.header-top .A .center-wrap .right .dr,.zc{
font-size: 12px;
color: #FFFFFF;
text-align: justify;
line-height: 32px;
}
.header-top .A .center-wrap .A1{
float: left;
}
.header-top .A .center-wrap .A1> ul> li{
/* 大于号表示父亲的第一任儿子 */
font-size: 14px;
float: left;
margin-right: 18px;
}
.header-top a{
font-family: PingFangSC-Regular;
color: #FFFFFF;
text-align: justify;
line-height: 18px;
}
.header-top .A .center-wrap .A1> ul> li.a1{
/* li里面本身的一个a1元素用交集 */
padding-right:12px;
position: relative;
}
.header-top .A .center-wrap .A1>ul>li.a1 .menu{
/* 应该用top这样盒子就会在a1顶部往下延伸 */
position: absolute;
top:32px;
left: 0;
width: 121px;
background-color:rgba(0,0,0,0.20) ;
display: none;
box-shadow: 0 4px 8px 0;
z-index: 9999;
}
.header-top .A .center-wrap .A1>ul>li.a1 .menu .menua2{
width: 72px;
}
.header-top .A .center-wrap .A1>ul>li.a1 .menu .menua2 a{
color: black;
}
.header-top .A .center-wrap .A1>ul>li.a1 .menu .menua3{
}
.header-top .A .center-wrap .A1>ul>li:hover .menu{
display: block;
}
.header-top .A .center-wrap .A1> ul> li.a1 .B{
position: absolute;
right: 0;
top: 50%;
margin-top: -6px;
width: 12px;
height: 12px;
transition: transform 0.2s linear 0s;
}
.header-top .A .center-wrap .A1> ul> li.a1:hover .B{
transform:rotate(180deg)
}
/* 先两个盒子使用绝对定位然后微调，然后大盒子hover，
之后控制大盒子transition旋转速度 */
.header-top .A .center-wrap .A1> ul> li.a1 .B .aa1{
position: absolute;
left: 2px;
top: 4px;
width: 6px;
height: 6px;
background-color: rgb(248, 248, 246);
transform: rotate(45deg);
}
.header-top .A .center-wrap .A1> ul> li.a1 .B .aa2{
position: absolute;
top: 2px;
left: 2px;
width: 6px;
height: 6px;
background-color: #2A2A2A;
transform: rotate(45deg);
}
.main-nav{
min-width: 1152px;
background-color: #20BD9A;
height: 40px;
}
.main-nav .center-wrap ul li{
float: left;
margin-right: 18px;
line-height: 40px;
font-size: 16px;
position: relative;
}
.main-nav .center-wrap ul li .ddwl{
position: absolute;
width: 172px;
top:40px;
left: 0;
background-color: rgb(207, 231, 100);
display: none;
z-index: 9999;
}
.main-nav .center-wrap ul li .ddwl a{
/* 自己权重上a标签不要写错了 */
color: black;
}
.main-nav .center-wrap ul li:hover .ddwl{
display: block;
}
.main-nav .center-wrap ul li{
padding-right: 16px;
}
.main-nav .center-wrap ul li .b1{
position: absolute;
right: 0;
top: 50%;
margin-top: 0px;
/* transparent透明色 */
border: 8px solid transparent;
border-top-color:white;
border-bottom: none;
transition: transform 0.2s linear 0s;
}
.main-nav .center-wrap ul li:hover .b1{
transform: rotate(180deg);
}
.log-area{
height: 78px;
background-color: #fff;
}
.log-area h1{
float: left;
font-size: 24px;
color: #20BD9A;
text-align: justify;
line-height: 78px;
margin-right: 20px;
}
.log-area input{
float: left;
width: 373px;
height: 30px;
opacity: 0.3;
border: 1px solid #20BD9A;
border-radius: 8px 0 0 8px;
margin-top: 24px;
/* 取消默认的外线（外线是文本框特有的东西） */
outline: none;
}
.log-area .iconfont{
float: left;
margin-top: 24px;
width: 32px;
height: 30px;
background-color: #20BD9A;
border-radius: 0 4px 4px 0;
font-size: 20px;
text-align: center;
line-height: 30px;
}
.banner{
position: relative;
}
.banner .carousel_list{
width: 600%;
/* 清除浮动 */
overflow: hidden;
/* 拉动本身的16.67%,translateX中的百分数表示相对他自身的宽度多少倍 */
/* transform:translateX(-16.67%); */
transition: transform .5s linear 0s; //添加过渡
}
.banner .carousel_list li{
float: left;
width: 16.666%;
}
.banner .carousel_list li img{
width: 100%;
/* 这是一个小技巧，添加后就不会产生小缝隙了 */
vertical-align: middle;
}
.banner .center-wrap{
position: absolute;
width: 1152px;
height: 100%;
top: 0;
left: 50%;
margin-left:-576px;
/* 隐藏可见 */
overflow: visible;
}
.banner .left-btn{
position: absolute;
width: 28px;
height: 44px;
background:url(../images/icons.png) no-repeat -21px -94px;
left: -38px;
top: 50%;
margin-top: -22px;
}
.banner .left-btn:hover{
opacity: 0.8;
}
.banner .right-btn{
position: absolute;
width: 28px;
height: 44px;
/* 精灵技术先导入图片 */
background:url(../images/icons.png) no-repeat -21px -29px;
right: -38px;
top: 50%;
margin-top: -22px;
}
.banner .right-btn:hover{
opacity: 0.8;
}
.banner .center-wrap ul{
height: 100%;
}
.banner .center-wrap ul li{
position: relative;
height: 16.66%;
width: 296px;
opacity: 0.5;
border-bottom: 1px solid white;
background: #1C1F21;
/* 然多余的部分全部融到盒子内 */
box-sizing: border-box;
}
.banner .center-wrap ul li:last-child{
border-bottom: none;
}
.banner .center-wrap ul li dl{
position: absolute;
height: 48px;
width: 296px;
top: 50%;
margin-top: -24px;
left: 40px;
font-size: 14px;
color: #FFFFFF;
text-align: justify;
line-height: 22px;
}
.banner .center-wrap ul li dl dt{
font-size: 18px;
color: #FFFFFF;
text-align: justify;
line-height: 26px;
}
/* 方法一使用绝对定位来制作，方法二使用::before制作 */
.banner .center-wrap ul li .E{
/* 方法一使用绝对定位制作 */
position: absolute;
width:24px;
height: 24px;
background-color: rgb(205, 236, 119);
top: 50%;
margin-top: -12px;
left:10px ;
background: url(../images/icons.png) no-repeat -27px -397px;
}
/* 方法二使用::before制作 */
.banner .center-wrap ul li::before {
content:'' ;
/* 共性 */
position: absolute;
width: 24px;
height: 24px;
left: 10px;
top: 50%;
margin-top: -12px;
background-color: yellow;
background-image: url(../images/icons.png);
}
.banner .center-wrap ul li.d2::before {
background-position: -27px -397px;
}
.banner .center-wrap ul li.d3::before{
background-position: -27px -259px;
}
.banner .center-wrap .menu21{
/* 让所有menu21隐藏 */
display: none;
position: absolute;
width: 324px;
height: 100%;
top: 0;
left: 296px;
opacity: 0.7;
background: #1C1F21;
padding: 16px;
/* 超出盒子部分隐藏 */
box-sizing: border-box;
}
.banner .center-wrap .menu21 dt{
font-size: 16px;
color: #FFFFFF;
text-align: justify;
line-height: 24px;
margin-bottom: 4px;
}
.banner .center-wrap .menu21 dl{
margin-bottom: 12px;
}
.banner .center-wrap .menu21 dd a{
font-size: 14px;
color: #FFFFFF;
text-align: justify;
line-height: 22px;
}
.banner .current_ol{
position: absolute;
width: 150px;
height: 20px;
bottom: 10px;
left: 50%;
margin-left: -75px;
}
.banner .current_ol li{
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
background-color: rgb(120, 238, 91);
border-radius: 10px;
}
.banner .current_ol li:last-child{
margin-right: 0;
}
.banner .current_ol li.current{
width: 30px;
background-color: #20BD9A;
}
.hot-ads{
/* 清除浮动方法一，
方法二，添加overflow:hidden
方法三，clear：both*/
clear: both;
}
.hot-ads ul li{
float: left;
margin: 32px 32px 32px 0;
}
.hot-ads ul li:last-child{
margin-right: 0;
}
.xxsw{
width: 100%;
height: 738px;
background: #F7F7F7;
}
.xxsw .center-wrap{
height: 658px;
padding:40px 0 0 0;
}
.xxsw ul li{
float: left;
margin-right: 32px;
margin-bottom: 32px;
background: #FFFFFF;
line-height: 22px;
}
.xxsw ul li:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
.xxsw ul li:nth-child(4n){
margin-right: 0;
}
.xxsw .xxsw-head h2{
float: left;
font-size: 36px;
color: #1C1F21;
text-align: justify;
line-height: 54px;
}
.xxsw .xxsw-head em{
/* 也可使用相对定位来调整/这样要简单些 */
float: left;
font-size: 12px;
color: #1C1F21;
text-align: justify;
line-height: 18px;
margin-left: 12px;
margin-top: 27px;
}
.xxsw ul{
margin-top: 32px;
}
.xxsw ul p{
width: 236px;
height: 58px;
font-size: 14px;
color: #1C1F21;
line-height: 22px;
padding: 14px;
}
.jjzyx{
height: 738px;
background: #FFFFFF;
}
.jjzyx .center-wrap{
height: 658px;
padding:40px 0 40px 0;
position: relative;
}
.jjzyx .jj-1 h2{
float: left;
font-size: 36px;
color: #1C1F21;
text-align: justify;
line-height: 54px;
}
.jjzyx .jj-1 em{
/* 也可使用相对定位来调整/这样要简单些 */
float: left;
font-size: 12px;
color: #1C1F21;
text-align: justify;
line-height: 18px;
position: relative;
top: 31px;
left:12px ;
}
.jjzyx .jj-2 ul li{
float: right;
margin-right: 16px;
margin-top: 12px;
}
.jjzyx .jj-2 ul li:first-child{
margin-right: 0px;
}
.jjzyx .jj-2 ul li a{
font-size: 14px;
line-height: 22px;
color: black;
}
.jjzyx .jj-2 ul li.jj-4 a{
color: #20BD9A;
}
.jjzyx .jj-2 ul li.jj-4 {
border-bottom:4px solid #20BD9A;
padding-bottom: 4px;
}
.jjzyx .bd> ul> li{
float: left;
margin:32px 32px 0 0;
}
.jjzyx .bd> ul> li:hover{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
.jjzyx .bd ul li:nth-child(3){
margin-right: 0;
}
.jjzyx .bd ul li p.jjzyx-a{
width: 236px;
height: 62px;
font-size: 14px;
color: #1C1F21;
line-height: 22px;
padding: 12px;
}
.jjzyx .bd ul li .jjzyx-1{
position: relative;
}
.jjzyx .bd ul li .jjzyx-1 .jjzyx-A{
position: absolute;
/* 内容区域+padding区域就是盒子大小 */
width: 508px;
height: 51px;
left: 0px;
bottom: 0px;
background: #1C1F21;
opacity: 0.55;
padding: 26px;
font-size: 14px;
color: #FFFFFF;
line-height: 22px;
}
.jjzyx .bd .para2{
position: absolute;
right: 0px;
bottom: 36px;
width: 264px;
height: 224px;
padding-top: 46px;
background-image: linear-gradient(180deg, #34E3BC 0%, #15AF7A 98%);
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
.bd .para2 p{
text-align: center;
color: #FFFFFF;
}
.bd .para2 p.iconfont{
font-size: 48px;
position: relative;
top: 20px;
color: #FFFFFF;
}
.jjzyx .center-wrap .bd .para2 ul{
margin: 36px 14px 46px 25px;
}
.jjzyx .center-wrap .bd .para2 ul li{
float: left;
margin-right: 10px;
border-right:1px solid white;
padding-right: 15px;
font-size: 14px;
color: #FFFFFF;
text-align: center;
line-height: 22px;
}
.jjzyx .center-wrap .bd .para2 ul li:last-child{
margin-right: 0;
border-right: none;
}
.ddwl{
height: 586px;
background-color: #F7F7F7;
/* 建立全屏板块背景颜色为后面板块居中做准备 */
}
.ddwl .center-wrap{
height: 506px;
padding:40px 0 40px 0;
/* 建立主要编辑板块已经成功居中 */
position: relative;
}
.ddwl .wl-1 h2{
/* 头部板块以左右浮动来编辑，此处左浮动 */
float: left;
font-size: 36px;
color: #1C1F21;
text-align: justify;
line-height: 54px;
}
.ddwl .wl-1 em{
/* 也可使用相对定位来调整/这样要简单些 */
float: left;
font-size: 12px;
color: #1C1F21;
text-align: justify;
line-height: 18px;
position: relative;
top: 31px;
left:12px ;
}
.ddwl .wl-2 ul li{
/* 此处右浮动并且头部要设置清除浮动为
接下来图片编辑做准备 */
float: right;
margin-right: 16px;
margin-top: 12px;
}
.ddwl .wl-2 ul li:first-child{
/* 右浮动清除的margin是第一个 */
margin-right: 0px;
}
.ddwl .wl-2 ul li a{
font-size: 14px;
line-height: 22px;
color: black;
}
.ddwl .wl-2 ul li.wl-4 a{
/* a标签颜色得单独来设置 */
color: #20BD9A;
}
.ddwl .wl-2 ul li.wl-4 {
/* 通过设置li元素边框来达到下划线效果 */
border-bottom:4px solid #20BD9A;
padding-bottom: 4px;
}
.ddwl .center-wrap .bd-2{
height: 420px;
margin: 32px 0;
background-color: rgb(240, 186, 186);
}
.ddwl .center-wrap .bd-2 .bd-a,
.ddwl .center-wrap .bd-2 .bd-b,
.ddwl .center-wrap .bd-c{
float: left;
width: 364px;
height: 420px;
background-color: rgb(211, 243, 169);
margin-right: 30px;
}
.ddwl .center-wrap .bd-2 .bd-c{
/* 巧妙利用权重关系把bd-c的右边margin去掉 */
margin-right: 0;
}
.bd-a .big{
position: relative;
width: 364px;
height: 270px;
margin-bottom: 30px;
}
.bd-a .big .wenzi{
position: absolute;
width: 364px;
height: 104px;
font-size: 14px;
color: #FFFFFF;
line-height: 22px;
left: 0;
bottom: 0;
opacity: 0.5;
background: #1C1F21;
padding: 17px 21px;
box-sizing: border-box;
}
.bd-a .big .wenzi .cswl{
float: left;
}
.bd-a .big .wenzi .cswl-1{
float: right;
}
.big-1{
width: 364px;
height: 120px;
background-color: rgb(159, 238, 156);
margin-bottom:30px ;
}
.big-1 img{
float: left;
}
.big-1 p{
float: left;
width: 208px;
height: 66px;
margin: 26px 18px 28px 18px;
}
/* 或者直接.bd-2 .big-1 */
.bd-c .para2{
width: 364px;
height: 270px;
padding-top: 46px;
box-sizing: border-box;
background-image: linear-gradient(180deg, #FF6374 1%, #FF7368 98%);
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
.bd-c .para2 p{
text-align: center;
color: #FFFFFF;
}
.bd-c .para2 p.iconfont{
font-size: 48px;
position: relative;
top: 20px;
color: #FFFFFF;
}
.bd-c .para2 ul{
margin: 36px 27px 46px 27px;
}
.bd-c .para2 ul li{
float: left;
margin-right: 10px;
border-right:1px solid white;
padding-right: 15px;
font-size: 14px;
color: #FFFFFF;
text-align: center;
line-height: 22px;
}
.bd-c .para2 ul li:last-child{
margin-right: 0;
border-right: none;
}
.tsddy{
height: 456px;
padding-top: 40px;
box-sizing: border-box;
}
.tsddy .center-wrap h2{
text-align: center;
font-size: 36px;
color: #1C1F21;
line-height: 54px;
}
.tsddy .center-wrap .te{
float: left;
margin-right: 32px;
}
.tsddy .center-wrap .te:last-child{
margin-right: 0;
}
.tsddy .center-wrap .te-A .te{
width: 264px;
height: 290px;
background: #FFFFFF;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
.tsddy .center-wrap .te-A h4{
width: 242px;
height: 48px;
margin: 16px 8px 8px 14px;
font-size: 16px;
font-weight: bold;
color: #000000;
line-height: 24px;
}
.tsddy .center-wrap .te-A ul li{
float: left;
font-size: 12px;
color: #000000;
line-height: 18px;
}
.tsddy .center-wrap .te-A ul li.xx{
color: #FA6400 ;
}
.tsddy .center-wrap .te-A ul{
margin: 9px 8px 16px 14px;
}
.tsddy .center-wrap .te-A{
margin: 32px 0;
}
.sdlx{
height: 738px;
background: #FFFFFF;
}
.sdlx .center-wrap{
height: 658px;
padding:40px 0 40px 0;
position: relative;
}
.sdlx .sd-1 h2{
float: left;
font-size: 36px;
color: #1C1F21;
text-align: justify;
line-height: 54px;
}
.sdlx .sd-1 em{
/* 也可使用相对定位来调整/这样要简单些 */
float: left;
font-size: 12px;
color: #1C1F21;
text-align: justify;
line-height: 18px;
position: relative;
top: 31px;
left:12px ;
}
.sdlx .sd-2{
float: right;
margin-top: 12px;
}
.sdlx .sd-2{
font-size: 14px;
line-height: 22px;
color: #20BD9A;
}
.sdlx .sd-2 li{
border-bottom:4px solid #20BD9A;
padding-bottom: 4px;
}
.sdlx .bd> ul> li{
float: left;
margin:32px 32px 0 0;
}
.sdlx .bd> ul> li:hover{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
.sdlx .bd ul li:nth-child(3){
margin-right: 0;
}
.sdlx .bd ul li p.sdlx-a{
width: 236px;
height: 62px;
font-size: 14px;
color: #1C1F21;
line-height: 22px;
padding: 12px;
}
.sdlx .bd ul li .sdlx-1{
position: relative;
}
.sdlx .bd ul li .sdlx-1 .sdlx-A{
position: absolute;
/* 内容区域+padding区域就是盒子大小 */
width: 508px;
height: 51px;
left: 0px;
/* 利用绝对定位超出隐藏原理，
然后为浮动出现做准备 */
bottom: -80px;
opacity: 0.55;
padding: 26px;
font-size: 14px;
color: #FFFFFF;
line-height: 22px;
}
.sdlx .bd ul li .sdlx-1:hover .sdlx-A{
/* 设置浮动效果 */
bottom: 0;
/* 设置浮动运动速度 */
transition: bottom .4s linear 0s;
}
.sdlx .bd .para2{
position: absolute;
right: 0px;
bottom: 40px;
width: 264px;
height: 224px;
padding-top: 46px;
background-image: linear-gradient(180deg, #BD5EE8 0%, #832ABB 98%);
box-shadow: 0 4px 8px 0
}
.bd .para2 p{
text-align: center;
color: #FFFFFF;
}
.bd .para2 p.iconfont{
font-size: 48px;
position: relative;
top: 20px;
color: #FFFFFF;
}
.center-wrap .bd .para2 ul{
margin: 36px 14px 46px 25px;
}
.center-wrap .bd .para2 ul li{
float: left;
margin-right: 10px;
border-right:1px solid white;
padding-right: 15px;
font-size: 14px;
color: #FFFFFF;
text-align: center;
line-height: 22px;
}
.center-wrap .bd .para2 ul li:last-child{
margin-right: 0;
border-right: none;
}
/* 公共类应用 */
.bzzy .center-wrap .sd-2 ul li{
float: right;
margin-right: 20px;
}
.bzzy .center-wrap .sd-2 ul li.bzzy-1{
margin-right: 0;
border-bottom: none;
color: #000;
}
.bzzy .center-wrap .bd .para2 ul {
padding-left: 40px;
}
.bzzy .center-wrap .bd .para2{
background-image: linear-gradient(180deg, #41D8E9 0%, #3685EA 98%);
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
/*公共类特效实现 */
.content-part img:hover{
transform: scale(1.1);
}
.content-part .bd,.te-A,.bd-2,.center-wrap{
overflow: hidden;
}
.content-part img{
transition: transform 0.4s linear 0s;
}
/* 公共类特效动画实现 */
.content-part .para2 .iconfont{
animation: ud 0.4s linear 0s alternate infinite ;
}
@keyframes ud{
from{
transform: translateY(-10px);
}
to{
transform: translateY(10px);
}
}
.content-part .bd .sdlx-1{
position: relative;
}
.content-part .bd .circle{
position: absolute;
width: 106px;
height: 106px;
border: 1px solid white;
top: -162px;
left: 50%;
margin-left: -53px;
color: white;
border-radius: 50%;
padding-top: 26px;
box-sizing: border-box;
}
.content-part .bd .circle p{
font-size: 18px;
text-align: center;
}
.content-part .sdlx-1:hover .circle{
/* 一碰就会回到原来位置 */
top: 62px;
}
footer{
height: 220px;
background: #F7F7F7;
}
footer .center-wrap{
padding-top: 36px;
}
footer .center-wrap .part-a ul li{
float: left;
border-right: 1px solid rgb(192, 152, 152);
padding-right: 22px;
margin-right:22px ;
font-size: 18px;
color: #1C1F21;
line-height: 28px;
}
footer .center-wrap .part-a ul li:last-child{
border-right: none;
margin-right: 0;
}
footer .center-wrap .part-a ul{
margin-bottom: 40px;
}
footer .center-wrap .part-b dd{
width: 289px;
height: 44px;
}
footer .center-wrap .part-b dt{
font-weight: bold;
margin-bottom:8px;
}
footer .center-wrap .part-b dl{
float: left;
padding-left: 75px;
}
footer .center-wrap .part-b .ccsx{
margin: 0 30px;
}
footer .center-wrap dl{
position: relative;
}
footer .center-wrap .txfw-1{
/* 利用新建立一个div方式来实现精灵技术 */
position: absolute;
width: 60px;
height: 60px;
left: 0;
bottom: 0;
background-image: url(../images/icons.png);
background-position: -150px -178px;
}
footer .center-wrap .ccsx::before{
content: '';
/* 利用：：before content实现，好处是少建立一个盒子 */
position: absolute;
width: 60px;
height: 60px;
left: 0;
bottom: 0;
background:url(../images/icons.png) -150px -105px;
}
footer .center-wrap .axph::before{
content: '';
position: absolute;
width: 60px;
height: 60px;
left: 0;
bottom: 0;
background: url(../images/icons.png) -150px -32px;
}
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星