Chinaunix首页 | 论坛 | 博客

陈娇cjd.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

10502chenjiao

  • 博客访问： 178235
  • 博文数量： 21
  • 博客积分： 1444
  • 博客等级： 中士
  • 技术积分： 224
  • 用 户 组： 普通用户
  • 注册时间： 2011-06-12 14:37
文章分类

全部博文（21）

文章存档

2015年（1）

2011年（20）

我的朋友
最近访客
推荐博文
固定宽度布局剖析与制作

分类：

2011-07-25 20:54:17

主要练习的就是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>
               

        当然写的比源代码要复杂些，啰嗦些，思想也佐了些。咱也就别看疗程，看疗效吧。
阅读(1885) | 评论(4) | 转发(1) |
0

上一篇：Tab面板

下一篇：变宽度网页布局剖析与制作

给主人留下些什么吧！~~

10502chenjiao2011-07-28 08:37:50

五岳之巅: 代码弄的不错，就是图片还不够好，没显示.....
这次应该可以看见了

回复 | 举报

五岳之巅2011-07-27 22:44:36

代码弄的不错，就是图片还不够好，没显示

回复 | 举报

10502chenjiao2011-07-27 10:46:41

五岳之巅: 虽然又上了CU首页，恭喜你。但是你的文章有两处应该改正：
1、图片似乎采用附件的形式，这是不合适的，应该直接把图片插入文章中；
2、代码要使用编辑按钮中的“.....
嗯。好的

回复 | 举报

五岳之巅2011-07-27 08:32:14

虽然又上了CU首页，恭喜你。但是你的文章有两处应该改正：
1、图片似乎采用附件的形式，这是不合适的，应该直接把图片插入文章中；
2、代码要使用编辑按钮中的“代码”进行插入，CSS就直接有这个具体类型。

以后都要采用这种标准完成文章，直接对你这篇先按我说的进行修正，看看能否做到。

回复 | 举报
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6