最终成果
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></li> <li></li> <li></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; }
总结
- 再次捡起来HTML和CSS
- 习得S�ASS的安装和使用
- 重温了清除浮动
