图片右侧清除外边距 文字压盖 代码优化

图片右侧清除外边距 文字压盖 代码优化

相关代码：

<!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/css.css">
</head>

<body>
<!-- 网页头部 -->
<header>
<div class="center">
<!-- logo -->
<div class="logo">
<img src="images/logo.png">
</div>
<!-- 导航条-->
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</header>

<!-- 网页横幅 -->
<section class="banner">
<!-- 放大的图片 -->
<img src="images/banner3.jpg">
<!-- 遮罩层 -->
<div class="banner-mask"></div>
<!-- 表单 -->
<div class="banner-form">
<form action="" method="post">
<input type="text" placeholder="your Name">
<input type="text" placeholder="your Phone">
<input type="email" placeholder="your Email">
<textarea placeholder="Write Your Comment Here" rows="4" cols="50"></textarea>
<p>
<input type="submit" value="SEND MESSAGE">
</p>
</form>
</div>
</section>

<!-- 网页的主要内容 -->
<section class="content">
<!-- 网页about区域 -->
<div class="about">
<!-- about上半部分 -->
<div class="up">
<h1>ABOUT</h1>
<div class="line"></div>
<span>
Ipsum is simply dummy text of the printing and typesetting<br>
industry. Lorem Ipsum has been the industry's standard dummy<br>
text ever since the 1500s.
</span>
</div>
<!-- about下半部分 -->
<div class="down">
<!-- 下半部分左侧 -->
<div class="left">
<h1>WORD<br>ABOUT US</h1>
<div class="jdms">
<p>
Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida
commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.
</p>
<button>EXPLORE</button>
</div>
</div>
<!-- 下半部分中间 -->
<div class="center">
<img src="IMAGES/bb3.jpg">
</div>
<!-- 下半部分右侧 -->
<div class="right">
<div class="top">
<p>70000</p>
<div class="line-top"></div>
Students
</div>
<div class="down">
<p>600</p>
<div class="line-down"></div>
Faculty
</div>
</div>
</div>
</div>
<!-- 网页图文混排区域 -->
<div class="image-text">
<div class="image1">
<img src="images/b1.jpg">
</div>
<div class="text2">
<h1>Library</h1>
<p class="up">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="down">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer
took a galley of type and scrambled it to make a type specimen book.</p>
<button>EXPLORE</button>
</div>
<div class="image3">
<img src="images/b2.jpg">
</div>
<div class="text3">
<h1>Library</h1>
<p class="up">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="down">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer
took a galley of type and scrambled it to make a type specimen book.</p>
<button>EXPLORE</button>
</div>
<div class="text4">
<h1>Library</h1>
<p class="up">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="down">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer
took a galley of type and scrambled it to make a type specimen book.</p>
<button>EXPLORE</button>
</div>
<div class="image6">
<img src="images/b3.jpg">
</div>
<div class="text5">
<h1>Library</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.</p>
<button>EXPLORE</button>
</div>
<div class="image8">
<img src="images/b4.jpg">
</div>
</div>

<!-- 网页Gallery区域 -->
<div class="gallery">
<!-- gallery上部分 -->
<div class="up">
<h1>GALLERY</h1>
<div class="line"></div>
<span>
Lorem Ipsum is simply dummy text of the printing and typesetting<br>
industry. Lorem Ipsum has been the industry's standard dummy<br>
text ever since the 1500s.
</span>
</div>
<!-- gallery下部分 -->
<div class="down">
<dl>
<dt>
<img src="images/03-01.jpg">
</dt>
<dd>Science Lab</dd>
</dl>
<dl>
<dt>
<img src="images/03-02.jpg">
</dt>
<dd>Indoor Stadium</dd>
</dl>
<dl>
<dt>
<img src="images/03-03.jpg">
</dt>
<dd>Transportation</dd>
</dl>
<dl>
<dt>
<img src="images/03-04.jpg">
</dt>
<dd>Kids Room</dd>
</dl>
<dl>
<dt>
<img src="images/03-05.jpg">
</dt>
<dd>Meditation Classes</dd>
</dl>
<dl>
<dt>
<img src="images/03-06.jpg">
</dt>
<dd>Kid Play Ground</dd>
</dl>
</div>
</div>
</section>
<!-- 网页页脚 -->
<footer>
<p>&copy;2016imooc.com京ICP备13046642</p>
</footer>
</body>

</html>

相关代码：

* {
margin: 0;
padding: 0;
}


/* 去掉列表小圆点 */
ul {
list-style: none;
}


/* 头部 */
header {
width: 100%;
height: 80px;
background-color: #07cbc9;
}

header .center {
width: 1200px;
height: 100%;
/* 盒子水平居中 */
margin: 0 auto;
}

header .center .logo {
float: left;
height: 48px;
margin-top: 16px;
}

header .center .nav {
float: right;
/* 行高等于盒子高，实现单行文本垂直居中 */
height: 80px;
line-height: 80px;
}

header .center .nav ul li {
float: left;
font-size: 16px;
color: white;
margin-left: 20px;
}

/* 网页横幅 */
.banner {
height: 600px;
position: relative;
}

.banner img {
width: 100%;
height: 600px;
}

.banner .banner-mask {
position: absolute;
top: 0;
height: 600px;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

.banner .banner-form {
position: absolute;
top: 100px;
width: 504px;
left: 50%;
margin-left: -252px;
}

.banner .banner-form form input {
width: 504px;
height: 40px;
background: none;
color: #808080;
border: 1px solid #808080;
margin-bottom: 20px;
}

.banner .banner-form form textarea{
width: 504px;
height: 110px;
background: none;
color: #808080;
border: 1px solid #808080;
margin-bottom: 20px;
}
.banner .banner-form form p input{
width: 200px;
height: 40px;
}
.banner .banner-form form p {
text-align: center;
}

/* about区域 */
.content .about{
width: 1201px;
margin: 0 auto;
margin-top: 30px;
}
.content .about .up{
text-align: center;
}

.content .about .up h1{
font-size: 32px;
}
.content .about .up .line{
width: 60px;
height: 3px;
background-color: #07cbc9;
margin:10px auto;
}
.content .about .up span{
text-align: center;
color: gray;
font-size: 14px;
}
.content .about .down{
position: relative;
width: 1201px;
height: 464px;
overflow: hidden;
padding-top: 30px;
}
.content .about .down .left {
float: left;
}
.content .about .down .left .jdms{
position: absolute;
width: 340px;
padding: 20px;
border: 1px solid gray;
background-color: rgba(255,255,255,0.5);
margin-top: 30px;
}
.content .about .down .left .jdms p{
font-size: 18px;
}
.content .about .down .left .jdms button{
background-color: black;
color: white;
border: none;
width: 140px;
height: 40px;
margin-top: 20px;
}
.content .about .down .center{
float: left;
margin-left: 147px;
}
.content .about .down .center img{
width: 650px;
height: 435px;
}
.content .about .down .right{
float: right;
overflow: hidden;
}
.content .about .down .right .top{
border: 1px solid #07cbc9;
width: 260px;
margin-bottom: 30px;
text-align: center;
padding: 40px 0;
}
.content .about .down .right .top p{
font-size: 28px;
font-weight: bold;
}
.content .about .down .right .top .line-top{
width: 60px;
height: 3px;
background-color: #07cbc9;
margin:10px auto;
}
.content .about .down .right .down{
border: 1px solid #07cbc9;
width: 260px;
height: 100%;
text-align: center;
padding-bottom: 40px;
}
.content .about .down .right .down p{
font-size: 28px;
font-weight: bold;
}
.content .about .down .right .down .line-down{
width: 60px;
height: 3px;
background-color: #07cbc9;
margin:10px auto;
}

/* 图文混排区域 */
.content .image-text{
width: 100%;
overflow: hidden;
background-color: #07cbc9;
}

.content .image-text img{
/* 使图片撑满整个盒子 */
width: 100%;
height: 100%;
/* img是行内元素，默认存在间隙，转为块级元素，消除间隙 */
display: block;
}
.content .image-text>div{
width: 25%;
height: 380px;
float: left;
}

.content .image-text h1{
font-size: 24px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 30px;
color: white;
}
.content .image-text .up{
margin-left: 20px;
margin-bottom: 20px;
font-size: 16px;
color: white;
}
.content .image-text .down{
margin-left: 20px;
margin-bottom: 30px;
font-size: 14px;
color: gray;
}

.content .image-text button{
display: block;
margin:0 auto;
background-color: black;
color: white;
border: none;
width: 138px;
height: 40px;
}

/* Gallery区域 */
.content .gallery{
width: 1201px;
margin: 0 auto;
margin-top: 30px;
}
.content .gallery .up{
text-align: center;
}

.content .gallery .up h1{
font-size: 32px;
}
.content .gallery .up .line{
width: 60px;
height: 3px;
background-color: #07cbc9;
margin:10px auto;
}
.content .gallery .up span{
text-align: center;
color: gray;
font-size: 14px;
}
.content .gallery .down{
width: 1200px;
height: 560px;
padding-left: 20px;
padding-right: 20px;
background-color: red;
}
.content .gallery .down dl{
position: relative;
}
.content .gallery .down dl dt{
float: left;
padding-top: 30px;
margin-right: 40px;
width: 360px;
height: 240px;
}
.content .gallery .down dl dt img{
width: 100%;
height: 100%;
}
/* 清除第三个图片和最后一个图片的右侧外边距 */
.content .gallery .down dl dt:nth-child(3){
margin: right 0;
}
.content .gallery .down dl dt:last-child{
margin: right 0;
}
.content .gallery .down dl dd{
position: absolute;
display: block;
bottom: 0;
}
footer{
background-color: #07cbc9;
width: 100%;
height: 80px;
}
footer p{
text-align: center;
line-height: 80px;
}

https://img1.sycdn.imooc.com//climg/630f540d09598c4109780452.jpg

图片上的文字要怎么浮动在图片上呢？而且位于最下方

https://img1.sycdn.imooc.com//climg/630f53f309caf08a08541284.jpg

最右边这两个图片设置了取消外边距但是没有效果

另外再麻烦老师帮我看看其他的代码有没有可以优化的地方。谢谢老师啦～
踩一个脚印 2022-08-31
源自：浮动与定位   4-11 自由编程
24
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

1回答
imooc_慕慕 2022-09-01 11:20:28

同学你好，解答如下：

1、dl dt dd属于块元素独占一行，不用设置定位，将dt设置的属性，放在dl上，效果就对了。

2、这样设置，先给最外面的盒子设置margin:20px auto;这样就设置了上下的20px;将属性设置在dl上，给dl设置margin:15px 20px；这个整体的盒子就会有20px的左右边距，

https://img1.sycdn.imooc.com//climg/63105d7c09e3abff03460237.jpg

https://img1.sycdn.imooc.com//climg/6310208509abe7aa03930157.jpg

https://img1.sycdn.imooc.com//climg/63101f9a0983576403690306.jpg

https://img1.sycdn.imooc.com//climg/63101fb609a632e604950482.jpg

3、其他部分问题修改参考：

网页图文混排区

第五个图片文字没有效果，添加相应的class类名

https://img1.sycdn.imooc.com//climg/631021aa0919a69e07930245.jpg

小三角没有设置

https://img1.sycdn.imooc.com//climg/631028f209e97dd303980591.jpg

https://img1.sycdn.imooc.com//climg/631028d90944dad006500822.jpg

祝学习愉快~

0
收起回答
  • 提问者 踩一个脚印 #1

    老师我有点乱，第一个是啥意思😭我不是想设置大盒子的内边距，我是设置了大盒子里面的六个小图片的右边距为40，但是题目里要求第三个图片和最后一个图片的边距为零，我是想清除这两个图片的外边距
    还有那个不是图文混排区的文字，是gallery区的就像图片最下方的文字😭

    2022-09-01 15:15:35
  • imooc_慕慕 回复 提问者 踩一个脚印 #2

    同学你好，解答如下：

    通过代码可以看到，同学给你每一个dt设置了margin-right，这个思路是不优化的，我们直接把设置在dt上的属性，放在dl上，题目要去是中间的是30px距离，也就是每个盒子上下间距15px,这样可以从整体上设置margin属性，我们看一下效果

    https://img1.sycdn.imooc.com//climg/63106842096c53a003690399.jpg

    https://img1.sycdn.imooc.com//climg/631064b70935745a13130581.jpg

    但是此时上下的边距是不等的，我们需要继续调整，

    首先这个down是由内容撑开的，我们不可以设置固定的高度，由于里面使用了浮动，脱离了文档流，因此我们需要清除浮动，使用overflow：hidden;整体的上下也有外边距，我们可以设置这个margin:20px auto;

    https://img1.sycdn.imooc.com//climg/631065cc091036ac03980245.jpg

    https://img1.sycdn.imooc.com//climg/6310688309d1959705370228.jpg

    https://img1.sycdn.imooc.com//climg/631066ad091d66d512310577.jpg

    这样上下也相等了

    题目要求没有要求第三个和最后一个的边距为0，同学是不是理解错了，

    那个图文混排区的文字，是其它部分的错误检查，

    同学的gallery区的问题，上面也有修改的，同学这个不需要使用定位，因为dl dt dd属于块元素，独占一行，并且文字不是定位在图片上的，是在图片的下面，直接给dd设置高度上下居中就可以，然后再缩进20px

    https://img1.sycdn.imooc.com//climg/6310689b09d92a3403650236.jpg

    此时图片与文字直接会有一条间隙，此时我们将图片设置为块元素，

    https://img1.sycdn.imooc.com//climg/63106c1d093b08fd03930318.jpg

    https://img1.sycdn.imooc.com//climg/631069bb09283af404010133.jpg

    https://img1.sycdn.imooc.com//climg/63106c0209abd2b804020321.jpg

    同学可以再重新梳理一下思路，如果还有疑问可以再提问，老师再为你解答

    祝学习愉快~


    2022-09-01 16:18:16
  • 提问者 踩一个脚印 #3

    谢谢老师！我弄懂啦~

    2022-09-01 22:19:07
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

请问我的代码规范吗？为什么图片的下外边距不用设置，就可以和文字产生距离，是因为行高的原因吗？
0 0 5
如图的最大盒子的宽度可以设定为自适应的吗？该如何使图片外边距与盒子边框相等?
0 0 5
麻烦老师看下怎么可以使图片与图片的距离就等同于图片与盒子的左右边距?
0 0 3
为什么我设置的img中的marign属性，右边无论改成什么都没有用呢？
2 0 3
不清除内外边距
0 0 3

登录后可查看更多问答，登录/注册

前端工程师
  • 参与学习           人
  • 提交作业       15717    份
  • 解答问题       17883    个

入行前端，是明智的选择！市场需求大，就业前景好，入行门槛低，小白易上手 全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建

了解课程

本课精华内容

问答 作业

老师,请问vscode有哪些好用的插件推荐一下...

157 1

老师,API具体是指什么呢?

75 1

老师,这两种情况为什么得到的结果不一样?

31 2

没有思路

201 5

老师给点提示。

155 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师