Chinaunix首页 | 论坛 | 博客
  • 博客访问: 158781
  • 博文数量: 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>

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

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

        当然写的比源代码要复杂些,啰嗦些,思想也佐了些。咱也就别看疗程,看疗效吧。
阅读(1640) | 评论(4) | 转发(1) |
给主人留下些什么吧!~~

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就直接有这个具体类型。

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