about区 左边的英文和中间的图片位置总是随浏览器大小变
来源：4-3 项目作业
weixin_慕函数5166781
2019-08-15 16:46:08
<!DOCTYPE html>
<html>
<head>
<title>zuoye</title>
<link rel="stylesheet" type="text/css" href="../css/text1.css">
</head>
<body>
<div class="content">
<div class="header">
<div class="headerlogo">
<img src="../images/logo.png">
</div>
<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 class="banner">
<div><img src="../images/banner3.jpg"></div>
<div class="shadow"></div>
<form>
<input type="text" class="text1" name="" placeholder="your Name"></br>
<input type="text" class="text1" name="" placeholder="your Phone"></br>
<input type="text" class="text1" name="" placeholder="your Email"></br>
<textarea type="text" class="text1" placeholder="Write your comment here"></textarea></br>
<input type="submit" class="submit"name="" placeholder="SEND MESSAGE">
</form>
</div>
<div class="ABOUT">
<div class="top">
<H1>ABOUT</H1>
<div class="line"></div>
<P>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.</P>
</div>
<div class="center">
<div class="left">
<h2>A WORD ABOUT US</h2>
<div class="info">
<p>Praesent dignissim viverra est,sed bibendum ligula congue non.Sed ac nislet felis gravida commodo?Suspendisse eget ullamcocper ipsum.Suspenisse diam ament.</p>
<div class="btn">
<a href="#">EXPLORE</a>
</div>
</div>
</div>
<div class="centerimg">
<img src="../images/bb3.jpg">
</div>
<div class="right">
</div>
</div>
<div class="bottom">
</div>
</div>
<div class="GALLERY">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
.content{
width: 100%;
}
*{
margin:0;
}
.content .header{
width: 100%;
height: 80px;
line-height: 80px;
background-color:#07cbc9;
}
.content .header .headerlogo{
float: left;
margin-left: 60px;
margin-top: 10px;
}
.content .header ul{
float: right;
margin-right: 60px;
}
.content .header ul li{
list-style: none;
float:left;
margin-right: 30px;
}
.content .header ul li a{
color: white;
text-decoration: none;
/*去下划线*/
}
.content .header ul li:hover{
background-color: black;
}
/*以上是开头*/
/*下面是banner区*/
.content .banner img{
width: 100%;
height: 600px;
float:left;
margin-top: -12px;
z-index: 10;
margin-bottom: 40px;
}
.content .banner .shadow{
width: 100%;
height: 600px;
background-color: #000;
position:absolute;
opacity: 0.4;
z-index: 30;
}/*遮罩层*/
.content .banner form{
position: absolute;
left: 40%;
top: 300px;
line-height: 30px;
z-index: 50;
text-align: center;
}
.content .banner form input,textarea{
background-color: transparent;
width: 300px;
}
.content .banner form .text1:hover{
border:1px solid #07cbc9;
}
.content .banner form .submit:hover{
border:none;
background-color: #07cbc9;
}
/*ABOUT区*/
.content .ABOUT{
widows: 100%;
}
.content .ABOUT .top{
width: 600px;
text-align: center;
margin:auto;
}
.content .ABOUT .top .line{
width: 40px;
height: 2px;
background-color: #07cbc9;
margin: 20px auto;
}
.content .ABOUT .top p{
line-height: 30px;
font-size: 18px;
margin-bottom: 40px;
}
.content .ABOUT .center .left{
float: left;
width: 300px;
left: 16%;
position: relative;
z-index: 10;
}
.ABOUT .center .left h2{
width: 200px;
margin-bottom: 10px;
}
.content .ABOUT .center .left .info{
border:1px solid #bdbebd;
background-color: rgba(255, 255, 255, 0.4);
width: 300px;
height: 200px;
padding: 20px;
line-height: 25px;
}
.ABOUT .center .left .info .btn{
margin-top: 30px;
border:1px solid #000;
width: 80px;
height: 30px;
background-color:#000;
text-align: center;
}
.ABOUT .center .left .info .btn a{
text-decoration: none;
}
.ABOUT .center .left .info .btn:hover{
background-color:white;
}
.content .ABOUT .center .centerimg{
float: left;
left: 15%;
position:relative;
z-index: 6;
}写回答
1回答
-
同学你好，为center设置1200的宽度调整图片左间距。代码如下：
.ABOUT .center{ width: 1200px; margin: 0 auto; } /*调整左间距*/ .content .ABOUT .center .left{ float: left; width: 300px; left: 2%; position: relative; z-index: 10; } /*删除左间距*/ .content .ABOUT .center .centerimg{ float: left; position:relative; z-index: 6; }祝学习愉快！
1
相似问题