最终成果

Paste_Image.png

HTML代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Play Python</title>    <link rel="stylesheet" type="text/css" href="main.css"></head><body>    <div class="header section">        <a class="logo" href="#">Play Python</a>        <ul class="nav">            <li><a href="#">首页</a></li>            <li><a href="#">网站</a></li>            <li><a href="#">其他</a></li>            <li class="clr"></li>        </ul>    </div>    <div class="content section">        <h2>Article</h2>        <ul>            <li>![](https://d13yacurqjgara.cloudfront.net/users/497438/screenshots/2783864/live.me-endlogo-800x600_new.gif)</li>            <li>![](https://d13yacurqjgara.cloudfront.net/users/41071/screenshots/2783535/slide_107.png)</li>            <li>![](https://d13yacurqjgara.cloudfront.net/users/41071/screenshots/2778526/tmpl_mirror_case_study_dribbble.png)</li>            <li class="clr"></li>        </ul>        <p>These are awesome works. Welcome aboard!</p>    </div>    <div class="footer section">        <p>© 2016 All Rights Reserved Play Python </p>    </div></body></html>

CSS代码

@import url(reset.css);@import "https://fonts.googleapis.com/css?family=Abel";body {  background: url("http://img.zcool.cn/idea/69485657cb1332f8752537a61039.jpg") center;  background-size: cover; }.clr {  clear: both;  height: 0;  visibility: hidden; }.section {  width: 720px;  margin: 0 auto; }.header {  height: 200px; }  .header .logo {    display: block;    color: #FFFFFF;    font-size: 64px;    font-family: 'Abel', sans-serif;    text-align: center;    padding: 30px; }.nav {  text-align: center;  width: 240px;  height: 30px;  margin: 0 auto;  background: rgba(0, 0, 0, 0.2); }  .nav li a {    width: 33%;    display: block;    float: left;    color: #ffffff;    line-height: 30px; }  .nav li a:hover {    color: #272279; }.content {  background: rgba(255, 255, 255, 0.7);  border-radius: 6px; }  .content h2 {    text-align: center;    padding: 20px 20px 0px 20px; }  .content ul {    padding: 20px; }    .content ul li {      width: 33%;      float: left; }      .content ul li img {        width: 98%;        border-radius: 4px; }  .content p {    padding: 20px; }.footer {  text-align: center;  position: absolute;  bottom: 0;  height: 40px;  width: 100%; }  .footer p {    font-size: 12px;    color: rgba(255, 255, 255, 0.2);    line-height: 40px; }