老师 关于商品切换的问题
来源：3-2 项目作业
lcy_18
2021-05-29 16:52:07
如果我要让所有的li一排显示，就必须修改center-wrap的大小，那我要怎样保证留两边的空白和其他的保持一致呢，还有要如何隐藏其他5个（箭头才不用修改，还是必须都要重新定位）
mu_household.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>慕家居-触手可及的家居格调</title>
<meta name="Keywords" content="家居,简洁,自然,人性化" />
<meta name="Description" content="慕家居——北欧简约风，触手可及的家居格调" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/mu_household.css" />
</head>
<body>
<header class="header">
<!--top区域-->
<div class="top">
<div class="center-wrap clearfix">
<span>服务热线：400-8888-888</span>
</div>
</div>
<!--header导航区域-->
<div class="nav">
<div class="center-wrap clearfix">
<h1>慕家居</h1>
<ul>
<li>
<a href="">
<div class="bg-color">
<img src="img/home-gry.png" />
<img src="img/home-white.png" class="white" />
</div>
</a>
<p>网站首页</p>
</li>
<li>
<a href="">
<div class="bg-color">
<img src="img/abouts-gry.png" />
<img src="img/abouts-white.png" class="white" />
</div>
</a>
<p>关于我们</p>
</li>
<li>
<a href="">
<div class="bg-color">
<img src="img/kefu-gry.png" />
<img src="img/kefu-white.png" class="white" />
</div>
</a>
<p>服务建设</p>
</li>
<li>
<a href="">
<div class="bg-color">
<img src="img/chanpin-gry.png" />
<img src="img/chanpin-white.png" class="white" />
</div>
</a>
<p>产品中心</p>
</li>
<li>
<a href="">
<div class="bg-color">
<img src="img/fuwu-gry.png" />
<img src="img/fuwu-white.png" class="white" />
</div>
</a>
<p>服务大厅</p>
</li>
</ul>
</a>
<div class="search">
<form>
<input type="text" name="search-text" placeholder="请输入搜索内容" />
<input type="button" name="search" />
</form>
<img src="img/search.png" />
</div>
</div>
</div>
</header>
<!--banner区域-->
<section class="banner" id="banner">
<ul class="carousel_list" id="carousel_list">
<li>
<img src="img/banner01.png" />
</li>
<li>
<img src="img/banner02.png" />
</li>
<li>
<img src="img/banner03.png" />
</li>
</ul>
<ol class="clearfix" id="circle_ol">
<li data-n="0" class="current"></li>
<li data-n="1"></li>
<li data-n="2"></li>
</ol>
</section>
<!--商品区域-->
<section class="sp">
<div class="center-wrap">
<a href="javascript:;">
<img src="img/prev.png" class="arrow prev" />
<img src="img/prev_active.png" class="arrow prev active" id="sp_left"/>
<img src="img/next.png" class="arrow next" />
<img src="img/next_active.png" class="arrow next active" id="sp_right"/>
</a>
<ul class="clearfix" id="sp_ul">
<li class="big">
<img src="img/product01.png" />
<p>时尚卫生间墙面颜色2029装饰设计</p>
</li>
<li>
<img src="img/product02.png" />
<p>现代北欧风格厨房装2029饰效果图</p>
</li>
<li class="big">
<img src="img/product03.png" />
<p>现代时尚北欧风格卧2029室装饰画</p>
</li>
<li>
<img src="img/product04.png" />
<p>130平简约现代北欧2029风格装修</p>
</li>
<li class="big">
<img src="img/product05.png" />
<p>现代北欧风格小客厅2029装修设计</p>
</li>
<li class="big">
<img src="img/product06.png" />
<p>时尚卫生间墙面颜色2029装饰设计</p>
</li>
<li>
<img src="img/product07.png" />
<p>现代北欧风格厨房装2029饰效果图</p>
</li>
<li class="big">
<img src="img/product08.png" />
<p>现代时尚北欧风格卧2029室装饰画</p>
</li>
<li>
<img src="img/product09.png" />
<p>130平简约现代北欧2029风格装修</p>
</li>
<li class="big">
<img src="img/product10.png" />
<p>现代北欧风格小客厅2029装修设计</p>
</li>
</ul>
</div>
</section>
<!--了解我们区域-->
<section class="ljwm tag-same">
<div class="center">
<div class="top">
<h2>了解我们</h2>
<h3>about us</h3>
<span></span>
</div>
<div class="content clearfix">
<div class="left">
<h4>关于我们</h4>
<p>慕家居装饰材料有限公司</p>
<p></p>
<p>慕家居家居装修网北欧风格家具图片专区,是国内海量全面的高质量北欧风格家具图片库…</p>
<a href="javascript:;">
<p class="button">
了解更多
</p>
</a>
</div>
<div class="middle">
<img src="img/aboutus.png" />
</div>
<div class="right">
<ul>
<li>
<a href="javascript:;">
<img src="img/liuyan.png" alt="在线留言" />
<p>在线留言</p>
<p>on-line message</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="img/guanggao.png" alt="广告经营" />
<p>广告经营</p>
<p>Advertising management</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="img/wangluo.png" alt="网络资询" />
<p>网络资询</p>
<p>Network consultation</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!--精品推荐区域-->
<section class="jptj tag-same">
<div class="center-wrap">
<div class="top">
<h2>精品推荐</h2>
<h3>Boutique recommendation</h3>
<span></span>
</div>
<div class="content">
<a href="javascript:;">
<img src="img/prev.png" class="arrow prev" />
<img src="img/prev_active.png" class="arrow prev active" />
<img src="img/next.png" class="arrow next" />
<img src="img/next_active.png" class="arrow next active" />
</a>
<ul class="clearfix">
<li>
<div class="picbox">
<img src="img/recommend1.png" />
</div>
<div class="wordbox">
轻奢风格样板房客厅色彩搭配装修设计
</div>
</li>
<li>
<div class="picbox">
<img src="img/recommend2.png" />
</div>
<div class="wordbox">
简约美式风格卧室衣柜设计
</div>
</li>
<li>
<div class="picbox">
<img src="img/recommend3.png" />
</div>
<div class="wordbox">
轻奢风格L型厨房装修设计
</div>
</li>
</ul>
</div>
</div>
</section>
<!--新闻中心区域-->
<section class="xwzx tag-same">
<div class="center">
<div class="top">
<h2>新闻中心</h2>
<h3>press center</h3>
<span></span>
</div>
<div class="content">
<ul class="clearfix">
<li class="clearfix">
<a href="javascript:;">
<div class="tag">
<img src="img/talk-bg.png" />
<span>01</span>
</div>
</a>
<div class="wordbox">
<h3>最新招标</h3>
<p>重庆业主要求：一居室的户型，想把阳台利用起来，改成一室一厅的户型，业主表示已经请朋友把以前的装修敲了，现在基本是毛坯的状态……</p>
</div>
</li>
<li>
<a href="javascript:;">
<div class="tag">
<img src="img/talk-bg.png" />
<span>02</span>
</div>
</a>
<div class="wordbox">
<h3>装修日记</h3>
<p>终于在北京四环里贷款买了套两居室二手房，还是很欣喜的，为了装好它，我可真是费了心了，毕竟是自己以后的小家，所以我真是没少操心……</p>
</div>
</li>
<li>
<a href="javascript:;">
<div class="tag">
<img src="img/talk-bg.png" />
<span>03</span>
</div>
</a>
<div class="wordbox">
<h3>装修百科</h3>
<p>买房之后，无论是毛坯房还是留下二手房，很多业主都会选择进行装修。装修可以为你带来一个你喜欢的房屋，同时满足你需要的生活方式……</p>
</div>
</li>
<li>
<a href="javascript:;">
<div class="tag">
<img src="img/talk-bg.png" />
<span>04</span>
</div>
</a>
<div class="wordbox">
<h3>热门搜索</h3>
<p>选择防盗门最重要的就是工艺质量：应特别注意检查有无焊接缺陷，诸如开焊、未焊、漏焊等现象。看门扇与门框的配合是否密实，间隙是否均匀……</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<!--footer区域-->
<footer class="footer">
<!--联系信息区-->
<div class="lxxx clearfix">
<div class="center-wrap">
<h2>慕家居</h2>
<div class="text">
<p>咨询电话：010-88888888</p>
<p>公司网址：www.imooc.com</p>
<p>邮箱：KEFU@IMOOC.com</p>
</div>
</div>
</div>
<!--版权区-->
<div class="bq">
Copyright © 2020 imooc.com All Rights Reserved | 京ICP备
</div>
</footer>
<!--轮播图js-->
<script type="text/javascript" src="js/carousel.js"></script>
<!--切换商品js-->
<script type="text/javascript" src="js/change_sp.js"></script>
</body>
</html>
mu_household.css
/*top区*/
.header .top{
width: 100%;
height: 40px;
background-color: #0058AA;
}
.header .top span{
float: right;
font-size: 18px;
color: #FFFFFF;
line-height: 40px;
}
/*header导航区*/
.header .nav{
width: 100%;
height: 121px;
}
.header .nav h1{
float: left;
font-size: 64px;
color: #0058AA;
line-height: 91px;
margin-top: 19px;
margin-right: 109.1px;
cursor: pointer;
}
.header .nav ul{
float: left;
}
.header .nav ul li{
float: left;
width: 64px;
height: 91px;
margin-top: 19px;
margin-right: 60.9px;
position: relative;
}
.header .nav ul li:nth-last-child{
margin-right: 62px;
}
.header .nav ul li .bg-color{
width: 50px;
height: 50px;
background-color: #FFFFFF;
margin-left: 7px;
border-radius: 50%;
position: relative;
}
.header .nav ul li img{
width: 33px;
height: 33px;
position: absolute;
top: 8px;
left: 8.5px;
}
.header .nav ul li img.white{
display: none;
}
.header .nav ul li .bg-color:hover{
background-color: #0058AA;
animation: nav .7s linear 0s alternate infinite;
}
.header .nav ul li .bg-color:hover img.white{
display: block;
}
.header .nav ul li .bg-color:hover img:nth-child(1){
display: none;
}
@keyframes nav{
from{
transform: scale(1);
}
to{
transform: scale(1.2);
}
}
.header .nav ul li p{
font-size: 16px;
color: #545454;
position: absolute;
bottom: 0;
left: 0;
}
.header .nav .search{
position: relative;
display: inline-block;
}
.header .nav .search form input:nth-child(1){
width: 213px;
height: 37px;
border: 1px solid #D3D3D3;
border-right: none;
margin-top: 51px;
font-size: 14px;
color: #545454;
padding-left: 15px;
outline: none;
}
.header .nav .search form input:nth-child(2){
width: 48px;
height: 39px;
background-color: #0058AA;
border: 1px solid #D3D3D3;
border-left: none;
position: absolute;
top: 51px;
right: 0;
outline: none;
cursor: pointer;
}
.header .nav .search img{
width: 33px;
height: 33px;
position: absolute;
top: 55px;
right: 6px;
cursor: pointer;
}
/*banner区*/
.banner,.banner img{
width: 100%;
height: 650px;
}
.banner{
position: relative;
overflow: hidden;
cursor: pointer;
}
.banner .carousel_list{
width: 400%;
/*translateX中的%表示相对于它本身的宽度的多少倍*/
/*transform: translateX(-25%);*/
transition: transform .5s ease 0s;
}
.banner .carousel_list li{
float: left;
width: 25%;
}
.banner .carousel_list li img{
width: 100%;
}
.banner ol{
position: absolute;
bottom: 50px;
left: 50%;
margin-left: -21px;
z-index: 9999;
}
.banner ol li{
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #FFFFFF;
margin-right: 6px;
}
.banner ol li:last-child{
margin-right: 0px;
}
.banner ol li.current{
background-color: #0058AA;
}
/*商品区*/
.sp,.sp .center-wrap,.sp ul{
height: 304px;
/*overflow: hidden;*/
}
.sp .center-wrap{
width: 2305px;
}
.sp ul{
padding: 38.3px 0 32px 0;
min-width: 1201px;
margin: 0 auto;
}
.sp ul li{
width: 171px;
height: 233.7px;
padding-right: 50px;
float: left;
}
.sp ul li:last-child{
padding-right: 72px;
}
.sp ul li:nth-child(1){
padding-left: 73px;
}
.sp .center-wrap{
position: relative;
}
.sp .arrow{
width: 48px;
height: 48px;
position: absolute;
top: 136px;
}
.sp img.prev{
left: 0;
}
.sp img.next{
right: 0;
}
.sp img.active{
display: none;
}
.sp img.prev:hover+img.active,.sp img.next:hover+img.active{
display: block;
}
.sp img.prev:hover,.sp img.next:hover{
display: none;
}
.sp ul li img{
width: 171px;
height: 175px;
}
.sp ul li.big img{
height: 175.7px;
}
.sp ul li p{
font-size: 18px;
color: #838383;
padding-top: 9.7px;
}
.sp ul li.big p{
padding-top: 9px;
}
/*了解我们区*/
.ljwm{
height: 456px;
}
.tag-same .top h2{
font-size: 32px;
color: #696868;
text-align: center;
}
.tag-same .top h3{
font-size: 18px;
color: #9B9B9B;
text-align: center;
padding: 2px 9px 11px;
}
.tag-same .top{
height: 82px;
position: relative;
}
.tag-same .top span{
display: inline-block;
width: 93px;
height: 3px;
background-color: #0058AA;
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -46.5px;
}
.ljwm .top h2::before,.ljwm .top h2::after,.xwzx .top h2::before,.xwzx .top h2::after{
content: '';
display: block;
width: 497px;
height: 1px;
background-color: #808080;
}
.ljwm .top h2::before,.xwzx .top h2::before{
position: absolute;
left: 0;
top: 43px;
}
.ljwm .top h2::after,.xwzx .top h2::after{
position: absolute;
right: 0;
top: 43px;
}
.ljwm .content{
margin-top: 36px;
height: 256px;
}
.ljwm .content .left{
width: 239px;
float: left;
margin-right: 146px;
}
.ljwm .content .middle{
width: 384px;
height: 256px;
float: left;
margin-right: 113px;
overflow: hidden;
}
.ljwm .content .middle img{
width: 384px;
height: 256px;
transition: transform 1s linear 0s;
}
.ljwm .content .middle img:hover{
transform: scale(1.2);
}
.ljwm .content .right{
width: 273px;
height: 203px;
float: left;
}
.ljwm .content .left h4{
font-size: 26px;
color: #0058AA;
}
.ljwm .content .left p:nth-of-type(1){
font-size: 21px;
color: #5A5A5A;
line-height: 41px;
}
.ljwm .content .left p:nth-of-type(2){
width: 142px;
height: 4px;
background-color: #0058AA;
}
.ljwm .content .left p:nth-of-type(3){
font-size: 18px;
color: #7B7C7C;
line-height: 26px;
padding: 24px 0 27px 0;
}
.ljwm .content .left p.button{
width: 130px;
height: 38px;
background-color: #0058AA;
font-size: 18px;
text-align: center;
line-height: 38px;
color: #FFFFFF;
}
.ljwm .content .left p.button:hover{
animation: ljgd 1s linear 0s alternate infinite;
}
@keyframes ljgd{
from{
transform: rotateZ(15deg);
}
to{
transform: rotateZ(-15deg);
}
}
.ljwm .content .right li{
width: 273px;
height: 61px;
background-color: #CCCCCC;
margin-bottom: 10px;
position: relative;
transition: background-color 0.5s linear 0s;
}
.ljwm .content .right li:hover{
background-color: #0058AA;
}
.ljwm .content .right li:last-child{
margin-bottom: 0;
}
.ljwm .content .right li img{
position: absolute;
left: 30px;
bottom: 13px;
width: 40px;
height: 34px;
}
.ljwm .content .right li p:nth-of-type(1){
font-size: 22px;
color: #FFFFFF;
padding-left: 89px;
padding-top: 10px;
}
.ljwm .content .right li p:nth-of-type(2){
font-size: 12px;
color: #FFFFFF;
padding-left: 89px;
}
/*精品推荐区*/
.jptj{
height: 590px;
background-color: #EFF0F4;
}
.jptj .top{
padding-top: 70px;
}
.jptj .content{
height: 326px;
padding-top: 41px;
position: relative;
}
.jptj .content ul li{
float: left;
}
.jptj .content ul li:nth-of-type(1){
padding: 0 22.9px 0 61.1px;
}
.jptj .content ul li:nth-of-type(2){
padding-right: 24.7px;
}
.jptj .content ul li:nth-of-type(3){
padding-right: 56.3px;
}
.jptj .content ul li div.picbox,.jptj .content ul li div.picbox img{
width: 345px;
height: 326px;
}
.jptj .arrow{
width: 48px;
height: 48px;
position: absolute;
top: 170px;
z-index: 9999;
}
.jptj img.prev{
left: 0;
}
.jptj img.next{
right: 0;
}
.jptj img.active{
display: none;
}
.jptj img.prev:hover+img.active,.jptj img.next:hover+img.active{
display: block;
}
.jptj img.prev:hover,.jptj img.next:hover{
display: none;
}
.jptj .content ul li{
position: relative;
}
.jptj .content ul li div.wordbox{
width: 325px;
height: 45px;
background-color: rgba(0,0,0,0.5);
position: absolute;
bottom: 0;
left: 0;
font-size: 16px;
color: #FFFFFF;
line-height: 45px;
padding-left: 20px;
}
.jptj .content ul li:nth-child(1) div.wordbox{
left: 61.1px;
}
/*新闻中心区*/
.xwzx{
width: 100%;
height: 463px
}
.xwzx .top{
margin-top: 82px;
}
.xwzx .content{
height: 258px;
margin-top: 70px;
}
.xwzx .content ul li{
width: 503px;
height: 109px;
float: left;
margin-right: 74px;
}
.xwzx .content ul li div.tag img{
width: 65px;
height: 65px;
}
.xwzx .content ul li div.tag{
position: relative;
float: left;
padding-right: 38px;
}
.xwzx .content ul li div.tag span{
font-size: 40px;
color: #FFFFFF;
position: absolute;
top: 2px;
left: 9px;
}
.xwzx .content ul li div.tag:hover{
animation: up 0.5s linear 0s alternate;
}
@keyframes up{
from{
transform: translateY(0);
}
to{
transform: translateY(-20px);
}
}
.xwzx .content ul li div.wordbox{
width: 400px;
color: #4A4A4A;
float: left;
}
.xwzx .content ul li div.wordbox h3{
font-size: 21px;
padding-bottom: 12px;
}
.xwzx .content ul li div.wordbox p{
font-size: 18px;
}
.xwzx .content ul li:nth-of-type(3),.xwzx .content ul li:last-child{
margin-top: 40px;
}
/*footer区*/
.footer{
height: 240px;
background-color: #06142F;
}
.footer .bq{
height: 30px;
background-color: #202C46;
font-size: 14px;
color: #FFFFFF;
text-align: center;
line-height: 30px;
}
.footer .lxxx{
height: 210px;
}
.footer .lxxx h2{
font-size: 48px;
color: #FFFFFF;
float: left;
line-height: 210px;
}
.footer .lxxx .text{
float: left;
padding-left: 101px;
font-size: 16px;
color: #FFFFFF;
line-height: 40px;
padding-top: 53px;
}
base.css：
*{
padding: 0;
margin: 0;
}
body{
font-family: "微软雅黑";
}
/*定模板*/
.center-wrap{
width: 1201px;
margin: 0 auto;
}
.center{
width: 1155px;
margin: 0 auto;
}
/*清楚浮动*/
.clearfix::after{
content: '';
display: block;
clear: both;
overflow: hidden;
}
a{
text-decoration: none;
}
reset.css：
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html {
color: #000;
background: #FFF
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0
}
table {
border-collapse: collapse;
border-spacing: 0
}
fieldset,
img {
border: 0
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: normal
}
ol,
ul {
list-style: none
}
caption,
th {
text-align: left
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal
}
q:before,
q:after {
content: ''
}
abbr,
acronym {
border: 0;
font-variant: normal
}
sup {
vertical-align: text-top
}
sub {
vertical-align: text-bottom
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
*font-size: 100%
}
legend {
color: #000
}
#yui3-css-stamp.cssreset {
display: none
}
友情小提示：不要反复提交问题哦！相似问题