about区下面两排四列图片没有居中
来源：2-10 作业题
慕言_7946275
2019-07-17 19:10:05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css网页布局</title>
<link rel="stylesheet" href="F:/2-10作业/css/index.css" type="text/css"/>
</head>
<body>
<!--页头-->
<div class="header">
<div class="logo">
<a href="#"><img src="images/logo.png"></a>
</div>
<div class="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<!--主体-->
<div class="banner">
<div class="pic"><img src="images/banner3.jpg"> </div>
<div class="topLayer"></div><!--遮罩层-->
<div class="topLayer-top">
<div>
<form class="message">
<input type="text" name="username" placeholder=" your Name"><br><br>
<input type="text" name="phone" placeholder="your Phone"><br><br>
<input type="text" name="email" placeholder="your E-mail"><br><br>
<textarea name="personal information" cols="30" rows="10" placeholder="Write Your Comment Here"></textarea><br><br>
<button class="button">SEND MESSAGE</button><br><br>
</form>
</div>
</div>
</div>
<div class="about">
<div class="title">ABOUT</div> <br>
<center><hr color="#07cbc9" width="30px" /></center>
<div class="word-top">
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.
</div>
<div class="middlebox">
<div class="left">
<div class="middletitle">A WORLD<br>ABOUT US</div> <br>
<div class="leftword">
Praesent dignissim viverra est,sed<br>bibendum ligula congue non.Sed ac nis<br>let felis gravida commodo?Suspendisse<br>eget ullamcorper ipsum.Suspendisse<br>diam amet.<br><br>
<button class="sumbit">EXPLORE</button>
</div>
</div>
<div class="pic1"><img src="images/bb3.jpg"></div>
<div class="part2">
<div class="p2">
<h3>70000</h3><br>
<center><hr color="#07cbc9" width="30px" /></center><br>
<span>Students</span>
</div>
<div class="p2">
<h3>600</h3><br>
<center><hr color="#07cbc9" width="30px" /></center><br>
<span>Faculty</span>
</div>
</div>
<div class="bottombox">
<div class="picture"><img src="images/b1.jpg"></div>
<div class="content">
<span class="bottom-title">Library</span><br><br>
<p class="page1">Lorem Ipsum is simply dummy text of the
printing and typesetting industry</p><br>
<p class="page2">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 typespecimen book. </p>
<br><br>
<button class="sumbit2">EXPLORE</button>
</div>
<div class="picture"><img src="images/b2.jpg"></div>
<div class="content">
<span class="bottom-title">Computer Lab</span><br><br>
<p class="page1">Lorem Ipsum is simply dummy text of the
printing and typesetting industry</p><br>
<p class="page2">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 typespecimen book. </p>
<br><br>
<button class="sumbit2">EXPLORE</button>
</div>
<div class="content clear">
<span class="bottom-title">Conference Hall</span><br><br>
<p class="page1">Lorem Ipsum is simply dummy text of the
printing and typesetting industry</p><br>
<p class="page2">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 typespecimen book. </p>
<br><br>
<button class="sumbit2">EXPLORE</button>
</div>
<div class="picture"><img src="images/b3.jpg"></div>
<div class="content">
<span class="bottom-title">Play Ground</span><br><br>
<p class="page1">Lorem Ipsum is simply dummy text of the
printing and typesetting industry</p><br>
<p class="page2">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 typespecimen book. </p>
<br><br>
<button class="sumbit2">EXPLORE</button>
</div>
<div class="picture"><img src="images/b4.jpg"></div>
</div>
<br><br>
</div>
</div>
<div class="gallery"></div>
<!--底部-->
<div class="footer"></div>
</body>
</html>
*{
margin:0;
padding:0;
font-family:' Microsoft YaHei UI';
}
.header{
position: fixed;
width:100%;
height:80px;
top:0px;
background-color:#07cbc9;
z-index: 99999;
}
.header .logo img{
width:260px;
height:48px;
padding-left:100px;
padding-top:16px;
}
.header .logo{
float:left;
}
.header .nav{
float:right;
}
.header .nav ul{
padding-right:100px;
}
.header .nav ul li{
float:left;
list-style:none;
width:80px;
height:80px;
line-height:80px;
font-size:15px;
font-weight:bold;
color:#ffffff;
}
.header .nav ul li a{
text-decoration:none;
color:#ffffff;
}
.header .nav ul li a:hover {
color: orange;
}
.clear{clear:both;}
.banner .pic{
width:100%;
height:600px;
padding-top: 80px;
}
.banner .pic img{
width:100%;
height:600px;
}
.banner .topLayer{
position:absolute;
top:80px;
left:0;
background-color:#000;
width:100%;
height:600px;
opacity:0.5;
}
.banner .topLayer-top {
position:absolute;
width:600px;
height:300px;
top: 230px;
right: 50%;
margin-right: -400px;
z-index: 2;
}
.banner .topLayer-top input {
width: 400px;
height: 30px;
border: 2px solid #7D7D7D;
color: #7D7D7D;
background:none;
}
.banner .topLayer-top textarea {
width: 400px;
height: 100px;
border: 2px solid #7D7D7D;
background:none;
}
.banner .topLayer-top button {
width: 150px;
height: 40px;
border: 2px solid #7D7D7D;
color: #7D7D7D;
margin-left: 125.5px;
background:none;
color: white;
}
.about .title{
font-family: "微软雅黑";
font-size: 32px;
font-weight: bold;
text-align: center;
padding-top: 50px;
}
.about .word-top{
text-align: center;
padding-top: 15px;
color: #7D7D7D;
font-size: 12px;
}
.about .middlebox{
width: 1240px;
margin: 0 auto;
position: relative;
}
.about .left {
width: 400px;
height: 450px;
margin-left: 200px;
float: left;
position: absolute;
z-index: 1;
}
.about .left .middletitle{
font-family: "微软雅黑";
font-size: 30px;
color:#000000;
margin-top: 10px;
}
.about .left .leftword{
width: 318px;
height: 160px;
border: 1px solid grey;
padding:25px;
background-color: rgba(255, 255, 255, 0.5);
}
.sumbit{
width:80px;
height:40px;
border:none;
background-color:#000000;
color: white;
margin-bottom: 20px;
}
.about .middlebox .pic1 img{
width: 500px;
height:330px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto auto;
margin-top: 20px;
padding-left: 10px;
}
.part2{
width: 260px;
height: 350px;
float: right;
margin-right: 80px;
padding-top:20px;
position:relative;
}
.p2{
width: 220px;
height: 80px;
padding: 20px 0;
border: 1px solid #07cbc9;
margin-bottom: 30px;
text-align: center;
font-size: 10px;
}
.p2 h3{
font-size:20px;
}
.part2 span{
font-size: 20px;
}
.bottombox{
width: 1240px;
height: 100%;
padding-top: 50px;
overflow: hidden;
}
.bottombox div{
width: 300px;
height:310px;
float: left;
}
.bottombox .picture img{
width: 300px;
height:310px;
}
.bottombox .content{
width: 280px;
height:290px;
padding:10px;
background:#07cbc9;
}
.sumbit2{
width:80px;
height:40px;
border:none;
background-color:#000000;
color: white;
margin-left:110px;
}
.clear{
clear: both;
}
.content .bottom-title{
font-size:25px;
font-weight: bold;
color: white;
}
.content .page1{
font-size: 14px;
color: white;
}
.content .page2{
font-size:12px;
color:rgba(255, 255, 255, 0.6);
}
写回答
2回答
-
你好同学，是说的如下图片吗？图片显示的是正常的哦，这里不用设置居中。而是整体的宽度相对浏览器100%显示哦，建议调整一下
如下调整：
middlebox后面加一个结束标签，让下部分内容不要与中间部分放在一个盒子里面
然后下部分宽度设置100%
一行4个小盒子，每一个小盒子均分25%。高度大一些更好，里面的图片相对父容器100%显示：
盒子实际宽度包含padding，所以文字盒子设置width的时候要减去padding
文字盒子里面的内容设置间距，按钮设置居中：
祝学习愉快，望采纳。
1 -
一切从前端开始
2019-07-17
同学你好，我也刚好做到这个作业，刚赶工交了作业了，我们学习进度差不多 能否加个联系方式一起学习交流呢。
0
相似问题