麻烦老师检查一下给些建议，发现很多小细节很多问题，还有右边盒子里的内容不懂居中
来源：4-8 自由编程
qq_慕侠5425943
2021-03-17 16:55:25
相关代码：
<!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>Document</title>
<link rel="stylesheet" href="自由编程.css">
</head>
<body>
<div class="max">
<div class="top">
<!-- 主标题 -->
<h1>ABOUT</h1>
<!-- 顶部横杠 -->
<div class="A"></div>
<!-- 顶部文字 -->
<div class="topw">
<p>Lorem lpsum is slmply dummy text of the printing and typesetting</p >
<p>industry.Lorem Ipsum has been the industey's standard dummy</p>
<p>text ever since the 1500s.</p>
</div>
</div>
<!-- 中间大盒子 -->
<div class="ecenter">
<!-- 左边部分 -->
<div class="left">
<!-- 左边大字 -->
<div class="leftd">
<h2>A WORD</h2>
<h2>ABOUT US</h2>
</div>
<!-- 左边下半部分 -->
<div class="ll">
<!-- 左边中间小文字 -->
<div class="lm">
<p>Prasesne dingnissim viverra est, sed</p>
<p>bibendum ligula congue non. Sed</p>
<p>ac nisl et felis gravida commodo?</p>
<p>Suspendisse eget ullamcorper</p>
<p>ipsum. Suspendisse diam amet</p>
</div>
<!-- 左边最下面方块 -->
<div class="llb">
<p>EXPLORE</p>
</div>
</div>
</div>
<!-- 中间版心图片 -->
<div class="center">
<img src="images/bb3.jpg">
</div>
<!-- 右边部分 -->
<div class="right">
<!-- 右边上面 -->
<div class="ra">
<p3>70000</p3>
<div class="B"></div>
<p>Students</p>
</div>
<!-- 右边下面 -->
<div class="rl">
<p4>600</p4>
<div class="C"></div>
<p>Faculty</p>
</div>
</div>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
/* 大盒子 */
.max{
width: 100%;
padding-top: 30px;
}
.max .top .A{
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 0 auto;
}
.max .top{
text-align: center;
}
/* 中间大盒子 */
.max .ecenter{
width: 1201px;
height: 464px;
margin: 0 auto;
position: relative;
}
/* 左边盒子 */
.max .ecenter .left{
width: 251px;
height: 100%;
background:rgba(255,255,255,0.5);
float: left;
}
.max .ecenter .left .leftd{
margin-top: 30px;
}
.max .ecenter .left .ll{
position: absolute;
width: 300px;
padding: 20px;
border: 1px solid gray;
}
.max .ecenter .left .ll .llb{
width: 140px;
height: 40px;
background-color: black;
margin-top: 30px;
}
.max .ecenter .left .ll .llb p{
color: cornsilk;
text-align: center;
line-height: 40px;
}
.max .ecenter .center img{
width: 650px;
height: 435px;
display: block;
float: left;
margin-top: 30px;
}
/* 右边盒子 */
.max .ecenter .right{
width: 260px;
height: 464px;
float: left;
}
.max .ecenter .right .ra{
width: 260px;
height: 130px;
border: cyan 1px solid;
text-align: center;
margin-top: 30px;
}
.max .ecenter .right .ra p3{
font-size: 28px;
font-weight: bold;
}
.max .ecenter .right .ra .B{
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.max .ecenter .right .rl{
width: 260px;
height: 130px;
border: cyan 1px solid;
text-align: center;
margin-top: 30px;
}
.max .ecenter .right .rl .C{
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.max .ecenter .right .rl p4{
font-size: 28px;
font-weight: bold;
}
2回答
-
同学你好，给文本框的大盒子.ll设置就行哦。
祝学习愉快~
1 -
好帮手慕夭夭
2021-03-17
同学你好，代码的问题与修改如下：
1、文本框没有设置白色半透明背景遮罩
这个任务提示中是有给出示例代码的，参考如下：
2、图片与右侧内容没有设置间距
这里建议让右侧内容再往右移动一点，显示在父容器的最右侧，参考如下：
3、两个蓝色盒子超出父容器。
一个元素的实际宽高是包含边框和内间距的，这里蓝色盒子设置了边框，所以实际宽度大于父容器宽度，建议如下调整：
注释的去掉
4、蓝色盒子中的内容想要垂直居中，可以去掉高度，使用padding实现。如下：
祝学习愉快~
0h021-03-17
相似问题