慕家居页面的问题，请老师看下
相关代码
慕家居页面的问题
请老师帮忙看下，为什么页面底部还有滚动条，自己实在找不到哪里宽度有问题了。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/css.css">
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<header>
<div class="header_title">
<div class='header_tel'>服务热线：400-8888-888</div>
</div>
<div class='header_nav center-box oh'>
<div class='header_logo'>
<h2 class='logo'>慕家居</h2>
</div>
<div class="header_menu">
<ul>
<li>
<a href="#"></a>
<span>网站首页</span>
</li>
<li>
<a href="#"></a>
<span>关于我们</span>
</li>
<li>
<a href="#"></a>
<span>服务建设</span>
</li>
<li>
<a href="#"></a>
<span>产品中心</span>
</li>
<li>
<a href="#"></a>
<span>服务大厅</span>
</li>
</ul>
</div>
<div class="header_search">
<div class='search_text'>
<input type="text" placeholder="请输入搜索内容" class='search'>
<button class='search_btn'><span class='iconfont'></span></button>
</div>
</div>
</div>
</header>
<div class='banner'>
<div class='banner_box'>
<a href="#"><img src="img/banner01.png" alt=""></a>
<ul class='round_list'>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
<section>
<div class='content common'>
<div class='content_advertise center-box'>
<div class='left_icon'><a href="#"></a></div>
<div class='right_icon'><a href="#"></a></div>
<ul class='center-box'>
<li>
<a href="#">
<img src="img/advertise1.png" alt="">
<span>时尚卫生间墙面颜色2029装饰设计</span>
</a>
</li>
<li>
<a href="#">
<img src="img/advertise2.png" alt="">
<span>现代北欧风格厨房装2029饰效果图</span>
</a>
</li>
<li>
<a href="#">
<img src="img/advertise3.png" alt="">
<span>现代时尚北欧风格卧2029室装饰画</span>
</a>
</li>
<li>
<a href="#">
<img src="img/advertise4.png" alt="">
<span>130平简约现代北欧2029风格装修</span>
</a>
</li>
<li>
<a href="#">
<img src="img/advertise5.png" alt="">
<span>现代北欧风格小客厅2029装修设计</span>
</a>
</li>
</ul>
</div>
<div class='content_aboutusbox center-box common_s'>
<div class='content_aboutuslogo common_ss'>
<p class='us'>了解我们</p>
<p class='usEng'>about us</p>
</div>
</div>
<div class='content_aboutus center-box'>
<div class="usleft_box">
<h3>关于我们</h3>
<dl>
<dt>慕家居装饰材料有限公司</dt>
<dd>
慕家居家居装修网北欧风格家
具图片专区,是国内海量全面的
高质量北欧风格家具图片库…
</dd>
</dl>
<a href="#">了解更多</a>
</div>
<div class="uscenter_box">
<img src="img/shafa.png" alt="">
</div>
<div class="usright_box">
<dl>
<dt>在线留言</dt>
<dd>on-line message</dd>
</dl>
<dl>
<dt>广告经营</dt>
<dd>Advertising management</dd>
</dl>
<dl>
<dt>网络咨询</dt>
<dd>Network consultation</dd>
</dl>
</div>
</div>
</div>
<div class='boutique_box'>
<div class='boutique_title center-box'>
<h3>精品推荐</h3>
<span class='titel'>Boutique recommendation</span>
</div>
<div class='boutique_pic center-box'>
<div class='boutiqueleft_icon'><a href="#"></a></div>
<div class='boutiqueright_icon'><a href="#"></a></div>
<ul class='boutique_pic_list'>
<li>
<a href="#">
<img src="img/recommend1.png" alt="">
<span class='sp'>轻奢风格样板房客厅色彩搭配装修设计</span>
</a>
</li>
<li>
<a href="#">
<img src="img/recommend2.png" alt="">
<span class='sp'>简约美式风格卧室衣柜设计</span>
</a>
</li>
<li>
<a href="#">
<img src="img/recommend3.png" alt="">
<span class='sp'>轻奢风格L型厨房装修设计</span>
</a>
</li>
</ul>
</div>
</div>
<div class='news common'>
<div class='news_lsit center-box common_s'>
<div class='news_lsit_title common_ss'>
<p class='ne us'>新闻中心</p>
<p class='neEng usEng '>press center</p>
</div>
<div class='news_list_count'>
<dl>
<p>01</p>
<dt>最新招标</dt>
<dd><a href="#">重庆业主要求：一居室的户型，想把阳台利用起来，改成一室一厅的户型，业主表示已经请朋友把以前的装修敲了，现在基本是毛坯的状态……</a></dd>
</dl>
<dl>
<p>02</p>
<dt>装修日记</dt>
<dd><a href="#">终于在北京四环里贷款买了套两居室二手房，还是很欣喜的，为了装好它，我可真是费了心了，毕竟是自己以后的小家，所以我真是没少操心……</a></dd>
</dl>
<dl>
<p>03</p>
<dt>装修百科</dt>
<dd><a href="#">买房之后，无论是毛坯房还是留下二手房，很多业主都会选择进行装修。装修可以为你带来一个你喜欢的房屋，同时满足你需要的生活方式……</a></dd>
</dl>
<dl>
<p>04</p>
<dt>热门搜索</dt>
<dd><a href="#">选择防盗门最重要的就是工艺质量：应特别注意检查有无焊接缺陷，诸如开焊、未焊、漏焊等现象。看门扇与门框的配合是否密实，间隙是否均匀……</a></dd>
</dl>
</div>
</div>
</div>
</section>
<footer>
<div class='foottop'>
<h1>慕家居</h1>
<ul>
<li>咨询电话：010-88888888</li>
<li>公司网址：www.imooc.com</li>
<li>邮箱：KEFU@IMOOC.com</li>
</ul>
</div>
<div class='footdown'>
<span>Copyright © 2020 imooc.com All Rights Reserved | 京ICP备 </span>
</div>
</footer>
</body>
</html>
/* 头部 */
header{
min-width:1920px;
width: 100%;
}
header>.header_title{
width: 100%;
height: 40px;
background-color: #0058AA;
}
header>.header_title>.header_tel{
width: 211px;
height: 40px;
line-height: 40px;
float: right;
margin-right: 360px;
font-size: 18px;
color:#fff;
}
header>.header_nav{
width: 1201px;
height: 121px;
}
header>.header_nav>.header_logo{
width: 192px;
height: 91px;
margin-top:19px;
float: left;
}
header>.header_nav>.header_logo>.logo{
width: 192px;
height: 91px;
color: #0058AA;
font-size: 64px;
line-height: 91px;
}
header>.header_nav>.header_menu{
width: 560.9px;
height: 91px;
float: left;
margin-top:19px;
margin-left:109.1px;
}
header>.header_nav>.header_menu>ul>li{
float: left;
margin-right: 74.9px;
width: 33px;
height: 33px;
}
header>.header_nav>.header_menu>ul>li>a{
width: 50px;
height: 50px;
display: block;
}
header>.header_nav>.header_menu>ul>li:nth-of-type(1) a{
background: url('../img/home-gry.png') no-repeat center center;
}
header>.header_nav>.header_menu>ul>li:nth-of-type(2) a{
background: url('../img/abouts-gry.png') no-repeat center center;
}
header>.header_nav>.header_menu>ul>li:nth-of-type(3) a{
background: url('../img/kefu-gry.png') no-repeat center center;
}
header>.header_nav>.header_menu>ul>li:nth-of-type(4) a{
background: url('../img/chanpin-gry.png') no-repeat center center;
}
header>.header_nav>.header_menu>ul>li:nth-of-type(5) a{
background: url('../img/fuwu-gry.png') no-repeat center center;
}
header>.header_nav>.header_menu>ul>li a:hover{
border-radius: 50%;
}
header>.header_nav>.header_menu>ul>li:nth-of-type(1) a:hover{
background: blue url('../img/home-white.png') no-repeat center center;
}
header>.header_nav>.header_menu>ul>li:nth-of-type(2) a:hover{
background: blue url('../img/abouts-white.png') no-repeat center center;
}
header>.header_nav>.header_menu>ul>li:nth-of-type(3) a:hover{
background: blue url('../img/kefu-white.png') no-repeat center center;
}
header>.header_nav>.header_menu>ul>li:nth-of-type(4) a:hover{
background: blue url('../img/chanpin-white.png') no-repeat center center;
}
header>.header_nav>.header_menu>ul>li:nth-of-type(5) a:hover{
background: blue url('../img/fuwu-white.png') no-repeat center center;
}
header>.header_nav>.header_menu>ul>li:last-child{
margin-right:0;
}
header>.header_nav>.header_menu>ul>li>span{
width: 64px;
height: 21px;
display: block;
margin-top:20px;
margin-left: -4px;
font-size: 16px;
color: #545454;
}
header>.header_nav>.header_search{
width: 277px;
height: 39px;
float: left;
margin-left: 62px;
margin-top:50px;
position: relative;
}
header>.header_nav>.header_search>.search_text{
border: 1px solid #D3D3D3;
height:37px;
width: 275px;
}
header>.header_nav>.header_search>.search_text>.search{
width: 229px;
height: 37px;
outline: none;
border: none;
text-indent: 1em;
font-size: 14px;
}
header>.header_nav>.header_search>.search_text>.search_btn{
width: 48px;
height: 40px;
background-color: blue;
border: none;
position: absolute;
top:-1px;
}
header>.header_nav>.header_search>.search_text>.search_btn>span{
font-size: 33px;
}
/* 轮播图 */
.banner{
width: 100%;
min-width: 1920px;
height: 650px;
}
.banner>.banner_box{
width: 1920px;
height: 650px;
position: relative;
}
.banner>.banner_box>.round_list{
width: 44px;
height: 10px;
position: absolute;
bottom:50px;
left:50%;
margin-left:-22px;
}
.banner>.banner_box>.round_list>li{
float: left;
width: 10px;
height: 10px;
background-color:#fff;
margin-right: 6px;
border-radius: 50%;
}
.banner>.banner_box>.round_list>li:last-child{
margin-right: 0px;
}
.banner>.banner_box>.round_list>li:hover{
background: #0058AA;
}
/* 中间内容 */
section{
width: 100%;
}
section>.content{
width: 1920px;
height: 760px;
overflow: hidden;
}
section>.content>.content_advertise{
width: 1201px;
height: 233.7px;
position: relative;
margin-top:38.3px;
}
section>.content>.content_advertise>.left_icon,.right_icon{
position: absolute;
width: 48px;
height: 48px;
top:50%;
margin-top:-24px;
background-size: 48px 48px;
background-repeat: no-repeat;
}
section>.content>.content_advertise>.left_icon{
background-image: url('../img/left.png');
}
section>.content>.content_advertise>.right_icon{
background-image: url('../img/right.png');
}
section>.content>.content_advertise>.left_icon:hover{
background-image: url('../img/left2.png');
}
section>.content>.content_advertise>.right_icon:hover{
background-image: url('../img/right2.png');
}
section>.content>.content_advertise>.left_icon{
left:0px;
}
section>.content>.content_advertise>.right_icon{
right:0px;
}
section>.content>.content_advertise>ul{
width: 1056px;
height: 233.7px;
}
section>.content>.content_advertise>ul>li{
width: 171px;
height: 175.7px;
margin-right: 50px;
float: left;
}
section>.content>.content_advertise>ul>li:last-child{
margin-right:0px;
}
section>.content>.content_advertise>ul>li>a{
text-decoration: none;
}
section>.content>.content_advertise>ul>li>a>img{
width: 171px;
height: 175.7px;
margin-bottom: 10px;
}
section>.content>.content_advertise>ul>li>a>span{
font-size: 18px;
color: #838383;
}
section>.content>.content_aboutusbox{
position: relative;
width: 1155px;
height: 79px;
}
section>.content>.content_aboutuslogo{
margin-top:32px;
}
section>.content>.content_aboutusbox::before{
content: '';
border-bottom: 1px solid #808080;
width: 1155px;
height: 2px;
position: absolute;
left:0px;
top:50%;
margin-top:1px;
}
section>.content>.content_aboutus{
width: 1155px;
height: 256px;
margin-top:36px;
}
section>.content>.content_aboutus>.usleft_box,.uscenter_box,.usright_box{
float: left;
}
section>.content>.content_aboutus>.usleft_box{
width: 239px;
height: 256px;
margin-right: 146px;
position: relative;
}
section>.content>.content_aboutus>.uscenter_box{
width: 384px;
height: 256px;
}
section>.content>.content_aboutus>.usright_box{
width: 273px;
height: 256px;
margin-left:113px;
}
section>.content>.content_aboutus>.usleft_box>h3{
font-size: 26px;
color: #0058AA;
}
section>.content>.content_aboutus>.usleft_box>dl>dt{
height: 41px;
font-size: 21px;
color: #5A5A5A;
line-height: 41px;
margin-bottom: 24px;
}
section>.content>.content_aboutus>.usleft_box>dl>dt::before{
content: '';
position: absolute;
width: 142px;
height: 4px;
background-color: #0058AA;
top:78px;
}
section>.content>.content_aboutus>.usleft_box>dl>dd{
height: 78px;
width: 239px;
font-size: 18px;
color: #7B7C7C;
line-height: 26px;
}
section>.content>.content_aboutus>.usleft_box>a{
width: 130px;
height: 38px;
display: block;
font-size: 18px;
color: #FFFFFF;
text-decoration: none;
background-color: #0058AA;
margin-top:27px;
text-align: center;
line-height: 38px;
}
section>.content>.content_aboutus>.usright_box>dl{
width: 184px;
height: 61px;
margin-top: 10px;
padding-left:89px;
}
section>.content>.content_aboutus>.usright_box>dl>dt{
font-size: 22px;
color: #FFFFFF;
padding-top:10px;
}
section>.content>.content_aboutus>.usright_box>dl>dd{
font-size: 12px;
color: #FFFFFF;
}
section>.content>.content_aboutus>.usright_box>dl:nth-of-type(1){
background: #0058AA url('../img/shang.png') no-repeat 30px 14px;
}
section>.content>.content_aboutus>.usright_box>dl:nth-of-type(2){
background: #CCCCCC url('../img/zhong.png') no-repeat 30px 14px;
}
section>.content>.content_aboutus>.usright_box>dl:nth-of-type(3){
background: #CCCCCC url('../img/xia.png') no-repeat 30px 14px;
}
/* 精品推荐 */
section>.boutique_box{
width: 1920px;
height: 590px;
overflow: hidden;
position: relative;
}
section>.boutique_box>.boutique_title{
width: 1152px;
height: 195px;
}
section>.boutique_box>.boutique_title>h3,.titel{
display: block;
text-align: center;
}
section>.boutique_box>.boutique_title>h3{
font-size: 32px;
color: #696868;
padding-top:70px;
}
section>.boutique_box>.boutique_title>.titel{
font-size: 18px;
color: #9B9B9B;
}
section>.boutique_box>.boutique_title>.titel::before{
content: '';
width: 93px;
height: 3px;
background-color: #0058AA;
position: absolute;
top:145px;
left:50%;
margin-left:-46.5px;
}
section>.boutique_box>.boutique_pic{
width: 1152px;
height: 395px;
}
section>.boutique_box>.boutique_pic>.boutiqueleft_icon,.boutiqueright_icon{
width: 48px;
height: 48px;
position: absolute;
bottom:148px;
background-size: 48px 48px;
background-repeat: no-repeat;
}
section>.boutique_box>.boutique_pic>.boutiqueleft_icon{
left:360px;
background-image: url('../img/left.png');
}
section>.boutique_box>.boutique_pic>.boutiqueright_icon{
right:360px;
background-image: url('../img/right.png');
}
section>.boutique_box>.boutique_pic>.boutiqueleft_icon:hover{
background-image: url('../img/left2.png');
}
section>.boutique_box>.boutique_pic>.boutiqueright_icon:hover{
background-image: url('../img/right2.png');
}
section>.boutique_box>.boutique_pic>.boutique_pic_list>li{
float: left;
margin-left: 29px;
position: relative;
overflow: hidden;
}
section>.boutique_box>.boutique_pic>.boutique_pic_list>li>a{
text-decoration: none;
font-size: 16px;
color: #FFFFFF;
}
section>.boutique_box>.boutique_pic>.boutique_pic_list>li>a>span{
width: 345px;
height: 45px;
display: block;
background-color:rgba(0,0,0,0.50);
position: absolute;
bottom:-45px;
line-height: 45px;
text-indent: 1em;
transition: bottom 1s ease 0s;
}
section>.boutique_box>.boutique_pic>.boutique_pic_list>li:hover span{
bottom:0px;
}
/* 新闻中心 */
section>.news{
width: 1920px;
height: 545px;
}
section>.news>.news_lsit{
width: 1152px;
height: 545px;
}
section>.news>.news_lsit>.news_lsit_title{
width: 1152px;
height: 237px;
position: relative;
}
section>.news>.news_lsit>.news_list_count{
width: 1152px;
height: 308px;
}
section>.news>.news_lsit>.news_lsit_title>.ne{
margin-top:82px;
}
section>.news>.news_lsit>.news_lsit_title>.neEng{
width: 105px;
height: 24px;
margin-left:-52.5px;
bottom: 89px;
}
section>.news>.news_lsit>.news_lsit_title::before{
content: '';
border-bottom: 1px solid #808080;
width: 1155px;
height: 2px;
position: absolute;
left:0px;
bottom:50%;
margin-top:1px;
}
section>.news>.news_lsit>.news_list_count>dl{
width: 400px;
height: 109px;
float: left;
margin-right: 74px;
margin-bottom: 40px;
padding-left:103px;
background: url('../img/talk-bg.png') no-repeat 0px 0px;
position: relative;
}
section>.news>.news_lsit>.news_list_count>dl>p{
position: absolute;
width: 47px;
height: 53px;
left:0;
margin-left:12px;
margin-top:10px;
font-size: 40px;
color: #FFFFFF;
}
section>.news>.news_lsit>.news_list_count>dl:nth-of-type(2),section>.news>.news_lsit>.news_list_count>dl:nth-of-type(4){
margin-right: 0px;
}
section>.news>.news_lsit>.news_list_count>dl>dt{
font-size: 21px;
color: #4A4A4A;
}
section>.news>.news_lsit>.news_list_count>dl>dd>a{
color: #4A4A4A;
font-size: 18px;
text-decoration: none;
}
/* 尾部 */
footer{
width: 100%;
height: 240px;
overflow: hidden;
}
footer>.foottop{
width: 1920px;
height: 210px;
background-color: #06142F;;
}
footer>.foottop>h1{
font-size: 48px;
color: #FFFFFF;
width: 144px;
height: 63px;
float: left;
margin:74px 101px 73px 306px;
}
footer>.foottop>ul{
width: 206px;
float: left;
margin:53px 0 35px 0;
}
footer>.foottop>ul>li{
font-size: 16px;
color: #FFFFFF;
width: 206px;
height: 40px;
line-height: 40px;
}
footer>.footdown{
width: 1920px;
height: 30px;
background-color: #202C46;;
}
footer>.footdown>span{
display: block;
text-align: center;
font-size: 14px;
color: #FFFFFF;
}
16
收起
正在回答 回答被采纳积分+1
1回答
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星