《日记》布局方法剖析

1428阅读　0评论2011-08-19　10502chenjiao
分类：

《日记》页面内容的顺序，是从上到下，一个部分一个部分地依次设置。
页面非常清晰的，分为十一部分。整体分为那么三四个div“大”块，然后，在细分为几个div“中”块，在中块下，再进行分为N多个div“小”块。这样，一个日记基本页面就OK了。
  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:#00496C;
  9.         
  10.             color:#666;
  11.             margin:0 auto;
  12.             padding:0;
  13.         }
  14.         
  15.         
  16.         a{
  17.         color:#191970;
  18.         }
  19.         a:hover{
  20.             color:#b22222;
  21.             text-decoration:none;
  22.         }
  23.         a:visited{
  24.             color:#696969;
  25.         }
  26.         a acronym{
  27.             border:none;
  28.         }
  29.         acronym{
  30.             cursor:help;
  31.         }
  32.         #container{
  33.             background:url(images/cover_bot.png) no-repeat left bottom;
  34.             left:50%;
  35.             position:absolute;
  36.             width:770px;
  37.             margin:10px 0 20px -385px;
  38.             padding-bottom:120px;
  39.         }
  40.         #cent{
  41.             padding:0 30px;
  42.             background:url(images/cover.png) repeat-y;
  43.             padding-bottom:1px;
  44.         }
  45.         #page{
  46.             background:url(images/cover_top.png)no-repeat;
  47.             margin:0 -30px;
  48.         }
  49.         #page h1{
  50.             background:url(images/csszengarden.jpg) no-repeat;
  51.             height:71px;
  52.             width:268px;
  53.             top:50px;
  54.             left:71px;
  55.             position:relative;
  56.         }
  57.         #page h1 span{
  58.             display:none;
  59.         }
  60.         #page h2{
  61.             background:url(images/thebeauty.jpg) no-repeat;
  62.             position:relative;
  63.             left:57px;
  64.             top:55px;
  65.             height:20px;
  66.             width:299px;
  67.             
  68.         }
  69.         #page h2 span{
  70.             display:none;
  71.         }
  72.         #page p{
  73.             position:absolute;
  74.             top:41px;
  75.             padding:0 0 0 380px;
  76.         }
  77.         #page .p1{
  78.             margin:10px 81px 0 0;
  79.             font-size:120%;
  80.         }
  81.         #page .p2{
  82.             background:url(images/bookmark.jpg) no-repeat;
  83.             position:absolute;
  84.             top:0px;
  85.             left:620px;
  86.             width:81px;
  87.             height:131px;
  88.         }
  89.         #page .p2 span{
  90.             display:block;
  91.             color:#fff;
  92.             font:11px/18px"Trebuchet MS",arial,helvetica,sans-serif;
  93.             padding:20px 10px;
  94.             
  95.         }
  96.         #page .p2 a{
  97.             color:#fff;
  98.         }
  99.         #page .p2 a:hover{
  100.             text-decoration:none;
  101.             color:#ccc;
  102.         }
  103.         ...
  104.         ...
  105.     </style>
  106. </head>
  107. <body>
  108. <div id="container">
  109.     <div id="cent">
  110.         <div id="page">
  111.             <h1><span>。。。</span></h1>
  112.             <h2><span>。。。。</span></h2>

  114.             <p class="。。。">。。。。</p>
  115.             <p class="。。"><span>。。。 <a href="。。。" title="......">....</a> ...<a href="..." title="...">.....</a></span></p>

  117.         </div>
  118.         <div id="...">
  119.             <h3><span>......</span></h3>
  120.             <p class="....">.......</p>
  121.         </div>
  122.         ...
  123.         ...               /n多个div块，内有标签。/
  124.     <div id="....">
  125.         ...
  126.         ...               /内有n多个div块，内有标签。/
  127.     </div>
  128.     ....
  129.     ....                  /内有n多个div块，内有标签。/
  130. </div>
基本上就差不多了。css样式概括：
  1. #div大块{
  2.     background:。。。;
  3.     padding:。。。；
  4. }
  5. #div中块{
  6.     height:。。。;
  7.     background:。。。；
  8.     }
  9. #div中块 h3{
  10.     background:。。。;
  11.     position:。。。;
  12.     left:。。;
  13.     height:4。。。;
  14.     width:。。。；
  15.     }
  16. #div中块 h3 span{
  17.     display:。。。；
  18.     }
  19. #div中块 p{
  20.     text-align:。。。;
  21.     margin-top:。。。;
  22.     font-style:italic;
  23.     padding:。。。；
  24.     }
设置background背景，高度，宽度，定位，字体，字号，padding，margin。  还有新学到的一个是acronym标签是成对出现的,以开始,以结束。取首字母的缩写标签。即：.....css样式：cursor：help；鼠标样式。
无论采取哪种思路，都需要设计师思路清楚、条理明晰。
上一篇：“CSS禅意花园”作品研究
下一篇：CSS960框架