老师,about区请帮忙演示一下

麻烦帮忙把左边和中间部分做一下解释一下, 在这卡了太久, 右边我自己再尝试做.麻烦了

<!DOCTYPE html>
<html>
<head>
	<title>Career builder</title>
	<link rel="stylesheet" type="text/css" href="Website.css">
</head>
<body>
	<div class="header">
		<div class="logo"><img src="images/logo.png"></div>
		<div class="nav">
			<ul>
				<li>HOME</li>
				<li>ABOUT</li>
				<li>GALLERY</li>
				<li>FACULTY</li>
				<li>EVENTS</li>
				<li>CONTACT</li>
			</ul>
		</div>
	</div>
	<div class="banner">
		<img src="images/banner3.jpg">
		<div class=bannerLayer></div>
		<div class="textArea">
			<input type="text" name="username" placeholder="your Name">
			<input type="text" name="userphone" placeholder="your Phone">
			<input type="text" name="useremail" placeholder="your Email">
			<textarea name="comment" placeholder="Write Your Comment Here"></textarea>
			<button>SEND&nbsp;MESSAGE</button>
		</div>
	</div>
	<div class="main">
		<div class="about">
			<div class="aboutup">
				<h1 class="aboutText1">ABOUT</h1>
				<div class="line"></div>
				<ul>
					<li>
						Lorem lpsum is simply dummy text of the printing and typesetting industry.
					</li>
					<li>
						Lorem lpsum has been the industry's standard dummy
					</li>
					<li>
						text ever since the 1500s.
					</li>
				</ul>
				<div class="milddleBox">
				<div class="aboutup_left">
					<h1>&nbsp;&nbsp;A WORD<br>&nbsp;ABOUT US</h1>
					<div class="aboutup_left-text">
						<span>Praesent dignissim viverra estm sed<br> bibendum ligula congue non. Sed ac nisl<br>et felis gravida commodo? Suspendisse<br>eget ullamcorper ipsum. Suspendisse<br>diam amet.</span>
						<button>EXPLORE</button>
					</div>
				</div>
				<div class="aboutup_mid">
					<img src="images/bb3.jpg">
				</div>
				<div class="aboutup_right">
					<div>
						<span>70000</span>
						<div class="line2"></div>
						<span>Students</span>
					</div>
					<div>
						<span>600</span>
						<div class="line2"></div>
						<span>Faculty</span>					
					</div>
				</div>
				</div>
			</div>
		</div>
		<div class="gallery"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

*{
	margin:0;padding:0;
	font-family: Microsoft Yahei UI;
}
/*头部底部结构*/
.header,.footer{
	width: 100%;
	height: 80px;
	background: #07cbc9;
	overflow: hidden;
}
/*头部样式*/
.header{
	position: fixed;
	z-index: 99999;
	top: 0;
}
.header .logo img{
	height:32px;
	width: 170px;
	display: inline-block;
	float: left;
	padding-top: 24px;
	padding-left: 100px;
}
.header .nav ul{
	float: right;
}
.header .nav ul li{
	display: inline-block;
	color: #ffffff;
	margin-right: 5px;
	padding:0 10px;
	line-height: 80px;
	font-size: 13px;
	font-weight: bold;
}
.header .nav ul:nth-last-child(1){
	margin-right: 2em;
}
.header .nav ul li:hover{
	background-color: #000;
	cursor: pointer;
}
/*Banner区样式*/
.banner{
	width: 100%;
	height: 600px;
	margin-top:80px;
	position: relative;
}
.banner img{
	width: 100%;
	height: 100%;
}
/*遮罩*/
.bannerLayer{
	width: 100%;
	height: 600px;
	opacity: 0.5;
	background: #000;
	position: absolute;
	top:0;
	z-index: 2;
}
/*文本框样式*/
.textArea{
	position: absolute;
	width: 500px;
	height: 300px;
	top:50%;
	right: 50%;
	margin-right:-250px;
	margin-top:-150px;
	z-index:9;
}
.textArea input,
.textArea textarea,
.textArea button{
	border:1px solid #666;
	display:block;
	margin-bottom: 20px;
	background: transparent;
	color: grey;
	outline: none;
}
.textArea input{
	width: 500px;
	height: 40px;
	text-indent:20px;
}
.textArea textarea{
	width: 500px;
	height: 115px;
	padding-top: 15px;
	text-indent:20px;
}
.textArea button{
	width: 130px;
	height: 40px;
	position: absolute;
	right: 50%;
	margin-right:-65px;
	cursor: pointer;
}
.textArea input:hover,
.textArea input:focus{
	border:#07cbc9 1px solid;
}
.textArea textarea:hover,
.textArea textarea:focus{
	border:#07cbc9 1px solid;
}
.textArea button:hover{
	background:#07cbc9;
	color:#ffffff;
}
/*About区*/
.main .about .aboutup{
	width: 100%;
	height: 800px;
	position: relative;
}
.main .about .aboutup .aboutText1{
	font-size:50px;
	text-align: center;
	padding-top:20px;
}
.main .about .aboutup .line{
	width: 45px;
	height: 2px;
	background:#07cbc9;
	position: absolute;
	left:50%;
	margin-left: -22.5px;
	margin-top: 8px;
}
.main .about .aboutup ul{
	margin-top:30px;
}
.main .about .aboutup ul li{
	list-style: none;
	text-align: center;
	margin-bottom:0.5em;
	color:grey;
}
/*ABOUT区结构*/

.middlebBox{
	width: 1200px;
	margin:0 auto;
	overflow: hidden;
	position: relative;
}
.middleBox>div{
	float: left;
}
.aboutup_mid img{
	height: 420px;
	width: 600px;
}
.aboutup_left{
	width: 300px;
	height: 400px;
	position: relative;
}
.aboutup_left-text{
	border:1px solid grey;
	width: 300px;
	height: 275px;
	margin-top:15px;
	padding-top:15px;
	padding-left:25px;
	z-index: 99;
	position: absolute;
	left: 100px;
	background-color: rgba(255,255,255,0.5);
}
.aboutup_left h1{
	font-size:32px;
	font-weight: normal;
	text-align: center;
}

慕勒9893359 2019-04-28

源自：项目：网页布局案例 2-10 作业题

收起

1回答

好帮手慕夭夭回答被采纳获得+3积分 2019-04-28 11:55:09

你好同学，老师先给你一个调整思路，先按照思路去修改，如果哪里不会了，可以粘贴代码提问，老师会帮助你指定

思路:

中间部分的大div，设置固定宽度 , 例如1200px. 然后使用margin:0 auto设置这个div居中，注意这里的宽度要和GALLERY区的宽度一致，里面3个小的div，设置浮动使显示在一行。

然后如下的文本框建议使用background: rgba(255,255,255,0.5);实现遮罩效果 .并且文本框可以设置绝对定位 ,使部分在图片中显示 . 注意要设置文本框的父元素div相对定位 .使文本框参照其父元素定位

祝学习愉快，望采纳。

收起回答

慕勒9893359 提问者 #1

请问为何设置了float他们不会在同一行呢?width三个加起来是1200px,中间600左右300px

2019-04-28 21:45:54
好帮手慕夭夭回复提问者慕勒9893359 #2

请同学把修改过的代码粘贴到问答区域，以便老师准确高效的帮助你查找问题哦

2019-04-29 09:39:31