请老师帮忙，商品区的两个箭头的位置如何确定？还有导航区那个关于我们，鼠标移上去只有关于我们四个字
来源：5-2 项目作业
一只少年
2021-11-06 15:40:57
<!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">
<ul>
<li> <a href="" >
<div class="left-btn"> <img src="images/prev.png" alt=""></div>
</a>
</li>
<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>
<li ><a href="">
<div class="right-btn"><img src="images/next.png" alt=""></div>
</a></li>
</ul>
</div>
</section>
</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;
padding-left: 75%;
}
/* 导航区 */
.nav{
height: 221px;
width: 100%;
}
.nav .nav-content{
width: 1200px;
height: 221px;
margin: 0 auto;
}
.nav .nav-content h1{
float: left;
display: block;
margin-top: 65px;
width: 192px;
height: 91px;
background-image: url(../images/mujiaju.png);
/* 将段首缩进这个属性，设置为负数，是一个很巧妙的做法，可以隐藏文字 */
text-indent: -999em;
}
.nav .useful-links{
float: left;
margin-top: 80.5px;
margin-left: 78px;
}
.nav .useful-links ul{
/* 清除浮动 */
overflow: hidden;
}
.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 .guwm{
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 span{
/* 转块，不设置宽度，就相当于width属性为100%了，此时可以文字text-align:center；居中了 */
display: block;
text-align: center;
color: #545454;
font-size: 16px ;
line-height: 21px;
}
/* 搜索框 */
.nav .soso-box{
width: 288px;
height: 39px;
padding-top: 91px;
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%;
}
.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{
}
.commodity ul{
width: 1200px;
margin-top: 38px;
}
.commodity ul li{
float: left;
}
.commodity ul li.box{
width: 171px;
height: 176px;
margin-right: 50px;
}
.commodity ul li.left-btn{
width: 48px;
height: 48px;
}
.commodity ul li.right-btn{
width: 48px;
height: 48px;
}
.commodity ul li.box span{
display: block;
width: 162px;
height: 48px;
font-size: 18px;
color: #838383;
line-height: 22px;
}
1回答
-
好帮手慕星星
2021-11-06
同学你好，代码问题如下：
1、导航区域‘关于我们’移入不显示图片，是因为类名写错了，参考修改
2、商品区域建议调整布局，将箭头放在ul列表外面。给center-wrap设置固宽，居中显示。左右箭头使用定位，参考：
下面是商品区域完整样式代码：
/* 商品区 */ .commodity .center-wrap { width: 1155px; margin:0 auto; overflow: hidden; position: relative; } .commodity ul { /*width: 1200px;*/ margin-top: 38px; } /*.commodity ul li { float: left; } */ .commodity ul li.box { float: left; width: 171px; /*height: 176px;*/ height: 234px; margin-right: 50px; } .commodity ul li.box:first-child{ margin-left: 50px; } .commodity ul li.box img{ width: 100%; } /*.commodity ul li.left-btn {*/ .commodity .left-btn { position: absolute; left: 0; top: 50%; margin-top: -24px; width: 48px; height: 48px; } /*.commodity ul li.right-btn {*/ .commodity .right-btn { position: absolute; right: 0; top: 50%; margin-top: -24px; width: 48px; height: 48px; } .commodity ul li.box span { display: block; width: 162px; height: 48px; font-size: 18px; color: #838383; line-height: 22px; }祝学习愉快！
0
相似问题