六张图片怎么分开啊

来源：2-10 作业题

Ting111

2019-05-13 20:37:35

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		*{padding: 0;margin: 0;}
		body{font-family: Microsoft YaHei UI;}
	/*head*/
	.head{height: 80px;width: 100%;background-color: #07cbc9;}
 	.head img{float: left;margin-top: 16px}
 	.head ul{float: right;margin-top:20px; }
 	.head ul li{float: left;padding: 10px;}
 	a{text-decoration: none;color: white;font-weight: bold;}
 	
 	/*banner*/
 	.banner{width: 100%;height: 500px;position: relative;}
 	.picbanner{margin: 0 auto;}
 	.picbanner img{width: 100%;height: 500px;}
 	
 	.inp{position: absolute;top: 77px;margin-left: 50%;left: -185px;text-align: center;}
 	.input1,textarea{width: 505px;border: 2px solid grey;margin-bottom: 15px;background-color: black;opacity: 0.5;text-transform: capitalize; color: white;font-family: Microsoft YaHei UI;}
 	.input1{height: 39px;}
 	textarea{height: 115px;}
 	button{width: 123px;height:39px;text-transform:uppercase;border: 2px solid grey;background-color: black;opacity: 0.6;color: white; }
 	/*content*/
 	.content{}
 	.about{font-size: 40px;font-weight: bold;text-align: center;padding: 10px;}
 	.Lorem{color: grey;text-align: center;}
 	.praesent{text-align: left;width: 370px;height: 246px;border: 1px solid grey;padding: 30px;background-color: white;opacity: 0.5;font-weight: bold;box-sizing: border-box;}
 	.praesent button a:hover{background: transparent;border: 1px solid black;}
 	.none{width:40px;height: 3px;background-color: lightblue;margin: 0 auto;}
 	.content button{background-color: black;color: white;width: 102px;height: 43px;margin-top: 30px}
 	.aword{font-size: 40px;}
 	.midmiddle img{height: 380px;width: 568px;}
 	.midleft{float: left;margin-top: 30px;}
 	.midmiddle{float: left;margin-top: 30px;margin-left: -120px;}
 	.midright{float: left;margin-top:30px;text-align: center;margin-left: 25px}
 	.student,.faculty{height: 144px;width: 238px;border: 1px solid lightblue;margin-bottom: 30px;}
 	.nonest{width:40px;height: 3px;background-color: lightblue;margin: 0 auto;}
 	.nonest,.num,.nam{margin-top: 20px;}
 	.num{font-weight: bold;font-size: 20px;}
 	.midtop{overflow: hidden;}
 	.tbor{width:1100px;height: 450px;margin:0 auto;}
 	/*图文*/
 	.pic1{width: 25%height:150px; background-color: lightblue;float: left;}
	</style>
</head>
<body>
<div class="head">
	<img src="images\logo.png">
	<ul style type="none">
		<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 class="clear"></div>
</div>
<!--head end-->
<div class="banner">
	<div class="picbanner"><img src="images\banner.jpg">
	</div>
		<div class="inp">
			<input type="text" name="name" placeholder="your name" class="input1"><br>
			<input type="text" name="phone" placeholder="your phone" class="input1"><br>
			<input type="text" name="nnnn" placeholder="your email" class="input1"><br>
			<textarea rows="8" cols="50" placeholder="write your comment here"></textarea><br>
			<button><a href="#">send message</a></button>
		</div>
	
</div>
<!--banner end-->
<div class="content">
	<div class="about">ABOUT</div>
	<div class="none"></div>
		<DIV class="Lorem ">loremloremloremloremloremloremloremloremloremloremlorem<br>loremloremloremloremloremloremloremloremloremloreml<br>oremloremloremloremloremloremloremlorem</DIV>
		    
		     <div class="tbor">
		        <div class="midleft">
		        	<div class="aword">A WORD<br> ABOUT US</div>
				    <div class="praesent">praesentpraesentpraesentpraesent<br>praesentpraesentpraesentprae<br>sentpraesentpraesentpraesentpraesent<br>praesentpraesentpraesent
				     <button><a href="#">EXPLORE</a></button></div>
				   
			    </div>
			    <div class="midmiddle"><img src="images\bb3.jpg"></div>
				<div class="midright">
					<div class="student">
						<div class="num">70000</div>
						<div class="nonest"></div>
						<div class="nam">Student</div>
					</div>
					<div class="faculty">
						<div class="num">600</div>
						<div class="nonest"></div>
						<div class="nam">Faculty</div>
					</div>
					
				</div>
			</div>
			<div class="picwor">
				
					<div class="pic1"><img src="images\b1.jpg"></div>
					<div class="pic1"><h1>Library</h1>
					     <h3>lorem ipsumis simply dummy text of the printing and typesetting industry</h3>
					     <p>lorem has been the lorem has been thelorem has been thelorem has been thelorem has been thelorem has been thelorem has been thelorem has been thelorem has been thelorem has been the</p>
					 </div>
				
				
					<div class="pic1"><img src="images\b2.jpg"></div>
					<div class="pic1" ><h1>computer lab</h1>
					     <h3>lorem ipsumis simply dummy text of the printing and typesetting industry</h3>
					     <p>lorem has been the lorem has been thelorem has been thelorem has been thelorem has been thelorem has been thelorem has been thelorem has been thelorem has been thelorem has been the</p>
					 </div>
				
				<br>
				
					<div class="pic1"><h1>conference hall</h1>
					     <h3>lorem ipsumis simply dummy text of the printing and typesetting industry</h3>
					     <p>lorem has been the lorem has been thelorem has been thelorem has been thelorem has been thelorem has been thelorem has been thelorem has been thelorem has been thelorem has been the</p>
					 </div>
					<div class="pic1"><img src="images\b3.jpg"></div>
				

					<div class="pic1"><h1>play ground</h1>
					     <h3>lorem ipsumis simply dummy text of the printing and typesetting industry</h3>
					     <p>lorem has been the lorem has been thelorem has been thelorem has been thelorem has been thelorem has been thelorem has been thelorem has been thelorem has been thelorem has been the</p>
					 </div>
					<div class="pic1"><img src="images\b4.jpg"></div>
				
			</div>
			<div class="clear"></div>
			

	<div class="gallery">GALLERY</div>
		<div></div>	
</div>
<!--content end -->
<div class="foot">
	
</div>
<!--foot end-->
</body>
</html>

写回答

4回答