a word about you 怎么让他靠近图片
来源：2-10 作业题
肥嘟嘟敏敏
2019-05-14 00:09:53
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carrer Builder</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.head{
width: 100%;
height: 50px;
background: #07cbc9;
clear:both;
}
.head .logo{float:left;padding-left: 50px;}
.head .logo img{width:300px;height:45px;}
.head .nav ul{
float: right;
padding-right: 50px;
}
.head .nav ul li{
list-style: none;
color：white;
font-size: 16px;
font-family: "微软雅黑"
font-weight:bold;
float:left;
padding-right: 30px;
line-height: 50px;
}
.head .nav ul li a{text-decoration: none;color: white;}
.head .nav ul li a：hover{color:red;}
.baner{
width: 100%;
top:50px;
}
.banner .banner0{
width: :100%;
height:600px;
}
.banner .banner0 img{
width:100%;
height:600px;
}
.bannerp{
width: 600px;
height: 400px;
position: absolute;
top:250px;
margin-top: -125px;
right: 50%;
margin-right: -300px;
}
.bannerp .banner1 {padding-top: 10px;
padding-left: 45px;}
.bannerp .banner3{padding-top: 10px;
padding-left: 45px;}
.bannerp .banner1 input{
width:509px;
height: 43px;
border: 2px
font-size:16px;
font-weight:bold;
word-spacing: 5px;
color: white;
border-color: gray;
opacity: 0.5;
}
.bannerp .banner3 input{
width: 509px;
height:119px;
border: 2px;
font-size: 20px;
font-weight: blod;
word-spacing: 10px;
color: white;
border-color: gray;
opacity: 0.5;
}
.bannerp .buttom
{
width:100%;
height: 43px;
padding-top: 10px;
left:300px;
margin-left: 250px;
}
.bannerp .buttom button{
width:127px;
border:2px;
height:43px;
color: white;
font-size: 10px;
font-weight: bold;
}
.about
{
width:100%;
}
.about .top
{
width:100%;
height:800px;
text-align: center;
padding-top: 50px;
}
.about .top .heng
{
width:30px;
padding-left:49%;
padding-top: 20px;
color:#07cbc9;
font-weight: bold;
}
.about .top .word
{
padding-top: 20px;
}
.about .top .word p
{
color:gray;
text-decoration: 5px;
}
.about .top .photo1
{
padding-top: 40px;
width: 100%;
}
.about .top .photo1 .left1
{
width:33.33%;
float:left;
}
.about .top .photo1 .left1 h1
{
width:30%;
display: block;
margin-right: 0px;
}
.about .top .photo1 .middle1
{
width:33.33%;
float:left;
}
.about .top .photo1 .right1
{
width:33.33%;
float:left;
}
</style>
</head>
<body>
<!-- 顶部 -->
<div class="head">
<div class="logo"><img src="images/logo.png"></div>
<div class="nav">
<div class="clear"></div>
<ul>
<li><a href="#">CONTECT</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">HOME</a></li>
<li><a href="#">GALLERY</a></li>
</ul>
</div>
</div>
<!-- banner图 -->
<div class="banner">
<div class="banner0"><img src="images/banner3.jpg"></div>
<div class="bannerp">
<div class="banner1"><input type="text" name="Name" placeholder="Your Name"></div>
<div class="banner1"><input type="text" name="phone" placeholder="Your Phone"></div>
<div class="banner1"><input type="text" name="a" placeholder="Your Home"></div>
<div class="banner3"><input type="text" name="b"placeholder="white Your comment here"></div>
<div class="buttom"><button>SEND MESSARE</button></div>
</div>
</div>
<!-- ABOUT区 -->
<div class="about">
<div class="top">
<div class="title1"><h1>ABOUT</h1></div>
<div class="heng"><hr/></div>
<div class="word">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
<p>industry. Lorem Ipsum has been the industry's standard dummy</p>
<p>text ever since the 1500s.</p>
</div>
<div class="photo1">
<div class="left1"><h1>A WORD ABOUT US </h1></div>
<div class="middle1"><img src="images/bb3.jpg"></div>
<div class="right1">
<div class="box1">
<h1>70000</h1>
<div class="heng"><hr/></div>
<p>student</p>
</div>
<div class="box2">
<h1>600</h1>
<div class="heng"><hr/></div>
<p>faculty</p>
</div>
</div>
</div>
</div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<!-- GALLEY区 -->
<div class="gally"></div>
<!-- 页脚区 -->
</body>
</html>
1回答
-
好帮手慕糖
2019-05-14
同学你好，是指about中间的部分吗？这里整体是要实现居中的，老师这里有个思路，同学可以参考下哦。即：
这部分用一个盒子包裹，然后给盒子设置具体的宽度，然后设置margin:0 auto;来实现整体居中，这里的实现是没有问题的，里面的内容建议：内部可以安照从左到右布局，首先是左侧小标题，其次是中间的图片，然后为右侧的两个小区域（需要注意的是左侧的部分跟右侧的部分宽度要尽量一致）。然后左侧的文字区域因一部分在图片上。可用定位来实现。
所以建议：这里可以photo1设置一个固定的宽，然后使用margin:0 auto;设置整体的居中。
希望能帮助到你，祝学习愉快！
0
相似问题