2～9作业题

为什么banner图和我的遮罩层不重合中间有很大的缝隙？

晓松aa 2017-08-27

源自：项目：网页布局案例 2-10 作业题

收起

2回答

好帮手慕糖 2017-08-29 09:35:58

你好，.toplaype中的定位，单词拼写错误。且.song中是不需要设置高度100px的，由子元素图片撑开即可。修改样式，可参考下列代码：

.song{
  width:100%;
} 
.song img{
  width:100%;
  height:500px;
} 
.toplaype{
  position: absolute;
  left:0;
  top:60px;
  width:100%;
  height:500px;
  background:#000;
  opacity:0.5;
}

祝学习愉快~

收起回答

好帮手慕糖 2017-08-28 10:09:04

你好，建议将你的代码粘贴过来，方便测试与解决问题，祝学习愉快~

收起回答

提问者晓松aa #1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{margin:0;padding:0;} .header{width:100%;height:60px;background:#07cbc9} .header img{float:left;padding-left:100px;} .left{float:left;color:#ffffff;list-style:none;width:50px;line-height:60px;} .xiao{float:right;} .xiao ul{padding-right:50px;} .clear{clear:both;} .song{width:100%;height:100px;} .song img{width:100%;height:500px;} .toplaype{pasition:absolute;left:0;top:-60px;width:100%;height:500px;background:#000;opacity:0.5;} </style> </head> <body> <div class="header"> <img src="images/logo.png" > <div class="xiao"> <ul > <li class="left">home</li> <li class="left">home</li> <li class="left">home</li> <li class="left">home</li> <li class="left">home</li> <li class="left">home</li> </ul> </div> </div> <div> <div class="song"> <img src="images/banner3.jpg"> </div> <div class="toplaype"></div> </div> </body> </html> 图片和遮罩帘有很大的缝隙那的事啊

2017-08-28 19:36:15