<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } .header { width: 100%; height: 100px; } .header .logo img { width: 300px; height: 85px; margin-left: 100px; margin-top: 8px; float: left; } .header .menu { height: 100px; float: right; } .header .menu ul { list-style: none; margin-right: 50px; } .header .menu ul li { line-height: 100px; float: right; color: #7D7D7D; width: 80px; text-align: center; font-weight: bolder; } .main .pic img { width: 100%; height: 600px; } .main .topLayer { background-color: #000000; width: 100%; height: 600px; opacity: 0.5; position: absolute; top: 100px; } .main .btn { position: absolute; width: 500px; height: 300px; top: 400px; margin-top: -150px; right: 50%; margin-right: -250px; text-align: center; } .main .btn p { padding-top: 100px; color: #ffffff; font-size: 45px; font-weight: bolder; } .main .btn button { margin-top: 50px; background-color: #F5704F; width: 200px; height: 60px; color: #ffffff; border-radius: 8px; } .main .content .top { width: 1000px; padding-top: 50px; margin: 0 auto; } .main .content .top .icon { float: left; width: 33.3%; text-align: center; } .main .content .top .icon img { width: 100px; height: 100px; } .main .content .top .icon .des{ font-size: 20px; color: #7c7d7f; font-weight: bolder; padding-top: 20px; } .main .content .top .recept { padding-top: 50px; text-align: center; color: #E19796; font-weight: bold; font-style:italic ; } .main .content .top .picAndDes { padding-top: 50px; } .main .content .top .picAndDes .icon2 { float: left; padding: 10px; text-align: center; } .main .content .top .picAndDes .icon2 img { width: 310px; height: 260px;; } .main .content .top .picAndDes .icon2 .des1 { padding-top: 10px; font-size: 20px; font-weight: bold; color: #7c7d7f; } .main .content .top .picAndDes .icon2 .des2 { color: #BDBDBC; padding-top: 10px; } .main .content .bottom { width: 100%; background-color: #F9F9F9; padding-bottom: 30px; } .main .content .bottom .bottom-content { width: 1000px; margin: 0 auto; margin-bottom: 50px; } .main .content .bottom .bottom-content .title { padding-top: 50px; text-align: center; padding-bottom: 40px; font-size: 20px; } .main .content .bottom .bottom-content .picContent dl { margin: 10px 12px 10px 12px; width: 470px; float: left; } .main .content .bottom .bottom-content .picContent dl dd{ padding-top: 20px; } .main .content .bottom .bottom-content .picContent dl dt img{ width:470px; height:480px; } .footer{ width: 100%; height: 100px; background-color: #292C35; color: #ffffff; text-align: center; line-height: 100px; font-size: 15px; } </style> </head> <body> <!-- 头部 --> <div class="header"> <div class="logo"><img src="image/logo.png"></div> <div class="menu"> <ul> <li>手记</li> <li> Video </ li> </ ul> <li> Image </ li> <li> Home </ li> </div> </div> <!-- 主体 --> <div class="main"> <!-- 大图 --> <div class="pic"> <img src="image/1.jpeg"> </div> <!-- 遮罩层 --> <div class="topLayer"> </div> <!-- 最上层的内容 --> <div class="btn"> <p>MY BEAUTIFUL LIFE</p> <button>LOOK MORE ></button> </div> <!-- 内容展示区 --> <div class="content"> <!-- 上部分 --> <div class="top"> <div> <div class="icon weibo"> <img src="image/weibo.png" alt=""> <div class="des">MICROBLOG</div> </div> <div class="icon weixin"> <img src="image/weixin.png" alt=""> <div class="des">WECHAT</div> </div> <div class="icon qq"> <img src="image/qq.png" alt=""> <div class="des">QQ</div> </div> </div> <div style="clear: both;"></div> <div class="recept"> "I want to give good things to record down,<br>after the recall will be very beautiful." </div> <div class="picAndDes"> <div class="icon2 "> <img src="image/03-01.jpg" alt=""> <div class="des1">Cool Image</div> <div Class="des2">Record The Picture</div> </div> <div class="icon2"> <img src="image/03-02.jpg" alt=""> <div class="des1">Great Picture</div> <div class="des2">Record The Picture</div> </div> <div class="icon2"> <img src="image/03-03.jpg" alt=""> <div class="des1">Cool Image</div> <div class="des2">Record The Picture</div> </div> </div> </ div> <div class = "bottom"> <-! wrap layer -> <- lower part ->! <div style = "Clear: both;"> </ div> <- without this sentence, then, the following background moves up ->! <div class = "title"> FROM THE PHOTO <div class = "Content-bottom"> <! - Content Layer -> <div class="picContent"> <dl> <dt><img src="image/04-01.jpg"></dt> <dd> Life is like a book, just read more and more refined, more write more carefully. When read, mind open, all things have been indifferent to heart. Life is the precipitation. </dd> </dl> <dl> <dt><img src="image/04-02.jpg"></dt> <dd> Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more. </dd> </dl> </div> <div style="clear: both;"></div> </div> <div style="clear: both;"></div> </div> </div> </ div> <-! bottom -> <div class = "footer"> © 2016 Beijing ICP imooc.com 13,046,642 </ div> </ body> </ HTML>
The final results show the following: