about图片居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Homework</title>
<style type="text/css">
*{
margin:0;
padding:0;
font-family:"Microsoft YaHei UI";
}
/*1.顶部样式*/
.header{
width:100%;
height:80px;
background-color:#07cbc9;
}
.header img{
width:300px;
height:60px;
padding-left:100px;
padding-top:10px;
}
.header .logo{
float:left;
}
.header .nav{
float:right;
}
.header .nav ul{
padding-right:100px;
}
.header .nav ul li{
list-style:none;
float:left;
width:80px;
height:80px;
line-height:80px;
font-size:15px;
font-weight:bolder;
color:#ffffff;
}
.header .nav ul li a{
text-decoration:none;
}
.header .nav ul li a:hover{
color:#fff;
}
/*2.页脚样式*/
.footer{
width:100%;
height:80px;
line-height:80px;
font-size:15px;
background-color:#07cbc9;
color:#ffffff;
text-align:center;
}
/*3.banner样式*/
.banner{
width:100%;
height:600px;
}
.banner img{
width:100%;
height:600px;
}
/*4.遮盖层样式*/
.opacity img{
position:absolute;
top:80px;
left:0;
background-color:#000;
width:100%;
height:600px;
opacity:0.3;
}
/*5.form表单样式*/
.formTable{
width:500px;
height:300px;
position:absolute;
z-index:3;
top:400px;
margin-top:-150px;
right:50%;
margin-right:-250px;
}
.formTable .yourName{
border:2px solid gray;
width:505px;
height:39px;
background:transparent;
margin-bottom:10px;
}
.formTable .yourPhone{
border:2px solid gray;
width:505px;
height:39px;
background:transparent;
margin-bottom:10px;
}
.formTable .yourEmail{
border:2px solid gray;
width:505px;
height:39px;
background:transparent;
margin-bottom:10px;
}
.formTable .yourComt{
border:2px solid gray;
width:505px;
height:115px;
background:transparent;
margin-bottom:10px;
}
/*5.1表单hover*/
.yourName:hover, .yourPhone:hover, .yourEmail:hover, .yourComt:hover{
background-color:#07cbc9;
}
.formTable .yourSub{
border:2px solid gray;
width:123px;
height:39px;
background:transparent;
color:gray;
margin-left:194px;
}
/*5.2submit hover*/
.yourSub:hover{
border:none;
background-color:#07cbc9;
}
/*6.About区域*/
/*6.1AboutTop*/
.aboutTop{
width:100%;
text-align:center;
margin-top:30px;
}
.aboutTop .aboutTopTit{
font-size:30px;
font-weight:bolder;
}
.aboutTop .aboutTopLine{
width:30px;
height:2px;
background-color:#07cbc9;
margin:0 auto;
margin-top:10px;
}
.aboutTop .aboutTopPara{
color:gray;
font-size:20px;
font-weight:lighter;
line-height:25px;
margin-top:10px;
margin-bottom:10px;
}
/*6.2AboutMiddle*/
.aboutMid{
width:1000px;
margin:0 auto;
border:1px solid blue;
}
.aboutMid .aboutMidPic img{
}
</style>
</head>
<body>
<!-- 顶部 -->
<div class="header">
<!-- 顶部-logo -->
<div class="logo">
<a href="#"><img src="images/logo.png"/></a>
</div>
<!-- 顶部-nav -->
<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>
<!-- banner图 -->
<div class="banner">
<img src="images/banner3.jpg"/>
</div>
<!-- 遮罩层 -->
<div class="opacity">
<img src="images/opacity.png"/>
</div>
<!-- 遮罩层表单 -->
<form class="formTable">
<!-- yourName -->
<input type="text" class="yourName" placeholder="your Name">
<br/>
<!-- yourPhone -->
<input type="text" class="yourPhone" placeholder="your Phone">
<br/>
<!-- yourEmail -->
<input type="text" class="yourEmail" placeholder="your Email">
<br/>
<!-- comment -->
<textarea class="yourComt" placeholder="Write Your Comment Here"></textarea>
<br/>
<!-- button -->
<input type="submit" class="yourSub" value="SEND MESSAGE">
</form>
<!-- about区 -->
<!-- aboutTop -->
<div class="aboutTop">
<div class="aboutTopTit">ABOUT</div>
<div class="aboutTopLine"></div>
<div class="aboutTopPara">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>
<!-- aboutMiddle -->
<div class="aboutMid">
<!-- 左边区域 -->
<div class="aboutMidLeft">
<div class="aboutMidLeftTit"> A WORD<br/>ABOUT US</div>
<div class="aboutMidLeftPara">Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</div>
<button>EXPLORE</button>
</div>
<!-- 中间图片 -->
<div class="aboutMidPic">
<img src="images/bb3.jpg"/>
</div>
<!-- 右边区域 -->
<div class="aboutMidRight"></div>
</div>
<!-- gallery区 -->
<div>11</div>
<!-- 页脚区 -->
<div class="footer">
@ 2016 imooc.com 京ICP备13046642号
</div>
</body>
</html>
about中部区域图片始终无法居中，想请问老师问题在哪里？
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星