我想问下助理！ABOUT底部怎做，不会做
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-size: 16px;
/*font-weight: bolder;*/
font-family: "微软雅黑";
}
.header{
width: 100%;
height: 100px;
background: #07cbc9;
}
.header .logo{
float: left;
}
.header .logo img{
width:300px;
height: 80px;
padding-left: 30px;
padding-top: 8px;
}
.header .nav{
float: right;
}
.header .nav ul{
padding-right: 20px;
}
.header .nav ul li{
list-style:none;
float: left;
width: 80px;
height: 100px;
/*padding-left: 60px;*/
/*margin-left: 10px;*/
line-height: 90px;
color: #fff;
}
.header .nav ul li:hover{
color: red;
cursor: pointer;
}
.main .top{
width: 100%;
height: 600px;
}
.main .top img{
width: 100%;
height: 600px;
}
.main .topLayer{
position: absolute;
top: 100px;
left: 0;
background: #000;
width: 100%;
height: 600px;
opacity: 0.5;/*透明度*/
}
.main .topLayer-top{
width: 500px;
height: 300px;
position: absolute;
top: 400px;
margin-top: -150px;
z-index: 2;
right: 50%;
margin-right: -250px;
text-align: center;
}
.main .topLayer-top form{
padding-left: 100px;
color: #FFF;
font-size: 15px;
font-weight: bolder;
font-family: "微软雅黑";
}
.main .topLayer-top form input,textarea{
width: 300px;
line-height: 22px;
background: none;
margin-top: 10px;
}
.main .topLayer-top form textarea:hover{
background: pink;
cursor: pointer;
}
.main .topLayer-top form button{
width: 150px;
height: 30px;
background: none;
color: #fff;
margin-top: 20px;
font-weight: bolder;
font-size: 14px;
/*border-radius: 8px;*/
/*margin-left: 150px;*/
}
.main .topLayer-top form button:hover{
background: #F5704F;
cursor: pointer;
}
/*.clear{
clear: both;
}*/
.main .comm-top{
width: 400px;
margin: 0 auto;
text-align: center;
font-size: 50px;
font-weight: bold;
font-family: "微软雅黑";
line-height: 150px;
}
.main .middle{
width: 1000px;
margin: 0 auto;
}
.main .middle .m-middle{
font-size: 20px;
color: #E19796;
/*font-weight: bold;*/
/*padding-top: 50px;*/
font-style: italic;
text-align: center;
padding-bottom: 50px;
height: 200px;
overflow: hidden;/*清除浮动第二方法*/
zoom: 1;
}
.m-left,.m-center,.m-right{
float: left;
}
.des1{
width: 100px;
font-weight: bold;
font-size: 20px;
text-align: center;
}
.m-left{
position: relative;
z-index: 2;/*层叠*/
left: 20px;
}
.des2{
width: 300px;
height: 250px;
border:1px solid #ccc;
background: rgha(255,255,255,0.5);
}
.des2 .word{
padding: 19px;
}
.des2 button{
width: 100px;
height: 40px;
background: none;
border: 2px solid #000;
}
.m-center{
width: 500px;
}
.m-center img{
width: 100%;
}
.m-right{
width: 100px;
margin-left: 10px;
line-height: 90px;
}
.m-right div{
width: 100px;
height: 100px;
border: 2px solid #ccc;
text-align: center;
}
.m-right div hr{
width: width:10px;
margin: 0 auto;
}
.m-right .des2{
margin-top: 10px;
}
.clear{
clear: both;
}
.main .bottom{
background: #F9F9F9;
}
.main .bottom .left-top{
width: 1000px;
margin:0 auto;
}
.main .bottom .left-top dl{
float: left;
width: 520px;
margin: 15px 18px;
}
.main .bottom .left-top dl img{
width: 470px;
height: 460px;
}
.main .bottom .left-top .titile{
font-weight: bold;
font-size: 15px;
font-family: "微软雅黑";
padding-top: 10px;
}
.main .bottom .left-top dl .word{
padding-top: 20px;
font-size: 20px;
font-weight: bold;
color: #7D7C7F;
padding-bottom: 50px;
}
/*.main .bottom .left-top .titile .word{
border: 1px solid red;
}*/
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="image/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="main">
<div class="top">
<img src="image/banner3.jpg" />
</div>
<!--遮罩层-->
<div class="topLayer"></div>
<div class="topLayer-top">
<form>
<input type="text" name="username" placeholder="your Name" />
<br />
<br />
<input type="text" name="telphone" placeholder="your Phone" />
<br />
<br />
<input type="text" name="email" placeholder="your Email"/>
<br />
<br />
<textarea name="message" placeholder="Write Your Comment Here" rows="4"></textarea>
<br />
<button>SEND MESSAGE</button>
</form>
</div>
<!--中间部分-->
<div class="middle">
<!-- 上部分 -->
<div class="comm-top">
ABOUT
</div>
<div class="m-middle">
Lorem Ipsum is simplu dummy text of the printing and typesetting<br>
industry Lorem Ipsum has the industry's standard dummy<br>
text ever since the 1500s.
</div>
<div class="m-bottom">
<div class="m-left">
<div class="des1"> A WORD ABOUT US</div>
<div class="des2">
<div class="word">
Praesent dingissim viverra est,sed<br>
bibendum ligula congue non,Sed ac nislet<br>
felis gravida commodo? Suspendisse<br>
eget ullamcorper ipsum,Suspendsse<be>
diam amet.
</div>
<button>EXPLORE</button>
</div>
</div>
<!--中间图片-->
<div class="m-center">
<img src="image/bb3.jpg" />
</div>
<div class="m-right">
<div class="des1">
1700
<hr>Students
</div>
<div class="des2">
600
<hr>Faculty
</div>
</div>
<div class="clear"></div>
<div class="bottom">
<div class="left-top">
<dl>
<dt>
<img src="image/b1.jpg" />
</dt>
<dd class="titile">
Contference Hall
<!--Lorem is simply dummy text of the <br>
printing and typeseting industry<br>
LoremL Ipsum has been the industry's dummy<br>
text ever since the 1500%, when an unknown <br>
printer took a galley of type and scrambled it
to make a type specimen book.-->
</dd>
<dd class="word">
Lorem Ipsum is simply dummy text of the<br>
printing and typesetting industry<br>
Lorem Ipsum has been the industry's dummy<br>
text ever since the 1500s,when an unknown<br>
printer took a galley of type and scrambled<br>
it to make a type specimen book.<br>
<button>EXPLORE</button>
</dd>
</dl>
</div>
</div>
</div>
</div>
</body>
</html>
qq_蓝骏毅_040766332回答
-
Nyears
第一你要说清楚什么问题或说明你要做什么，第二你要指出问题在哪里，整个页面贴出来等别人给你一行一行的查看怕是不可能的 -
奋斗好青年
好好学习html+css
随时随地看视频慕课网APP
Html/CSS