固定宽度布局剖析与制作

1875阅读　4评论2011-07-25　10502chenjiao
分类：

主要练习的就是css排版观念，它与逻辑关系有着紧密的必然联系，根据逻
辑关系，把网页的内容使用div或其他适当的html标记组织好，在考虑网页的形式如
何与内容相适应就OK了。
如图：

            得到此页面的布局，分为四步走，分别为：单列排版，“1-2-1”固定宽度布局，“1-3-1”固定宽度布局，最后到魔术布局，即如图所示。
之所以放弃了Tab面板的一系列练习，是因为它涉及到javascript以及css的
配合，才能做出来的。所以还不如直接跳过去，来“固定宽度布局剖析与制作”进行
练习，即使这节练习的特痛苦，虽然拿出来的时间要比前几节多，思考的
要比以往的多，也值得了，因为最后终于做出来一个成品了。
通过此章节，更进一步的掌握了三大方面：
（1）页面结构的分析方法。
（2）对横向并列的div使用“绝对定位法”进行布局，并了解它的缺陷及其产生原
因。
（3）对横向并列的div使用“浮动法”进行布局。

在进行过程中，简直是有太多的麻烦需要你一个一个的解决掉，在没找到
你所出现的错误的时候，那种心情，超级暴躁。但是呢，经过精心的查找并加以修改
之后的心情就不同之前了，嘿嘿。虽然大部分的代码还是依靠着源代码写的，就比如
说现在还没弄明白的一个地方：那个文字的背景图片的组合需要顺序的排版？就下面
带下划线的background，几个东西一边换位置就不行了，刷新的时候背景图就变形了。
哎，没弄懂。但是，我感觉就对这章的练习还是小有成就吧，因为，看着它的布局的
某些地方，我也是思考着自己写的代码：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
  2. <html xmlns="" xml:lang="en" >
  3. <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5.     <link type="text/css" href="test.css" rel="stylesheet" />
  6.     <style>
  7.         body{
  8.             background:#534;
  9.             padding:0;
  10.             margin:0;
  11.         }
  12.         
  13.         .rounded{
  14.             
  15.             margin:0 auto 0 auto;
  16.             background:url('images/left-top.gif') no-repeat top left;
  17.         }
  18.         .rounded h2{
  19.             background:url('images/right-top.gif') right top no-repeat;
  20.             margin:0;
  21.             padding:20px 20px 10px;
  22.             
  23.             
  24.         }
  25.         .rounded .main{
  26.             font:14px arial;
  27.             margin:-2em 0 0 0;
  28.             padding:10px 20px;
  29.             
  30.             background:url('images/right.gif') right repeat-y;
  31.         }
  32.         .footer p{
  33.             text-align:right;
  34.             color:#888;
  35.             margin:-2em 0 0 0;
  36.             padding:10px 20px 20px;
  37.             background:url('images/right-bottom.gif') right bottom no-repeat;
  38.         }
  39.         .footer{
  40.             background:url('images/left-bottom.gif') left bottom no-repeat;
  41.         }
  42.         #header,#middle,#footer{
  43.             margin:0 auto 0 auto;
  44.             width:760px;
  45.         }
  46.         #zuo{
  47.             width:560px;
  48.             float:left;
  49.         }
  50.         
  51.         #m3 img{
  52.             float:right;
  53.         }
  54.         
  55.         
  56.         #m2 img{
  57.             float:left;
  58.         }
  59.         #m2,#m3{
  60.             width:280px;
  61.             float:left;
  62.         }
  63.         #you{
  64.             width:200px;
  65.             float:left;
  66.         }
  67.         #footer{
  68.             clear:both;
  69.         }
  70.         .footer p{
  71.             font:13px arial;
  72.         }
  73.     </style>
  74. </head>
  75. <body>
  76. <div id="header">
  77.     <div class="rounded">
  78.         <h2>Page Header</h2>
  79.         <div class="main">
  80.             <p>
  81.             这是一行文本，这里作为样例，显示在布局框中。
  82.             </p>
  83.         </div>
  84.         <div class="footer">
  85.             <p>
  86.             查看详细信息>>
  87.             </p>
  88.         </div>
  89.     </div>
  90. </div>

  92. <div id="middle">
  93.     <div id="zuo">
  94.         <div id="m1">
  95.             <div class="rounded">
  96.                 <h2>Banner</h2>
  97.                 <div class="main">
  98.                     <p>
  99.                     对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。
  100.                     </p>
  101.                 </div>
  102.                 <div class="footer">
  103.                     <p>
  104.                     查看详细信息>>
  105.                     </p>
  106.                 </div>
  107.             </div>
  108.         </div>
  109.         <div id="m2">
  110.             <div class="rounded">
  111.                 <h2>Colum A</h2>
  112.                 
  113.                 <div class="main">
  114.                 <img src="images/cup.gif" width="128" height="128" />
  115.                     <p>
  116.                     对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发，介绍CSS语言的特点。
  117.                     </p>
  118.                 </div>
  119.                 <div class="footer">
  120.                     <p>
  121.                     查看详细信息>>
  122.                     </p>
  123.                 </div>
  124.             </div>
  125.         </div>
  126.         <div id="m3">
  127.             <div class="rounded">
  128.                 <h2>Colum B</h2>
  129.                 <div class="main">
  130.                 <img src="images/cup.gif" width="128" height="128" />
  131.                     <p>
  132.                     对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发，介绍CSS语言的特点。
  133.                     </p>
  134.                 </div>
  135.                 <div class="footer">
  136.                     <p>
  137.                     查看详细信息>>
  138.                     </p>
  139.                 </div>
  140.             </div>
  141.         </div>    
  142.         
  143.         
  144.     </div>    
  145.     <div id="you">
  146.         <div id="m4">
  147.             <div class="rounded">
  148.                 <h2>Side Bar 1</h2>
  149.                 <div class="main">
  150.                     <p>
  151.                     对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。
  152.                     </p>
  153.                 </div>
  154.                 <div class="footer">
  155.                     <p>
  156.                     查看详细信息>>
  157.                     </p>
  158.                 </div>
  159.             </div>
  160.         </div>
  161.         
  162.         <div id="m5">
  163.             <div class="rounded">
  164.             <h2>Side Bar 2</h2>
  165.             <div class="main">
  166.                 <p>
  167.                 但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。
  168.                 </p>
  169.             </div>
  170.             <div class="footer">
  171.                 <p>
  172.                 查看详细信息>>
  173.                 </p>
  174.             </div>
  175.             </div>
  176.         </div>
  177.     </div>
  178. </div>

  180. <div id="footer">
  181.     <div class="rounded">
  182.         <h2>Page Header</h2>
  183.         <div class="main">
  184.             <p>
  185.             这是一行文本，这里作为样例，显示在布局框中。
  186.             </p>
  187.         </div>
  188.         <div class="footer">
  189.             <p>
  190.             查看详细信息>>
  191.             </p>
  192.         </div>
  193.     </div>
  194. </div>
  195. </body>
  196. </html>
               

        当然写的比源代码要复杂些，啰嗦些，思想也佐了些。咱也就别看疗程，看疗效吧。
上一篇：Tab面板
下一篇：变宽度网页布局剖析与制作

文章评论