老师麻烦看看做的有没有什么问题
来源：4-8 自由编程
mjka5632
2020-11-24 20:47:31
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/cssTest/css/about.css">
</head>
<body>
<div class="big">
<div class="about">
<span>ABOUT</span>
<div class="bluegang"></div>
<div class="des">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s.</div>
</div>
<div class="content">
<span>A WORD ABOUT US</span>
<div class="left">Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis
gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.
<button>EXPLORE</button>
</div>
<img src="/cssTest/img/about/bb3.jpg">
<div class="right">
<div class="r1">
<span>70000</span>
<div class="bluegang"></div>Students</div>
<div class="r2"><span>600</span><div class="bluegang"></div>Faculty</div>
</div>
</div>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
}
/* 整个布局 */
.big {
position: relative;
height: 1200px;
/* background-color: red; */
margin: 0 auto;
}
/* head蓝色横杠 */
.big .about .bluegang {
width: 60px;
height: 3px;
background: #00978E;
margin: 10px auto;
}
.big .about .des {
text-align: center;
color: gray;
font-size: 14px;
width: 450px;
margin: 0 auto;
}
.big .about span {
font-weight: bold;
margin-top: 30px;
display: block;
font-size: 32px;
text-align: center;
}
/* 整个中心 */
.big .content {
position: relative;
width: 1230px;
height: 465px;
/* background-color: red; */
padding-top: 30px;
margin-left: 200px;
}
.big .content span {
font-weight: bold;
display: block;
font-size: 32px;
width: 150px;
}
.big .content .left button {
margin-top: 50px;
width: 140px;
height: 40px;
color: white;
display: block;
background-color: black;
font-size: 18px;
}
.big .content .left {
position: absolute;
z-index: 1;
float: left;
width: 340px;
padding: 20px;
font-size: 18px;
border: 1px solid grey;
background: rgba(255, 255, 255, .5);
top: 35%;
left: 50%;
margin-left: -612px;
margin-top: -5px;
}
/* 右边部分 */
.big .content .right {
float: right;
width: 260px;
font-size: 18px;
text-align: center;
margin-top: -40px;
}
.big .content .right .r1 {
padding: 40px;
border: 1px solid #00978E;
}
.big .content .right span {
display: inline;
text-align: center;
font-weight: bold;
}
.big .content .right .r2 {
padding: 40px;
margin-top: 30px;
border: 1px solid #00978E;
}
/* 蓝色横条 */
.big .content .right .bluegang {
width: 60px;
height: 3px;
background: #00978E;
margin: 10px auto;
}
/* 中间图片 */
img {
z-index: 0;
position: absolute;
float: left;
width: 650px;
height: 435px;
margin: 0 auto;
top: 13%;
left: 20%;
margin-left: 60px;
}
2回答
-
同学你好，如下图所示，about内容没有实现水平居中的方式：
（1）整体设置固定的宽度，例如：1200px；通过margin：0 auto；实现水平居中的样式。
content容器设置margin-top：20px；距离顶部有间距样式：
（2）建议explore按钮设置border：none；去掉默认的边框样式。
（3）包裹ABOUT US的span标签建议宽度设置大一点，并设置一个id名，让页面效果跟效果图保持一致，并且span标签设置浮动。
（4）img标签使用浮动来设置布局，不需要使用定位。
（5）调整右侧内容的margin-top值。
（6）调整遮罩层的left值。
（7）因为span标签本身就是行标签，所以不需要再设置display：inline；样式了
修改之后的效果：
祝学习愉快！
0h020-11-25 -
好帮手慕鹤
2020-11-26
同学你好，老师测试了下贴的修改代码截图，效果是实现的哦，老师把修改后的代码贴上，同学可以测试下，需要同学更改下图片路径哦，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } .big { position: relative; width: 1200px; margin: 0 auto; } .big .about .bluegang { width: 60px; height: 3px; background: #00978E; margin: 10px auto; } .big .about .des { text-align: center; color: gray; font-size: 14px; width: 450px; margin: 0 auto; } .big .about span { font-weight: bold; margin-top: 30px; display: block; font-size: 32px; text-align: center; } .big .content { position: relative; height: 465px; margin-top: 20px; } .big .content .left button { border: none; margin-top: 50px; width: 140px; height: 40px; color: white; display: block; background-color: black; font-size: 18px; } .big .content .left { position: absolute; z-index: 1; float: left; width: 340px; padding: 20px; font-size: 18px; border: 1px solid grey; background: rgba(255, 255, 255, .5); top: 35%; } .big .content .right { float: right; width: 260px; font-size: 18px; text-align: center; } .big .content .right .r1 { padding: 40px; border: 1px solid #00978E; } .big .content .right span { text-align: center; font-weight: bold; } .big .content .right .r2 { padding: 40px; margin-top: 30px; border: 1px solid #00978E; } .big .content .right .bluegang { width: 60px; height: 3px; background: #00978E; margin: 10px auto; } img { float: left; width: 650px; height: 435px; margin-left: 60px; } #spans { font-weight: bold; display: block; font-size: 32px; width: 172px; float: left; } </style> </head> <body> <div class="big"> <div class="about"> <span>ABOUT</span> <div class="bluegang"></div> <div class="des">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div> </div> <div class="content"> <span id="spans">A WORD ABOUT US</span> <div class="left">Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet. <button>EXPLORE</button> </div> <img src="../image/bb3.jpg"> <div class="right"> <div class="r1"> <span>70000</span> <div class="bluegang"></div>Students </div> <div class="r2"><span>600</span> <div class="bluegang"></div>Faculty </div> </div> </div> </div> </body> </html>同学可以把你修改后的代码粘贴上来，老师再根据你修改的代码进行测试，查找问题并修改。
祝学习愉快！
0
相似问题