慕家居了解我们部分图片不显示
来源：5-2 项目作业
慕越秀工地
2022-04-24 04:00:28
老师你好，目前我在自己写慕家居，了解我们部分的ul li 浮动的5张图片无法显示，烦请老师看看。
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>慕家居</title> <meta name="Keywords" content="北欧简约风——触手可及的家居格调"> <meta name="Description" content="简洁、自然、人性化"> <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="center-wrap"> <div class="topsite"> <div class="tel"> 服务热线：400-8888-888 </div> </div> <div class="toolbar"> <img class="logo" src="images/logo.png" alt=""> <nav> <ul class="toolpics"> <li class="home"> <a href=""> <img src="images/home-gry.png" alt=""> <img class="hide" src="images/home-white.png" alt=""> </a> </li> <li class="abouts"> <a href=""> <img src="images/abouts-gry.png" alt=""> <img class="hide" src="images/abouts-white.png" alt=""> </a> </li> <li class="kefu"> <a href=""> <img src="images/kefu-gry.png" alt=""> <img class="hide" src="images/kefu-white.png" alt=""> </a> </li> <li class="chanpin"> <a href=""> <img src="images/chanpin-gry.png" alt=""> <img class="hide" src="images/chanpin-white.png" alt=""> </a> </li> <li class="fuwu"> <a href=""> <img src="images/fuwu-gry.png" alt=""> <img class="hide" src="images/fuwu-white.png" alt=""> </a> </li> </ul> <ul class="toolwords"> <li> <a href=""> <span>网站首页</span> </a> </li> <li> <a href=""> <span>关于我们</span> </a> </li> <li> <a href=""> <span>服务建设</span> </a> </li> <li> <a href=""> <span>产品中心</span> </a> </li> <li> <a href=""> <span>服务大厅</span> </a> </li> </ul> </nav> <div class="search"> <input type="text" placeholder="请输入搜索内容"> </div> <div class="zoom"> <img src="images/search.png" alt=""> </div> </div> </div> </header> <!-- banner区域 --> <section class="banner"> <div class="center-wrap"> <img src="images/banner01.png" alt=""> <ul class="broadcast"> <li></li> <li></li> <li></li> </ul> </div> </section> <!-- 了解我们 --> <section class="about-us"> <div class="center-wrap"> <img class="leftarrow arrow" src="images/prev_active.png" alt=""> <ul class="decoration"> <li><img src="images/product01.png" alt=""></li> <li><img src="images/product02.png" alt=""></li> <li><img src="images/product03.png" alt=""></li> <li><img src="images/product04.png" alt=""></li> <li><img src="images/product05.png" alt=""></li> </ul> <ul class="wordbox"> <li> 时尚卫生间墙面颜色2029装饰设计 </li> <li> 现代北欧风格厨房装2029饰效果图 </li> <li> 现代时尚北欧风格卧2029室装饰画 </li> <li> 130平简约现代北欧2029风格装修 </li> <li> 现代北欧风格小客厅2029装修设计 </li> </ul> <img class="rightarrow arrow" src="images/next.png" alt=""> <h3>了解我们</h3> <div class="longline left"></div> <div class="longline right"></div> <h4>about us</h4> <div class="shortline"></div> <div class="leftwords"> <h4>关于我们</h4> <h5>慕家居装饰材料有限公司</h5> <div class="details"> 慕家居家居装修网北欧风格家具图片专区,是国内海量全面的高质量北欧风格家具图片库… </div> <input type="button" value="了解更多"> </div> <div> <img src="images/aboutus.png" alt=""> </div> <div class="threebuttons"> <div class="message buttons"> <img class="buttonpics" src="images/liuyan.png" alt=""> <p class="chinese">在线留言</p> <p class="english">on-line message</p> </div> <div class="advertising buttons"> <img class="buttonpics" src="images/guanggao.png" alt=""> <p class="chinese">广告经营</p> <p class="english">Advertising management</p> </div> <div class="network buttons"> <img class="buttonpics" src="images/wangluo.png" alt=""> <p class="chinese">网络咨询</p> <p class="english">Network consultation</p> </div> </div> </div> </section> <!-- 精品推荐 --> <section class="recommendation"> <div class="center-wrap"> <h3>精品推荐</h3> <h4>Boutique recommendation</h4> <div class="blueline"></div> <img src="images/prev.png" alt=""> <ul> <li> <div class="grid"> <img src="images/recommend1.png" alt=""> <div class="cover">轻奢风格样板房客厅色彩搭配装修设计</div> </div> </li> <li> <div class="grid"> <img src="images/recommend2.png" alt=""> <div class="cover">简约美式风格卧室衣柜设计</div> </div> </li> <li> <div class="grid"> <img src="images/recommend3.png" alt=""> <div class="cover">轻奢风格L型厨房装修设计</div> </div> </li> </ul> </div> </section> <!-- 新闻中心 --> <section class="news"> <div class="center-wrap"> <h3>新闻中心</h3> <div class="longline left"></div> <div class="longline right"></div> <h4>press center</h4> <div class="blueline"></div> <div class="num"> <img src="images/talk-bg.png" alt=""> 01 </div> <div class="num"> <img src="images/talk-bg.png" alt=""> 02 </div> <div class="num"> <img src="images/talk-bg.png" alt=""> 03 </div> <div class="num"> <img src="images/talk-bg.png" alt=""> 04 </div> <div class="leftnews"> <div class="zxzb">最新招标</div> <div class="chongqing">重庆业主要求：一居室的户型，想把阳台利用起来，改成一室一厅的户型，业主表示已经请朋友把以前的装修敲了，现在基本是毛坯的状态……</div> <div class="zxbk">装修百科</div> <div class="maifang">买房之后，无论是毛坯房还是留下二手房，很多业主都会选择进行装修。装修可以为你带来一个你喜欢的房屋，同时满足你需要的生活方式……</div> </div> <div class="rightnews"> <div class="zxrj">装修日记</div> <div class="zhongyu">终于在北京四环里贷款买了套两居室二手房，还是很欣喜的，为了装好它，我可真是费了心了，毕竟是自己以后的小家，所以我真是没少操心……</div> <div class="rmss">热门搜索</div> <div class="xuanze">选择防盗门最重要的就是工艺质量：应特别注意检查有无焊接缺陷，诸如开焊、未焊、漏焊等现象。看门扇与门框的配合是否密实，间隙是否均匀……</div> </div> </div> </section> <!-- 页脚 --> <footer> <div class="part1"> <div class="center-wrap"> <h2>慕家居</h2> <div class="info"> <div class="phone">咨询电话：010-88888888</div> <div class="net">公司网址：www.imooc.com</div> <div class="email">邮箱：KEFU@IMOOC.com</div> </div> </div> </div> <div class="part2"> <div class="copyrights"> Copyright © 2020 imooc.com All Rights Reserved | 京ICP备 </div> </div> </footer> </body> </html>
css
.site-head .center-wrap {
min-width: 1920px;
height: 161px;
}
.site-head .center-wrap .topsite {
background: #0058AA;
height: 40px;
}
.site-head .center-wrap .topsite .tel {
font-size: 18px;
color: #FFFFFF;
line-height: 40px;
width: 211px;
height: 40px;
position: absolute;
top: 0;
right: 360px;
}
.site-head .center-wrap .toolbar {
height: 121px;
background-color: #FFFFFF;
position: relative;
}
.site-head .center-wrap .toolbar .logo {
float: left;
width: 192px;
height: 91px;
position: absolute;
top: 19px;
left: 360px;
}
.site-head .center-wrap .toolbar nav {
float: left;
width: 560px;
height: 91px;
position: absolute;
top: 19px;
left: 661px;
}
.site-head .center-wrap .toolbar nav .toolpics {
width: 556px;
height: 50px;
position: absolute;
top: 0;
left: 4px;
}
.site-head .center-wrap .toolbar nav .toolpics li {
float: left;
margin-right: 91px;
}
.site-head .center-wrap .toolbar nav .toolpics li:last-child {
margin-right: 0;
}
.site-head .center-wrap .toolbar nav .toolpics li .hide {
/* 当前暂时显示灰色图标，后面设当鼠标触碰灰色图标后显示白色图标 */
display: none;
}
.site-head .center-wrap .toolbar nav .toolwords {
float: left;
width: 560px;
height: 21px;
position: absolute;
bottom: 0;
left: -10px;
}
.site-head .center-wrap .toolbar nav .toolwords li {
float: left;
width: 64px;
height: 21px;
margin-right: 60px;
}
.site-head .center-wrap .toolbar nav .toolwords li span {
display: block;
font-size: 16px;
color: #545454;
}
.site-head .center-wrap .toolbar nav .toolwords li:last-child {
margin-right: 0;
}
.site-head .center-wrap .toolbar .search {
float: left;
width: 229px;
height: 37px;
position: absolute;
top: 51px;
right: 407px;
box-sizing: border-box;
padding: 9.5px 116px 9.5px 15px;
font-size: 14px;
color: #545454;
border: 1px solid #D3D3D3;
}
.site-head .center-wrap .toolbar .search input {
border: none;
}
.site-head .center-wrap .toolbar .zoom {
float: left;
width: 48px;
height: 39px;
background: #0058AA;
background-size: cover;
position: absolute;
top: 50px;
right: 359px;
}
.site-head .center-wrap .toolbar .zoom img {
width: 33px;
height: 33px;
position: absolute;
top: 3px;;
left: 8px;
}
.banner .center-wrap {
min-width: 1920px;
height: 650px;
position: relative;
}
.banner .center-wrap .broadcast {
width: 42px;
height: 10px;
position: absolute;
bottom: 50px;
left: 939px;
}
.banner .center-wrap .broadcast li {
width: 10px;
height: 10px;
float: left;
background-color: #FFFFFF;
border-radius: 50%;
margin-right: 6px;
}
.banner .center-wrap .broadcast li:last-child {
margin-right: 0;
}
.about-us .center-wrap {
min-width: 1920px;
height: 760px;
position: relative;
}
.about-us .center-wrap .arrow {
width: 48px;
height: 48px;
top: 136px;
position: absolute;
}
.about-us .center-wrap .leftarrow {
left: 360px;
}
.about-us .center-wrap .rightarrow {
left: 1513px;
}
.about-us .center-wrap .decoration {
width: 1055px;
height: 175px;
position: absolute;
top: 38.3px;
left: 433px;
background-color: yellow;
}
.about-us .center-wrap .decoration li {
float: left;
width: 171px;
height: 175px;
background-color: blue;
margin-right: 50px;
}
.about-us .center-wrap .decoration li:last-child {
margin-right: 0;
}
.about-us .center-wrap .wordbox {
width: 1050px;
height: 48px;
position: absolute;
top: 224px;
left: 433px;
}
.about-us .center-wrap .wordbox li {
float: left;
width: 162px;
height: 48px;
margin-right: 60px;
font-size: 18px;
color: #838383;
}
.about-us .center-wrap .wordbox li:last-child {
margin-right: 0;
}
.about-us .center-wrap h3 {
font-size: 32px;
color: #696868;
position: absolute;
top: 304px;
left: 896px;
}
.about-us .center-wrap .longline {
width: 500px;
border: 1px solid #808080;
position: absolute;
top: 347px;
}
.about-us .center-wrap .left {
left: 380px;
}
.about-us .center-wrap .right {
right: 380px;
}
.about-us .center-wrap h4 {
font-size: 18px;
color: #9B9B9B;
position: absolute;
top: 348px;
left: 923px;
}
.about-us .center-wrap .shortline {
width: 93px;
border: 1px solid #0058AA;
position: absolute;
top: 383px;
left: 915px;
}
.about-us .center-wrap .leftwords {
width: 239px;
height: 242px;
position: absolute;
top: 422px;
right: 1299px;
}
.about-us .center-wrap .leftwords h4 {
width: 104px;
height: 34px;
font-size: 26px;
color: #0058AA;
position: absolute;
top: 0;
left: 0;
}
.about-us .center-wrap .leftwords h5 {
width: 231px;
height: 41px;
font-size: 21px;
color: #5A5A5A;
line-height: 41px;
position: absolute;
top: 34px;
left: 0;
}
.about-us .center-wrap .leftwords .details {
width: 239px;
height: 78px;
font-size: 18px;
color: #7B7C7C;
line-height: 26px;
position: absolute;
top: 99px;
left: 0;
}
.about-us .center-wrap .leftwords input {
width: 130px;
height: 38px;
background: #0058AA;
font-size: 18px;
color: #FFFFFF;
text-align: center;
border: none;
position: absolute;
bottom: 0;
left: 0;
}
.about-us .center-wrap img {
width: 384px;
height: 256px;
position: absolute;
top: 422px;
left: 768px;
}
.about-us .center-wrap .threebuttons {
width: 273px;
height: 203px;
position: absolute;
top: 432px;
left: 1265px;
}
.about-us .center-wrap .threebuttons .buttons {
width: 273px;
height: 61px;
color: #FFFFFF;
text-align: center;
position: absolute;
left: 0;
}
.about-us .center-wrap .threebuttons .buttons .chinese {
font-size: 22px;
position: absolute;
top: 10px;
left: 90px;
}
.about-us .center-wrap .threebuttons .buttons .english {
font-size: 12px;
position: absolute;
top: 37px;
left: 89px;
}
.about-us .center-wrap .threebuttons .message {
background: #0058AA;
top: 0;
}
.about-us .center-wrap .threebuttons .advertising {
background: #CCCCCC;
top: 71px;
}
.about-us .center-wrap .threebuttons .network {
background: #CCCCCC;
bottom: 0;
}
.about-us .center-wrap .threebuttons .buttons .buttonpics {
width: 40px;
height: 34px;
position: absolute;
top: 14px;
left: 30px;
}base
@font-face {
font-family: "PingFangSCRegular";
src: url('../fonts/PingFangSCRegular.ttf') format('truetype');
}
@font-face {
font-family: 'iconfont';
src: url('../fonts/iconfont.eot');
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/iconfont.woff2') format('woff2'),
url('../fonts/iconfont.woff') format('woff'),
url('../fonts/iconfont.ttf') format('truetype'),
url('../fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: "Helvetica";
}
.center-wrap {
width: 100%;
margin: 0 auto;
}
.clearfix {
overflow: hidden;
}
.clearfix::after {
content: '';
display: block;
clear: both;
overflow: hidden;
}
.db {
display: block;
}
.dib {
display: inline-block;
}
.tac {
text-align: center;
}写回答
1回答
-
同学你好，针对你的问题解答如下：
因为通过后代选择器.about-us .center-wrap img 将about-us区域下的所有图片都设置为绝对定位了，显示在页面其他位置了，如下：
建议修改：将商品区和了解我们划分为两个单独的区域，如下：
调整html结构，如下：
在一个列表项，设置img和对应的文字即可，如下：
调整商品区域的css样式，设置products下的center-wrap盒子宽度为1200px，结合margin属性实现整体居中效果
调整左右箭头样式
调整图片和文字样式
调整了html结构，删掉对于wordbox设置样式的相关代码，如下：
经过上述修改后，效果如下：
其余的部分，同学也可以参考这个思路去实现，视频中老师也有讲解过，使用一个版心盒子，例如：center-wrap，让这个版心盒子整体水平居中，然后再结合设计稿，设置里面的布局样式
祝学习愉快~
0
相似问题