CSS就是烦啊，要记不少的东西，当然更要灵活地应用。昨天模仿Twitter用户里面的一个界面。弄到后面越来越急，自己都要被绕进去了。终于大概的东西模拟出来了。技术含量虽然低了点，不过却是用心做了滴！如下代码：
html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>第二天任务</title>
<link rel="stylesheet" href="../frontend/css/1.css"/>
</head>
<body>
<div id="head">
<div style="width: 1000px;height:45px;margin: auto"><img class="photo" src="images/第二天任务_03.gif" alt=""/>
<div>
<ul id="header">
<li class="link"><a href="#"><img src="images/第二天任务_05.gif" alt=""/></a></li>
<li class="link"><a href="#"><img src="images/第二天任务_07.gif" alt=""/></a></li>
<li class="link"><a href="#"><img src="images/第二天任务_09.gif" alt=""/></a></li>
<li class="link"><a href="#"><img src="images/第二天任务_11.gif" alt=""/></a></li>
<li class="link"><a href="#"><img src="images/第二天任务_13.gif" alt=""/></a></li>
<li class="link"><a href="#"><img src="images/第二天任务_15.gif" alt=""/></a></li>
<li class="link"><a href="#"><img src="images/第二天任务_17.gif" alt=""/></a></li>
</ul> </div></div>
</div>
<div id="container" >
<div><img src="images/第二天任务_27.gif" alt=""/>
<ul id="end" style="position: absolute;top:45px;right:-70px;">
<li><div style="border-color:#6a7480 " class="list">Now</div></li>
<li><div class="list">2013</div></li>
<li><div class="list">2012</div></li>
<li><div class="list">2011</div></li>
<li><div class="list">2010</div></li>
<li><div class="list">2009</div></li>
<li><div class="list">2008</div></li>
<li><div class="list">2007</div></li>
<li><div class="list">2006</div></li>
<li><div class="list">2004</div></li>
<li><div class="list">2003</div></li>
<li><div class="list">1993</div></li>
<li><div class="list">Born</div></li>
</ul>
</div>
<div id="nav">
<ul id="nav-center">
<li class="nav">Time line</li>
<li class="nav"><a href="#">About</a></li>
<li class="nav"><a href="#">Photos</a></li>
<li class="nav"><a href="#">Friends</a></li>
<li class="nav"><a href="#">More</a></li>
</ul><img style="margin-top: -16px;" id="none" src="images/第二天任务_30.gif" alt=""/></div>
<div style="height: 290px" class="content-all" >
<div style="background-color: #f6f7f8; font-weight: bold" class="content-left"> About</div>
<div class="content-left"><img class="tu" src="images/第二天任务_46.gif" alt=""/>Product Designer at <a href="#">ooomf</a></div>
<div class="content-left"><img class="tu" src="images/第二天任务_49.gif" alt=""/>Studied Civil Engineering and Applied Mechanics at <a href="#">McGill University</a></div>
<div class="content-left"><img class="tu" src="images/第二天任务_68.gif" alt=""/>Lives in <a href="#">Montreal,Quebec</a></div>
<div class="content-left"><img class="tu" src="images/第二天任务_73.gif" alt=""/>From <a href="#">Glasfow,United Kingdom</a></div>
<div class="content-left"><img class="tu" src="images/第二天任务_76.gif" alt=""/>In a relationship with <a href="#">Alison Lochs</a></div>
</div>
<div class="content-all">
<p style="font-weight: bold;color: #808080"> Photos - 484</p>
<div class="tupian"><ul >
<li><img src="images/第二天任务_82.gif" alt=""/></li>
<li><img src="images/第二天任务_84.gif" alt=""/></li>
<li><img src="images/第二天任务_86.gif" alt=""/></li>
<li><img src="images/第二天任务_93.gif" alt=""/></li>
<li><img src="images/第二天任务_95.gif" alt=""/></li>
<li><img src="images/第二天任务_97.gif" alt=""/></li>
<li><img src="images/第二天任务_103.gif" alt=""/></li>
<li><img src="images/第二天任务_105.gif" alt=""/></li>
<li><img src="images/第二天任务_107.gif" alt=""/></li>
</ul></div>
</div>
<div class="content-all">
<p style="font-weight: bold;color: #808080"> Friends - 85</p>
<div class="tupian"><ul >
<li><img src="images/第二天任务_110.gif" alt=""/></li>
<li><img src="images/第二天任务_112.gif" alt=""/></li>
<li><img src="images/第二天任务_114.gif" alt=""/></li>
<li><img src="images/第二天任务_124.gif" alt=""/></li>
<li><img src="images/第二天任务_126.gif" alt=""/></li>
<li><img src="images/第二天任务_128.gif" alt=""/></li>
<li><img src="images/第二天任务_134.gif" alt=""/></li>
<li><img src="images/第二天任务_136.gif" alt=""/></li>
<li><img src="images/第二天任务_138.gif" alt=""/></li>
</ul></div>
</div>
<div style="height: 295px" class="content-all">
<p style="font-weight: bold;color: #808080"> Places</p>
<div style="margin-bottom:5px;"><a href="#"><img src="images/第二天任务_142.gif" alt=""/><p style="position: absolute;left: 80px;top:40px">Heart and Crown Irish Pub--with Matt Chesser</p></a></div>
<div style="margin-bottom:5px;"><a href="#"><img src="images/第二天任务_145.gif" alt=""/><p style="position: absolute;left: 80px;top:100px">Central Park;Avenue and 85th Street--with Alison Lochner</p></a></div>
<div style="margin-bottom:5px;"><a href="#"><img src="images/第二天任务_150.gif" alt=""/><p style="position: absolute;left: 80px;top:180px">Times Square,NY --with Alison Lochner</p></a></div>
<div style="margin-bottom:5px;"><a href="#"><img src="images/第二天任务_153.gif" alt=""/><p style="position: absolute;left: 80px;top:230px">Nassau,The Bahamas</p></a></div>
</div>
<div id="content-right1">
<ul style="margin: 10px">
<li class="tu"><a href=""><img src="images/第二天任务_34.gif" alt=""/>Status</a></li>
<li class="tu"><a href=""><img src="images/第二天任务_36.gif" alt=""/>Photo</a></li>
<li class="tu"><a href=""><img src="images/第二天任务_38.gif" alt=""/>Place</a></li>
<li class="tu"><a href=""><img src="images/第二天任务_40.gif" alt=""/>life Event</a></li>
</ul>
<textarea name="" id="" cols="70" rows="5">What's on your mind?</textarea>
<ul>
<li ><a href=""><img src="images/第二天任务_52.gif" alt=""/></a></li>
<li ><a href=""><img src="images/第二天任务_54.gif" alt=""/></a></li>
<li ><a href=""><img src="images/第二天任务_56.gif" alt=""/>Montreal</a></li>
<li ><a href=""><img src="images/第二天任务_59.gif" alt=""/></a></li>
</ul>
<div id="piao"><a href=""><img src="images/第二天任务_61.gif" alt=""/>Friends</a>
<button>Post</button></div>
</div>
<div id="content-right2">
<img style="margin-left: 10px;margin-top:10px " src="images/第二天任务_140.gif" alt=""/>
<p style="position: relative;bottom: 20px;text-align: center"><a href="">Luke Chesser</a> shared <a href="">ooomf's photo</a>
</p>
<div id="wenzi">
<h4 style="margin-bottom: 0">The best is all we have</h4>
<p style="margin-top: 0;font-size: x-small">Every single developer,designer,writer on ooomf is carefully handpicked to turn your mobile or web project into incredible</p>
</div>
<img style="margin: 4px" src="images/第二天任务_79.gif" alt=""/>
<div class="mafan">
<p><a href="#">Like</a> - <a href="#">Comment- <a href="">Share</a></a></p> <hr>
<p><a href="#">Alison Lochs</a> and <a href="">Matt Miyashita </a>like this</p> <hr>
<img src="images/第二天任务_116.gif" alt=""/> <p><a href="#">Matt Miyashita </a>oh yaaa!</p> <br>
<img src="images/第二天任务_140.gif" alt=""/> <textarea name="" id="" cols="60" rows="2">Write a comment!</textarea>
</div>
</div>
<div id="content-right3">
<div class="mafan" style="height: 105px;background-color: #ffffff;">
<img style="padding: 10px" src="images/第二天任务_70.gif" alt=""/> <p style="position: relative;bottom: 20px"><a
href="">Luke Chesser</a></p> <p> We took over Shopify's meditation room.</p>
<p><a href="#">Like</a> - <a href="#">Comment- <a href="">Share</a></a></p> <hr>
<p><a href="#">Matt Miyashita </a>oh yaaa!</p> <hr>
<img src="images/第二天任务_140.gif" alt=""/> <textarea name="" id="" cols="60" rows="2">Write a comment!</textarea>
</div>
</div>
<div id="content-right4">
<div id="zhenmafan">
<img style="margin-left: 10px;margin-top:10px " src="images/第二天任务_140.gif" alt=""/>
<p style="position: relative;bottom: 20px;text-align: center"><a href="">Luke Chesser</a> shared <a href="">a link</a>
</p>
<img src="images/第二天任务_none.gif" alt=""/>
</div>
<div class="mafan">
<p><a href="#">Like</a> - <a href="#">Comment- <a href="">Share</a></a></p> <hr>
<p><a href="#">Matt Miyashita </a>like this.</p> <hr>
<img src="images/第二天任务_140.gif" alt=""/> <textarea name="" id="" cols="60" rows="2">Write a comment!</textarea>
</div>
</div>
</div>
<ul>
<li><a href="#"> About </a></li>
<li><a href="#"> Creat Ad </a></li>
<li><a href="#"> Create Page </a></li>
<li><a href="#"> Developers </a></li>
<li><a href="#"> Careers </a></li>
<li><a href="#"> Privacy </a></li>
<li><a href="#"> Cookies </a></li>
<li><a href="#"> Terms </a></li>
<li><a href="#"> Help </a></li>
</ul>
</body>
</html>
现在我写的就是垃圾代码啊，太冗余，太无章法了。我认为应该养成一个良好的编码习惯：首先就是要常用注释，我的代码我写完了回去改都要找一阵子，失败。然后就是要有系统的思维，先整体后局部，最后才深入细节，层次分明是必须的哟！