请老师帮忙，精品推荐区左边的箭头有问题，还有新闻中心里面那个数字怎么加进去？页脚区有没有什么需要调整的地方？
来源：5-2 项目作业
一只少年
2021-11-09 16:01:11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>慕家居</title>
<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="center-wrap">
<p>服务热线：400-8888-888</p>
</div>
</div>
</header>
<!-- 导航区 -->
<section class="nav">
<div class="nav-content">
<h1>慕家居</h1>
<div class="useful-links">
<ul>
<li >
<a href="">
<div class="wzsy">
<img src="images/home-gry.png" alt=""></div>
<span>网站首页 </span>
</a>
</li>
<li>
<a href="">
<div class="gywm">
<img src="images/abouts-gry.png" alt="">
</div>
<span>关于我们</span>
</a>
</li>
<li>
<a href="">
<div class="fwjs">
<img src="images/kefu-gry.png" alt=""></div>
<span>服务建设</span>
</a>
</li>
<li>
<a href="">
<div class="cpzx">
<img src="images/chanpin-gry.png" alt=""></div>
<span>产品中心</span>
</a>
</li>
<li>
<a href="">
<div class="fwdt">
<img src="images/fuwu-gry.png" alt=""> </div>
<span>服务大厅</span>
</a>
</li>
</div>
<div class="soso-box">
<input type="text"placeholder="请输入搜索内容">
<button><img src="images/search.png" alt=""></button>
</div>
</div>
</section>
<!-- banner区域 -->
<section class="banner">
<img class="banner-img" src="images/banner01.png" alt="">
<!-- 小圆点 ,ol标签是绝对定位的，但是li是在里面浮动的 -->
<ol>
<li class="cur"></li>
<li></li>
<li></li>
</ol>
</section>
<!-- 商品区 -->
<section class="commodity ">
<div class="center-wrap">
<div class="left-btn"> <a href=""> </a></div>
<div class="right-btn"> <a href=""></a></div>
<ul>
<li class="box">
<a href="">
<div><img src="images/product01.png" alt=""></div>
<span>时尚卫生间墙面颜色
2029装饰设计</span>
</a>
</li>
<li class="box">
<a href="">
<div> <img src="images/product02.png" alt=""></div>
<span>现代北欧风格厨房装
2029饰效果图</span>
</a>
</li>
<li class="box">
<a href="">
<div>
<img src="images/product03.png" alt="">
</div>
<span>现代时尚北欧风格卧
2029室装饰画</span>
</a>
</li>
<li class="box">
<a href="">
<div><img src="images/product04.png" alt=""></div>
<span>130平简约现代北欧
2029风格装修</span>
</a>
</li>
<li class="box">
<a href="">
<div><img src="images/product05.png" alt=""></div>
<span>现代北欧风格小客厅2029装修设计</span>
</a>
</li>
</ul>
</div>
</section>
<!-- 关于我们 -->
<section class="aboutus">
<div class="center-wrap">
<div class="title">
<!-- 线 -->
<div class="line"></div>
<!-- 内容 -->
<div class="text">
<h2>了解我们</h2>
<span>abouts us</span>
<div class="title-line"></div>
</div>
</div>
<!-- 关于我们整个盒子 -->
<div class="news-and-notice">
<!--左侧文字 -->
<div class="news">
<h3>关于我们</h3>
<span>慕家居装饰材料有限公司</span>
<!-- 横线 -->
<div class="blueline"></div>
<em>慕家居家居装修网北欧风格家
具图片专区,是国内海量全面的
高质量北欧风格家具图片库…</em>
<div class="ljgd">
<p> 了解更多</p>
</div>
</div>
<div class="img">
<img src="images/aboutus.png" alt="">
</div>
<div class="ycwz">
<div class="zxly center-wrap">
<img src="images/liuyan.png" alt="">
<a href="">
<p>在线留言</p>
<span>on-line message</span>
</a>
</div>
<div class="ggjy center-wrap">
<img src="images/guanggao.png" alt="">
<a href="">
<p>广告经营</p>
<span>Advertising management</span>
</a>
</div>
<div class="wlzx center-wrap">
<img src="images/wangluo.png" alt="">
<a href="">
<p>网络咨询</p>
<span >Network consultation</span>
</a>
</div>
</div>
</div>
</section>
<!-- 精品推荐 -->
<section class="jptj common-style">
<div class="center-wrap">
<div class="title">
<!-- 内容 -->
<div class="text">
<h2>精品推荐</h2>
<span>Boutique recommendation</span>
<div class="title-line"></div>
</div>
</div>
<!-- 图文整个盒子 -->
<div class="tuwen">
<div class="left-btn"> <a href=""></a></div>
<div class="right-btn"> <a href=""></a></div>
<div class="bd">
<div class="picbox">
<img src="images/recommend1.png" alt="">
<span class="tag">轻奢风格样板房客厅色彩搭配装修设计</span>
</div>
<div class="picbox">
<img src="images/recommend2.png" alt="">
<span class="tag">简约美式风格卧室衣柜设计</span>
</div>
<div class="picbox">
<img src="images/recommend3.png" alt="">
<span class="tag">轻奢风格L型厨房装修设计</span>
</div>
</div>
</div>
</div>
</section>
<!-- 新闻中心 -->
<section class="xwzx">
<div class="center-wrap">
<div class="title">
<!-- 线 -->
<div class="line"></div>
<!-- 内容 -->
<div class="text">
<h2>新闻中心</h2>
<span>press center</span>
<div class="title-line"></div>
</div>
<!-- 新闻中心内容 -->
<div class="content clearfix">
<div class="content-part">
<dl class="zxzb">
<dt>最新招标</dt>
<dd>重庆业主要求：一居室的户型，想把阳台利用起来，改成一室一厅的户型，业主表示已经请朋友把以前的装修敲了，现在基本是毛坯的状态……</dd>
</dl>
<dl class="zxrj">
<dt>装修日记</dt>
<dd>终于在北京四环里贷款买了套两居室二手房，还是很欣喜的，为了装好它，我可真是费了心了，毕竟是自己以后的小家，所以我真是没少操心……</dd>
</dl>
<dl class="zxbk">
<dt>装修百科</dt>
<dd>买房之后，无论是毛坯房还是留下二手房，很多业主都会选择进行装修。装修可以为你带来一个你喜欢的房屋，同时满足你需要的生活方式……</dd>
</dl>
<dl class="rmss">
<dt>热门搜索</dt>
<dd>选择防盗门最重要的就是工艺质量：应特别注意检查有无焊接缺陷，诸如开焊、未焊、漏焊等现象。看门扇与门框的配合是否密实，间隙是否均匀……</dd>
</dl>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<div class="part1">
<div class="center-wrap">
<div class="r1 clearfix">
<h2>慕家居</h2>
<div class="slogan">
<p>咨询电话：010-88888888</p>
<p>公司网址：www.imooc.com</p>
<p>邮箱：KEFU@IMOOC.com</p>
</div>
</div>
</div>
</div>
<div class="part2">
<div class="copyrights">
Copyright © 2020 imooc.com All Rights Reserved | 京ICP备
</div>
</div>
</footer>
</body>
</html>
*{
margin: 0;
padding: 0;
}
/* 去掉所有ul和ol的小圆点 */
ul,ol {
list-style: none;
}
/* 去掉所有超级链接的下划线 */
a{
text-decoration: none;
}
/* 使用继承性，给body标签设置字体 */
body{
font: normal 14px/25px '微软雅黑';
}
.site-head{
width: 100%;
}
.site-head .topbar{
height: 40px;
background-color: #0058AA;
color: white;
line-height: 40px;
}
.site-head .topbar .center-wrap{
width: 1200px;
margin: 0 auto;
text-align: right;
}
/* 导航区 */
.nav{
width: 100%;
}
.nav .nav-content{
width: 1200px;
height: 130px;
margin: 0 auto;
}
.nav .nav-content h1{
float: left;
display: block;
margin-top: 25px;
width: 192px;
height: 91px;
background-image: url(../images/mujiaju.png);
/* 将段首缩进这个属性，设置为负数，是一个很巧妙的做法，可以隐藏文字 */
text-indent: -999em;
}
.nav .useful-links{
float: left;
margin-top: 45.5px;
margin-left: 78px;
}
.nav .useful-links ul li{
float: left;
width: 64px;
margin-right: 61px;
text-align: center;
}
.nav .useful-links ul li:last-child{
margin-right: 0px;
}
.nav .useful-links ul li:hover .wzsy{
background: url(../images/home-white.png) no-repeat ;
width: 40px;
height: 40px;
background-color: #0058AA;
text-align: center;
line-height: 70px;
border-radius: 50%;
margin-left: 12px;
background-position: center;
}
.nav .useful-links ul li:hover .gywm{
background: url(../images/abouts-white.png) no-repeat;
width: 40px;
height: 40px;
background-color: #0058AA;
text-align: center;
line-height: 70px;
border-radius: 50%;
margin-left: 12px;
background-position: center;
}
.nav .useful-links ul li:hover .fwjs{
background: url(../images/kefu-white.png) no-repeat ;
width: 40px;
height: 40px;
background-color: #0058AA;
text-align: center;
line-height: 70px;
border-radius: 50%;
margin-left: 12px;
background-position: center;
}
.nav .useful-links ul li:hover .cpzx{
background: url(../images/chanpin-white.png) no-repeat;
width: 40px;
height: 40px;
background-color: #0058AA;
text-align: center;
line-height: 70px;
border-radius: 50%;
margin-left: 12px;
background-position: center;
}
.nav .useful-links ul li:hover .fwdt{
background: url(../images/fuwu-white.png) no-repeat ;
width: 40px;
height: 40px;
background-color: #0058AA;
text-align: center;
line-height: 70px;
border-radius: 50%;
margin-left: 12px;
background-position: center;
}
.nav .useful-links ul li:hover div img{
display: none;
}
.nav .useful-links ul li:hover div{
animation: hx .5s alternate infinite;
}
@keyframes hx{
from{
transform: scale(1);
}
to{
transform: scale(1.2);
}
}
.nav .useful-links ul li span{
/* 转块，不设置宽度，就相当于width属性为100%了，此时可以文字text-align:center；居中了 */
display: block;
text-align: center;
color: #545454;
font-size: 16px ;
line-height: 21px;
margin-top: 10px;
}
/* 搜索框 */
.nav .soso-box{
width: 288px;
height: 39px;
padding-top: 51px;
float: right;
}
.nav .soso-box input{
float: left;
width: 228px;
height: 36px;
border: 1px solid #D3D3D3;
font-size: 14px;
/* 设置触碰时候的鼠标指针样式 */
cursor: pointer;
/* 取消默认的外线（外线是文本框特有的东西） */
outline: none;
padding-left: 10px;
/* 相对定位来微调位置 */
position: relative;
top: 4px;
right: 4px;
}
.nav .soso-box button{
float: left;
width: 48px;
height: 39px;
background-color: #0058AA;
color: white;
text-align: center;
line-height: 39px;
font-size: 18px;
margin-top: 3px;
border: none;
margin-left: -4px;
/* 设置触碰时候的鼠标指针样式 */
cursor: pointer;
}
.nav .soso-box button img{
margin-top: 5.5px;
}
/* banner区域 */
.banner{
position: relative;
}
.banner .banner-img{
width: 100%;
vertical-align: top;
}
.banner ol{
position: absolute;
width: 42px;
height: 10px;
bottom: 50px;
left: 50%;
/* 水平居中，拉回负的width的一半 */
margin-left: -21px;
}
.banner ol li{
float: left;
width: 10px;
height: 10px;
background-color: white;
margin-right: 6px;
border-radius: 50%;
}
/* 最后一个没有margin */
.banner ol li:last-child{
margin-right: 0;
}
.banner ol li.cur{
width: 10px;
background-color: #0058AA;
}
/* 商品区 */
.commodity .center-wrap{
width: 1155px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.commodity ul{
margin-top: 38px;
}
.commodity ul li.box{
float: left;
width: 171px;
height: 234px;
margin-right: 50px;
}
.commodity ul li.box:first-child{
margin-left: 50px;
}
.commodity ul li.box img{
width: 100%;
vertical-align: top;
margin-bottom: 10px;
}
.commodity .center-wrap .left-btn{
position: absolute;
left: 0;
top: 50%;
margin-top: -24px;
width: 48px;
height: 48px;
background: url(../images/prev.png);
}
.commodity .center-wrap .left-btn:hover {
background: url(../images/prev_active.png);
width: 48px;
height: 48px;
}
.commodity .center-wrap .right-btn{
position: absolute;
right: 0;
top: 50%;
margin-top: -24px;
width: 48px;
height: 48px;
background: url(../images/next.png);
}
.commodity .center-wrap .right-btn:hover {
background-image: url(../images/next_active.png);
width: 48px;
height: 48px;
}
.commodity ul li.box span{
display: block;
width: 162px;
height: 48px;
font-size: 18px;
color: #838383;
line-height: 22px;
}
/* 了解我们区 */
.aboutus .center-wrap{
width: 1155px;
margin: 30px auto 50px;
overflow: hidden;
}
.aboutus .text{
width: 155px;
/* 给文字内容设置白色背景*/
background-color: white;
/* 通过定位，让其居中显示，覆盖在横线上显示 */
position: absolute;
top: 0;
left: 50%;
margin-left: -77.5px;
text-align: center;
}
.aboutus .text h2{
font-size: 32px;
color: #696868;
font-weight: normal;
}
.aboutus .text span{
font-size: 18px;
color: #9B9B9B;
display: inline-block;
margin-top: 8px;
}
.aboutus .title{
/* 设置高度 */
height: 70px;
/* 上下间距 */
margin: 20px 0;
/* 相对定位 */
position: relative;
}
.line{
width: 100%;
height: 1px;
background: #808080 ;
position: absolute;
top: 50%;
}
.title-line{
width: 93px;
height: 3px;
background: #0058AA;
display: inline-block;
position: relative;
top: -10px;
}
.news-and-notice{
width: 1155px;
}
.news-and-notice .news{
float: left;
}
.news-and-notice .news h3{
font-size: 26px;
color: #0058AA;
}
.news span{
display: block;
width: 231px;
height: 41px;
font-size: 21px;
color: #5A5A5A;
line-height: 41px;
}
.news .blueline{
width: 142px;
height: 4px;
background: #0058AA;
}
.news em{
display: block;
width: 239px;
height: 78px;
font-size: 18px;
color: #7B7C7C;
line-height: 26px;
margin: 15px 0;
}
.news .ljgd{
width: 130px;
height: 38px;
font-size: 18px;
color: #FFFFFF;
text-align: center;
background: #0058AA;
line-height: 38px;
margin-left: 3px;
}
.news .ljgd:hover{
animation: ud 1s ease 0s infinite alternate;
}
@keyframes ud{
from{
transform:rotateZ(10deg);
}
to{
transform:rotateZ(-10deg);
}
}
.news-and-notice .img{
float: left;
width: 384px;
height: 256px;
margin-left: 147px;
overflow: hidden;
}
.news-and-notice img{
transition: transform .5s ease 0s;
}
/* 公共的一个特效：鼠标触碰图片，能够有放大效果 */
.news-and-notice img:hover{
transform: scale(1.2);
}
.news-and-notice .ycwz .center-wrap{
float: right;
width: 273px;
height: 61px;
background: #CCCCCC;
overflow: hidden;
margin-bottom: 0px;
margin-top: 10px;
position: relative;
}
.news-and-notice .ycwz .center-wrap:hover{
transition: background .4s ease 0s;
background: #0058AA;
}
.news-and-notice .ycwz .center-wrap:first-child{
margin-top: 0px;
}
.news-and-notice .ycwz .center-wrap img{
width: 40px;
height: 34px;
margin: 14px 0 14px 30px;
}
.news-and-notice .ycwz .center-wrap a{
position: absolute;
width: 80px;
top: 10px;
}
.news-and-notice .ycwz .center-wrap p{
font-size: 22px;
color: #FFFFFF;
display: block;
width: 88px;
height: 29px;
}
.news-and-notice .ycwz .center-wrap span{
font-size: 12px;
color: #FFFFFF;
display: block;
width: 150px;
}
/* 精品推荐 */
.jptj{
width: 1920px;
background: #EFF0F4;
}
.jptj .center-wrap{
width: 1155px;
margin: 30px auto 50px;
overflow: hidden;
height: 590px;
position: relative;
}
.jptj .text{
width: 155px;
/* 通过定位，让其居中显示，覆盖在横线上显示 */
position: absolute;
top: 0;
left: 50%;
margin-left: -100px;
text-align: center;
}
.jptj .text h2{
font-size: 32px;
color: #696868;
font-weight: normal;
}
.jptj .text span{
font-size: 18px;
color: #9B9B9B;
display: inline-block;
margin-top: 8px;
}
.jptj .title{
/* 设置高度 */
height: 70px;
/* 上下间距 */
margin: 20px 0;
/* 相对定位 */
position: relative;
}
.jptj.line{
width: 100%;
height: 1px;
background: #808080 ;
position: absolute;
top: 50%;
}
.jptj .title-line{
width: 93px;
height: 3px;
background: #0058AA;
display: inline-block;
position: relative;
top: -10px;
}
.jptj .tuwen{
width:1155px;
margin-top: 41px;
}
.jptj .tuwen .left-btn{
position: absolute;
left: 0;
top: 50%;
margin-top: -24px;
width: 48px;
height: 48px;
background: url(../images/prev.png);
}
.jptj .tuwen .left-btn:hover {
background: url(../images/prev_active.png);
width: 48px;
height: 48px;
}
.jptj .tuwen .right-btn{
position: absolute;
right: 0;
top: 50%;
margin-top: -24px;
width: 48px;
height: 48px;
background: url(../images/next.png);
}
.jptj .tuwen .right-btn:hover {
background-image: url(../images/next_active.png);
width: 48px;
height: 48px;
}
.jptj .bd .picbox{
float: left;
}
.common-style .bd .picbox{
position: relative;
height: 326px;
margin-left: 22.9px;
}
.jptj .bd .picbox img{
width: 345px;
height: 326px;
}
.common-style .bd .picbox .tag{
width: 345px;
height: 45px;
color: white;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.55);
text-align: center;
font-size: 16px;
padding: 12px;
box-sizing: border-box;
}
/* 新闻中心 */
.xwzx .center-wrap{
width: 1155px;
height: 545px;
margin: 30px auto 50px;
overflow: hidden;
}
.xwzx .text{
width: 155px;
/* 给文字内容设置白色背景*/
background-color: white;
/* 通过定位，让其居中显示，覆盖在横线上显示 */
position: absolute;
top: 0;
left: 50%;
margin-left: -77.5px;
text-align: center;
}
.xwzx .text h2{
font-size: 32px;
color: #696868;
font-weight: normal;
}
.xwzx .text span{
font-size: 18px;
color: #9B9B9B;
display: inline-block;
margin-top: 8px;
}
.xwzx .title{
/* 设置高度 */
height: 70px;
/* 上下间距 */
margin: 20px 0;
/* 相对定位 */
position: relative;
}
.xwzx .line{
width: 100%;
height: 1px;
background: #808080 ;
position: absolute;
top: 50%;
}
.xwzx .title-line{
width: 93px;
height: 3px;
background: #0058AA;
display: inline-block;
position: relative;
top: -10px;
}
.xwzx .content{
width: 1155px;
}
.xwzx .content-part{
padding-top: 100px;
}
.xwzx .content-part dl{
width: 400px;
float: left;
padding-left: 75px;
margin-right: 74px;
position: relative;
margin-bottom: 40px;
}
.xwzx .content-part dl:last-child{
margin-right: 0;
}
.xwzx .content-part dl dt{
font-size: 21px;
color: #4A4A4A;
font-weight: bold;
margin-bottom: 10px;
}
.xwzx .content-part dl::before{
content: '';
position: absolute;
width: 65px;
height: 65px;
background-image: url(../images/talk-bg.png);
left: 0;
}
.xwzx .content-part dl.zxzb::before{
}
.xwzx .content-part dl.zxrj::before{
}
.xwzx .content-part dl.zxbk::before{
}
.xwzx .content-part dl.rmss::before{
}
.xwzx .content-part dl dd{
font-size: 18px;
color: #4A4A4A;
}
/* 页脚 */
footer .part1{
height: 210px;
background: #06142F;
}
footer .part1 .r1{
padding-top: 53px;
color: white;
}
footer .part1 .r1 h2{
float: left;
font-size: 48px;
display: block;
width: 144px;
height: 63px;
padding-left: 360px;
padding-top: 30px;
}
footer .part1 .r1 .slogan{
float: left;
width: 206px;
height: 120px;
font-size: 16px;
margin-left: 101px;
}
footer .part1 .r1 .slogan p{
display: block;
width: 206px;
height: 40px;
}
footer .part2{
height: 30px;
background: #202C46;
margin: auto;
}
footer .part2 .copyrights{
color: white;
text-align: center;
font-size: 14px;
}
1回答
-
好帮手慕久久
2021-11-09
同学你好，解答如下：
1、精品推荐区，左右箭头的位置，可按照如下方式调整：
.tuwen这个盒子宽度是1155px，里面有三个子元素，每个子元素平均占据385px。由于图片宽345px，只要设置左右间距各20px，就能让子元素在.tuwen中均布，如下：
然后再往左、往右调整一下箭头的位置即可:
2、数字可以通过给::before设置content属性实现，例如：
3、对于页脚区及其他区域的修改建议、优化建议，建议同学提交作业（把代码打包提交上来）：
批复作业的老师会根据同学的代码，为同学做详细的检查呦~
祝学习愉快！
0
相似问题