一周学习总结

    从学习html到css,不知不觉已经2周了，从刚开始学习html时，用表格布局的惨淡回忆，到div模块使用小有所成，都充分说明了，学习的知识还是要在实战中才能得到充分的消化和吸收。

    写网页除了丰富的经验和扎实的基本功外，对于新手来说，我认为最重要的就是要学会分析网页的布局，并在开始做之前，就要把整个页面分割成细化成各个小块，然后一步步的完成这些小块，最后尽量完善每一个能在页面上想到的细节，才能在最后写成一篇好的网页。

    话说起来虽然简单，好像只要自己小心翼翼，就能写出不错的网页，但其实新手的苦恼，可能还是只有新手自个知道，现在就来说说我的第一个算是完整的网页吧。

    <table width="70%" cellpadding="20"  cellspacing="0"  border="1" >
    <tr >
        <th style="border-top:1px;border-left:1px;border-right:0px" width="20"><img src="imags/logo.png"></th>
        <th style="border-top:1px;border-bottom:1px;border-left:0px;border-right:0px"width="10%"><a href="#">首页</th>
        <th style="border-top:1px;border-bottom:1px;border-left:0px;border-right:0px" width="10%"><a href="#">关于</th>
        <th style="border-top:1px;border-bottom:1px;border-left:0px;border-right:0px" width="10%"><a href="#">演示</th>
        <th style="border-top:1px;border-bottom:1px;border-left:0px;border-right:0px" width="10%"><a href="#">功能</th>
        <th style="border-top:1px;border-bottom:1px;border-left:0px;border-right:0px"  width="10%"><a href="#">相册 </th>
        <th style="border-top:1px;border-bottom:1px;border-left:0px;border-right:0px"width="10%"><a href="#">帮助 </th>
        <th style="border-top:1px;border-bottom:1px;border-left:0px;border-right:0px"width="10%">&nbsp;</th>
 </tr>

    <tr>
        <td style="border-bottom:1px;border-right:0px"  colspan="7"> <h1>不仅仅是一个做笔记的应用，</h1>
                                                                            <h1>还是一个强大的组织工具</h1>
                                                                            <p>noteseven是一个创新的笔记应用程序与任务管理</p>
                                                                            <p>工具，你可以灵活地组织笔记与任务</p>
                                                                             <img src="imags/app-store.png"></td>
        <td style="border-bottom:1px;border-left:0px;border-right:0px"  ><img src="imags/showcase-iphone.png"></td>
    </tr>

     <tr>
         <td style="border-bottom:1px;border-right:0px"colspan="7"> <h1>同步</h1>
                                                                            <p>使用Google Docs与Evernote!</p>
                                                                            <p>使用Google Docs And Evernote同步，你可以同时管理你的笔记在noteseven与你的电脑上</p>
                                                                             <h1>备份与恢复</h1>
                                                                             <p>使用iTunes文件分享与Web分享</p>
                                                                             <p>你可以备份所有数据到你的电脑上通过Web浏览器或iTunes文件分享，你还可以在任何时间恢复他们</p>
                                                                             <h1>蓝牙</h1>
                                                                             <p>noteseven的用户之间可以通过蓝牙互相传输笔记</p></td>
         <td style="border-bottom:1px;border-left:0px;border-right:0px"><h1>主要功能</h1>
             <ul>
                 <li>概览</li>
                 <li>共享与打印</li>
                 <li>主屏幕</li>
                 <li>文件夹</li>
                 <li>备份与恢复</li>
                 </ul>
     </tr>

     <tr>
         <td style="border-bottom:1px;border-right:0px"colspan="2"></td>
         <td  style="border-bottom:1px;border-left:0px;border-right:0px">&nbsp;</td>
         <td  style="border-bottom:1px;border-left:0px;border-right:0px"colspan="3"><img src="imags/feature-calendar.png">
             <h3>日历</h3>
             <h6>用日历视图查看任务列表</h6> </td>

         <td   style="border-bottom:1px;border-left:0px;border-right:0px"><img src="imags/feature-display.png">
             <h3>任务</h3>
             <h6>轻松方便的管理自己的任务列表</h6> </td>

        <td  style="border-bottom:1px;border-left:0px;border-right:0px"><img src="imags/feature-task.png">
             <h3>显示</h3>
             <h6>在不同的视图中，你可以自由的切换</h6> </td>
         <td  style="border-bottom:1px;border-left:0px;border-right:0px"colspan="3"></td>
         <td  style="border-bottom:1px;border-left:0px;border-right:0px"></td>
         <td  style="border-bottom:1px;border-left:0px"></td>
     </tr>

    <tr>
        <td  style="border-bottom:1px;border-right:0px"colspan="2" ><h1>社会化网络</h1></td>
        <td style="border-bottom:1px;border-left:0px;border-right:0px" ></td>
        <td style="border-bottom:1px;border-left:0px;border-right:0px"colspan="2"><p>&copy;copyright 2010--2014 lovoinfo</p>
             <p>&reg;www.lovoinfo.com</p>
             <p>Tel:123456789</p></td>
        <td style="border-bottom:1px;border-left:0px;border-right:0px" ></td>

        <td style="border-bottom:1px;border-left:0px;border-right:0px"colspan="4" ><h1>常见问题解答</h1>
             <ol>
                 <li>我能创建多少个笔记？</li>
                 <li>它支持什么样的文件格式？</li>
                 <li>我可以与我的电脑同步吗？</li>
                 <li>我怎么做才能保持我笔记的安全？</li>
                 <li>noteseven支持多语言环境吗？</li>
                 <li>同步的时候是否有容量的限制？</li>

             </ol></td>
        <td style="border-bottom:1px;border-left:0px;border-right:0px"></td>
        <td style="border-bottom:1px;border-left:0px;border-right:0px"></td>
        <td style="border-bottom:1px;border-left:0px"></td>

    </tr>


</table>

当然，这个时候还没有学习什么CSS，知识点的累计只有table而已，也是一个完全用table布局来写的，但问题还是很明显的，那就是，整个页面，只有一个table，这对新手来说，就是花样作死，当然对于当时的我来说，这个布局好像是理所当然的，不就是一个表格，然后用colspan来做合并，这个网页应该是水到渠成，结局自然是喜闻乐见，做到第二列时，colspan的合并，就搞到我焦头烂额，各种对不齐，对齐了上面，顾不到下面，而且没有做注释的习惯，改到后来，自己都不知道哪块是哪块了。现在，来看看老鸟是怎么做的吧。

<body>
      <table border="1" width="80%" align="center">
          <!-- header开始-->
          <tr>
              <td>
                  <table width="100%">
                      <tr>
                          <td width="10%"><img src="images/logo.png" alt="noteseven"></td>
                          <td width="5%"><a href="#"><strong>首页</strong></a></td>
                          <td width="5%"><a href="#"><strong>关于</strong></a></td>
                          <td width="5%"><a href="#"><strong>演示</strong></a></td>
                          <td width="5%"><a href="#"><strong>功能</strong></a></td>
                          <td width="5%"><a href="#"><strong>相册</strong></a></td>
                          <td width="5%"><a href="#"><strong>帮助</strong></a></td>
                          <td width="15%">&nbsp;</td>
                      </tr>
                  </table>
              </td>
          </tr>
          <!-- header结束-->
          <!-- show开始-->
          <tr>
              <td>
                  <table width="100%">
                      <tr>
                          <td width="33%">
                              <h2>不仅仅是一个做笔记的应用,<br>还是一个强大的组织工具</h2>
                              <p>noteseven是一个创新的笔记应用程序与任务管理工具，你可以灵活的组织笔记与任务</p>
                              <a href="#"><img src="images/app-store.png" alt="appstore"></a>
                          </td>
                          <td width="33%">&nbsp;</td>
                          <td width="33%"><img src="images/showcase-iphone.png" alt="iphone20"></td>
                      </tr>
                  </table>
              </td>
          </tr>
          <!-- show结束-->
          <!-- mainbody开始-->
          <tr>
              <td>
                  <table width="100%">
                      <tr>
                          <td width="70%">
                              <h3>同步</h3>
                              <p>使用Google Docs与evernote!<br>
                              使用Google Docs与Evernote同步，你可以同时管理你的笔记本在noteseven与你的电脑上</p>
                              <h3>备份与恢复</h3>
                              <p>使用iTunes文件分享与web分享<br>
                              你可以备份所有数据到你的电脑上通过web浏览器和iTunes文件分享，你还可以在任何时间回复他们</p>
                              <h3>蓝牙</h3>
                              <p>noteseven的用户之间可以通过蓝牙相互传输笔记</p>
                          </td>
                          <td width="30%">
                              <h2>主要功能</h2>
                              <ul>
                                  <li>概览</li>
                                  <li>共享与打印</li>
                                  <li>主屏幕</li>
                                  <li>文件夹</li>
                                  <li>备份与恢复</li>
                              </ul>
                          </td>
                      </tr>
                  </table>
              </td>
          </tr>
          <!-- mainbody结束-->
          <!-- asidebody开始-->
          <tr>
              <td>
                  <table width="100%">
                      <tr>
                          <td width="13%">&nbsp;</td>
                          <td width="24%" align="center">
                              <img src="images/feature-calendar.png" >
                              <h4>日历</h4>
                              <p>用日历视图查看任务列表</p>
                          </td>
                          <td width="24%" align="center">
                              <img src="images/feature-task.png" >
                              <h4>任务</h4>
                              <p>轻松方便的管理自己的任务列表</p>
                          </td>
                          <td width="24%" align="center">
                              <img src="images/feature-display.png" >
                              <h4>显示</h4>
                              <p>在不同的视图中你可以自由的切换</p>
                          </td>
                          <td width="14%">&nbsp;</td>
                      </tr>
                  </table>
              </td>
          </tr>
          <!-- asidebody结束-->
          <!-- footer开始-->
          <tr>
              <td>
                  <table width="100%">
                       <tr>
                           <td width="20%" align="center">
                               <h2>社会化网络</h2>
                           </td>
                           <td width="40%" align="center">
                               <p>&copy;2010-1014   lovoinfo<br>
                                   &reg;www.lovoinfo.com<br>
                                   Tel:1232423432</p>
                           </td>
                           <td width="40%">
                               <h3>常见问题解答</h3>
                               <ol>
                                   <li>我能创建多少个笔记?</li>
                                   <li>它支持什么样的文件格式?</li>
                                   <li>我可以与我的电脑同步吗?</li>
                                   <li>我怎么做才能保持我的笔记安全?</li>
                                   <li>noteseven支持多语言环境吗?</li>
                                   <li>同步的时候是否有容量的限制?</li>
                               </ol>
                           </td>
                       </tr>
                  </table>
              </td>
          </tr>
          <!-- footer结束-->
      </table>
</body>

同样是用table来做，却整齐划一，由于，在一个大表格的各个列里面添加了小的表格的原因，也完全不用什么colspan来做调整，再加上每个段落的注释，在最后的调整上面，也是得心应手。其实大家也该看出来了，对于新手来说，最苦恼的就是惯性思维，对于当时的我来说，完全没想到在table里面套table,只是惯性的想用一个表格和合并列表来完成，结果走入死胡同，并且在写的过程中，偷懒没有写注释，在后来的修改的时候，反而还出现了改错地方的情况。

在学习css后，写网页虽然有了加注释的习惯，方便了自己调整和修改，但惯性思维这个问题却一直困扰着我，这是一个学了css，float，选择器之后，写的一个相册网页，在这个页面使用了FLOAT的浮云来达到3行4列的照片排序。

<body>
     <div id="constioner">
         <div id="title"></div>
         <div id="photoleft"></div>
             <div id="photo01">
                 <img src="images/3.jpg"width="96%"/>
              <p><strong>cobweb</strong></p>
              <p><small><font color="797777" size="2px">Joni Niemela</font> </small></p>
             </div>
             <div id="photo02">
                 <img src="images/5.jpg" width="96%"/>
                 <p><strong>Gold Lion</strong></p>
                 <p><small><font color="797777" size="2px">peter delaney</font> </small></p>
             </div>
             <div id="photo03">
                 <img src="images/6.jpg" width="96%"/>
                 <p><strong>*</strong></p>
                 <p><small><font color="797777" size="2px">Claudia Wycisk</font> </small></p>
             </div>
             <div id="photo04">
                 <img src="images/7.jpg" width="96%"/>
                 <p><strong>A Bright Idea</strong></p>
                 <p><small><font color="797777" size="2px">Danielle Hughson</font> </small></p>
             </div>
             <div id="photo05">
                 <img src="images/8.jpg" width="96%"/>
                 <p><strong>Untitled</strong></p>
                 <p><small><font color="797777" size="2px">Kamal Iklil</font> </small></p>
             </div>
             <div id="photo06">
                 <img src="images/9.jpg" width="96%"/>
                 <p><strong>Untitled</strong></p>
                 <p><small><font color="797777" size="2px">Boris Bushmin</font> </small></p>
             </div>
             <div id="photo07">
                 <img src="images/10.jpg" width="96%"/>
                 <p><strong>Untitled</strong></p>
                 <p><small><font color="797777" size="2px">Magdalena Berny</font> </small></p>
             </div>
             <div id="photo08">
                 <img src="images/11.jpg" width="96%"/>
                 <p><strong>tea farmer</strong></p>
                 <p><small><font color="797777" size="2px">Teuku Jody Zulkarnaen</font> </small></p>
             </div>
             <div id="photo09">
                 <img src="images/12.jpg" width="96%"/>
                 <p><strong>***</strong></p>
                 <p><small><font color="797777" size="2px">Tanya Tess</font> </small></p>
             </div>
             <div id="photo10">
                 <img src="images/13.jpg" width="96%"/>
                 <p><strong>Sun Flower</strong></p>
                 <p><small><font color="797777" size="2px">Michael Murphy</font> </small></p>
             </div>
             <div id="photo11">
                 <img src="images/14.jpg" width="96%"/>
                 <p><strong>I‘Atlandide</strong></p>
                 <p><small><font color="797777" size="2px">Fabien BRAVIN</font> </small></p>
             </div>
             <div id="photo12">
                 <img src="images/15.jpg" width="96%"/>
                 <p><strong>CUTE KITTEN</strong></p>
                 <p><small><font color="797777" size="2px">Wolf Ademeit</font> </small></p>
             </div>

     </div>
</body>

我依然是惯性思维，老老实实写了12个盒子，依次FLOAT排序完成了这个网页，当然，老师第二天的讲解又我知道了，自己还是绕了远路，其实是可以用更简单的办法来完成的。

其实我想，作为新手，这些问题其实是无可厚非的，我认为最重要的就是要敢写，至于写成什么样，绕路没绕路，这些都是一个代码量的累计，当我们写的多了，自然就知道了，其实在哪些步骤，我们是可以省略的，哪些是可以改进的，哪些是有隐患的，作为新手，就要有新手的觉悟，那就是做一个“莽夫”，不停的写，写的复杂不要紧，写的不规范也不要紧，最重要的是要不停的写，只有在写的过程中，才能发现问题，什么，你是天才？你是天才还来什么博客园？

一周学习总结,布布扣,bubuko.com

一周学习总结

原文：http://www.cnblogs.com/Zhongjunchao/p/3655465.html