about区域中间还是做不出来
*{
margin:0;
padding: 0;
list-style: none;
text-decoration: none
font-family: "微软雅黑";
}
/* 头部样式 */
.header{
width: 100%;
height: 80px;
background-color: #07cbc9
}
.header img{
width: :200px;
height: 60px;
padding-left: 150px;
padding-top: 10px;
}
.header .logo{
float: left;
}
.header .nav{
float: right;
}
.header .nav ul{
padding-right: 100px;
}
.header .nav ul li{
float: left;
list-style: none;
width: 100px;
height: 80px;
line-height: 80px;
font-size: 18px;
font-weight: bolder;
color: #eee
}
/*主体样式*/
/*banner*/
.main .banner{
width:100%;
height: 600px;
}
.main .banner img{
width:100%;
height: 600px;
}
.main .bannerLayer{
width:100%;
height: 600px;
position: absolute;
top: 80px;
left: 0;
background-color: #000;
opacity: 0.5;
}
/*表单区*/
.main .bannerLayer-top{
width: 600px;
height:300px;
position: absolute;
top: 380px;
margin-top: -150px;
z-index: 2;
right: 50%;
margin-right: -300px;
}
.main .bannerLayer-top form{
text-align: center;
}
.main .bannerLayer-top form input{
border: 2px solid gray;
width: 505px;
height: 39px;
margin-top: 20px;
color: #eee;
background:none;
}
.main .bannerLayer-top form input:hover{
border-color: #07cbc9;
}
.main .bannerLayer-top form textarea:hover{
border-color: #07cbc9;
}
.main .bannerLayer-top form textarea{
border: 2px solid gray;
width: 505px;
height: 115px;
margin-top: 20px;
color: #eee;
background:none;
}
.main .bannerLayer-top form button{
border: 2px solid gray;
width: 123px;
height: 39px;
margin-top: 20px;
color: #fff;
background:none;
}
.main .bannerLayer-top form button:hover{
background: #07cbc9;
border: none;
}
/*about区*/
.main .about{
width: 100%
}
/*about的顶部*/
.main .about .about-top{
width:30%;
margin: 0 auto;
margin-top: 50px;
text-align: center;
}
.main .about .about-top hr{
width: 40px;
margin: 0 auto;
height: 2px;
background-color: #07cbc9;
border: none;
margin-top: 15px;
margin-bottom: 15px;
}
.main .about .about-top p{
font:thin 10px;
}
/*about的中间*/
.main .about .about-middle{
width: 1200px;
margin: 0 auto;
margin-top: 15px;
overflow: hidden;
}
.main .about .about-middle .left{
width: 300px;
height: 400px;
text-align: center;
float: left;
}
}
.main .about .about-middle .left .word{
border: 1px gray solid;
position: absolute;
top:40px;
left: :120px;
line-height: 28px;
padding-top: 25px;
text-align:left;
}
.main .about .about-middle .left .word p{
font-size: 14px;
text-align: left;
padding-bottom: 20px;
}
.main .about .about-middle .left .word button{
text-align: center;
color: white;
background:black;
width:102px;
height:45px;
}
.main .about .about-middle .mid{
width: 600px;
height: 400px;
float: left;
}
.main .about .about-middle .mid img{
width:568px;
height: 380px;
}
.right{
width:300px;
height: 350px;
float:left;
}
.right .student,.bottom{
border:1px solid #07cbc9;
margin-top: 20px;
padding-top: 15px;
text-align: center;
width: 238px;
height: 144px;
}
/*底部*/
.footer{
width: 100%;
background-color: #07cbc9;
height: 80px;
margin-top: 50px;
}
.footer p{
line-height: 80px;
text-align: center;
color: white;
font-size: 12px;
}
<!DOCTYPE html>
<html>
<head>
<title>2-10作业</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!--头部-->
<div class="header">
<div class="logo">
<img src="images/logo.png" alt="logo"/>
</div>
<div class="nav">
<ul>
<li>CONTACT</li>
<li>EVENTS</li>
<li>FACULTY</li>
<li>GALLERY</li>
<li>ABOUT</li>
<li>HOME</li>
</ul>
</div>
</div>
<!--主体-->
<div class="main">
<div class="banner">
<img src="images/banner3.jpg">
</div>
<!--遮罩层-->
<div class="bannerLayer"></div>
<div class="bannerLayer-top">
<form>
<input type="text" name="username" value="your Name">
<input type="text" name="phone" value="your phone">
<input type="text" name="email" value="your email">
<textarea name="comment" cols="30" rows="6" >Write Your Comment Here</textarea><br/>
<button type="submit">SEND MESSAGE</button>
</form>
</div>
<!--about区-->
<div class="about">
<div class="about-top">
<h1>ABOUT</h1>
<hr>
<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="about-middle">
<div class="left">
<h2>A WORD ABOUT US</h2>
<div class="word">
<p>Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nislet felis gravida commodo? Suspendisseeget ullamcorper ipsum.SUspendidsse diam amet.</p>
</div>
<button>EXPLORE
</button>
</div>
<div class="mid">
<img src="images/bb3.jpg">
</div>
<div class="right">
<div class="student">
<h2>70000</h2><hr>
<p>Student</p>
</div>
<div class="faculty">
<h2>600</h2><hr>
<p>FACULTY</p>
</div>
</div>
</div>
<div class="about-bottom">
</div>
</div>
<!--gallery区-->
<div class="gallery"></div>
</div>
<!--底部-->
<div class="footer">
<p>© 2016 imooc.com 京ICP备13046642号</p>
</div>
</body>
</html>4
收起
正在回答 回答被采纳积分+1
2回答
好帮手慕码
2019-04-20 19:04:56
同学你好！
about区域分为上下两部分：
（1）上部分：
可以给三部分外面的大盒子盒子设置相对定位，左边小盒子设置绝对定位覆盖到中间图片上去：
左侧盒子有一个遮罩的效果，这里可以使用rgba()来设置透明度 或者写一个遮罩层
另 左侧按钮的样式没有生效：
（2）下部分这里可以给一个思路：
一个大的div容器，里面写八个小的div，分别容纳图片和内容，分别给8个不同的div设置左浮动，这样就能横向显示，并且每个div的宽度设置为25%，这样正好一排显示4个。注意里面字体的大小和颜色的设置，以及位置的定位，需要改变位置的可以使用填充。
同学可以看这个思路再试以下。
如果帮助到了你 欢迎采纳 祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星