03-动手做自己的网页

最终成果

Paste_Image.png

HTML代码

                
        Play Python        
            
首页
            
网站
            
其他
            
        
    
    
        
Article
        
            
![](https://d13yacurqjgara.cloudfront.net/users/497438/screenshots/2783864/live.me-endlogo-800x600_new.gif)
            
![](https://d13yacurqjgara.cloudfront.net/users/41071/screenshots/2783535/slide_107.png)
            
![](https://d13yacurqjgara.cloudfront.net/users/41071/screenshots/2778526/tmpl_mirror_case_study_dribbble.png)
            
        
        
These are awesome works. Welcome aboard!
    
    
        
© 2016 All Rights Reserved Play Python 
    

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; }

总结

• 再次捡起来HTML和CSS
• 习得S�ASS的安装和使用
• 重温了清除浮动