<!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>
- 2 回答
- 1 关注
- 940 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消