Chinaunix首页 | 论坛 | 博客

离不开大数据的社会计算lk.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

五岳之巅

  • 博客访问： 4021320
  • 博文数量： 272
  • 博客积分： 7846
  • 博客等级： 少将
  • 技术积分： 6476
  • 用 户 组： 普通用户
  • 注册时间： 2009-08-25 16:27
文章分类

全部博文（272）

我的朋友
最近访客
推荐博文
相关博文
CSS做的圆角页面，和书上的不完全一致

分类： 系统运维

2011-06-20 22:11:28

    最终效果如下图：

    但是，和书上说的做法不同，我是采用固定大小，然后float一个left一个right。书上也不错，先把Container和Side用in这个DIV括起来，in先margin:0 auto进行居中，并position:relative准备里面的div以它定位;里面的Container,width:500,position:absolute,top:0,left:0;右边的Side,margin:0 0 0 500px。这种思路也很巧妙。

以下是我的代码：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <style>
  6.         body{
  7.             background:#ffff99;
  8.             font:12px/1.5 Arial;
  9.         }
  10.         
  11.         .rounded h2{
  12.             margin:0;
  13.             padding:20px 20px 10px 20px;
  14.         }
  15.         
  16.         .rounded .main{
  17.             padding:10px 20px 10px 20px;
  18.             margin:-2em 0 0 0;
  19.         }
  20.         
  21.         .rounded .footer{
  22.         }
  23.         
  24.         .rounded .footer p{
  25.             padding:10px 20px 20px 20px;
  26.             margin:-2em 0 0 0;
  27.         }
  28.         
  29.         .rounded{
  30.             background:url(images3/left-top.gif) top left no-repeat;
  31.         }
  32.         
  33.         .rounded h2{
  34.             background:url(images3/right-top.gif) top right no-repeat;
  35.         }
  36.         
  37.         .rounded .main{
  38.             background:url(images3/right.gif) top right repeat-y;
  39.         }
  40.         
  41.         .rounded .footer{
  42.             background:url(images3/left-bottom.gif) bottom left no-repeat;
  43.         }
  44.         
  45.         .rounded .footer p{
  46.             background:url(images3/right-bottom.gif) bottom right no-repeat;
  47.         }
  48.         
  49.         #header,#in,#pagefooter{
  50.             margin:0 auto;
  51.         }
  52.         
  53.         #header.rounded, #in{
  54.             width:820px;
  55.         }
  56.         
  57.         #container.rounded{
  58.             width:600px;
  59.             float:left;
  60.         }
  61.         
  62.         #side.rounded{
  63.             width:200px;
  64.             float:right;
  65.         }
  66.         
  67.         #pagefooter.rounded{
  68.             clear:both;
  69.             width:820px;
  70.         }
  71.     </style>
  72. </head>
  73. <body>
  74.     <div id="header" class="rounded">
  75.         <h2>Header</h2>
  76.         <div class="main">
  77.             <p>
  78.                 这是一行文本，这里作为样例，显示在圆角框。<br />
  79.                 这是一行文本，这里作为样例，显示在圆角框。
  80.             </p>
  81.             <p>
  82.                 这是一行文本，这里作为样例，显示在圆角框。<br />
  83.                 这是一行文本，这里作为样例，显示在圆角框。
  84.             </p>
  85.         </div>
  86.         <div class="footer">
  87.             <p>
  88.                 这是版权信息文字。
  89.             </p>
  90.         </div>
  91.     </div>
  92.     <div id="in">
  93.         <div id="container" class="rounded">
  94.             <h2>Container</h2>
  95.             <div class="main">
  96.                 <p>
  97.                     这是一行文本，这里作为样例，显示在圆角框。<br />
  98.                     这是一行文本，这里作为样例，显示在圆角框。
  99.                 </p>
  100.                 <p>
  101.                     这是一行文本，这里作为样例，显示在圆角框。<br />
  102.                     这是一行文本，这里作为样例，显示在圆角框。
  103.                 </p>
  104.                 <p>
  105.                     这是一行文本，这里作为样例，显示在圆角框。<br />
  106.                     这是一行文本，这里作为样例，显示在圆角框。
  107.                 </p>
  108.             </div>
  109.             <div class="footer">
  110.                 <p>
  111.                     这是版权信息文字。
  112.                 </p>
  113.             </div>
  114.         </div>
  115.         <div id="side" class="rounded">
  116.             <h2>Side</h2>
  117.             <div class="main">
  118.                 <p>
  119.                     这是一行文本，这里作为样例，显示在圆角框。<br />
  120.                     这是一行文本，这里作为样例，显示在圆角框。
  121.                 </p>
  122.                 <p>
  123.                     这是一行文本，这里作为样例，显示在圆角框。<br />
  124.                     这是一行文本，这里作为样例，显示在圆角框。
  125.                 </p>
  126.             </div>
  127.             <div class="footer">
  128.                 <p>
  129.                     这是版权信息文字。
  130.                 </p>
  131.             </div>
  132.         </div>
  133.     </div>
  134.     <div id="pagefooter" class="rounded">
  135.         <h2>Pagefooter</h2>
  136.         <div class="main">
  137.             <p>
  138.                 这是一行文本，这里作为样例，显示在圆角框。<br />
  139.                 这是一行文本，这里作为样例，显示在圆角框。
  140.             </p>
  141.             <p>
  142.                 这是一行文本，这里作为样例，显示在圆角框。<br />
  143.                 这是一行文本，这里作为样例，显示在圆角框。
  144.             </p>
  145.         </div>
  146.         <div class="footer">
  147.             <p>
  148.                 这是版权信息文字。
  149.             </p>
  150.         </div>
  151.     </div>
  152. </body>
  153. </html>
从中进行总结：
    CSS很灵活，实现一个想法有多种方案，在不同条件下，这些方案有优有劣。千万别学的把自己僵住：认为书上的都是绝对正确的，任何条件下都可以的。别学傻了啊你。

阅读(2859) | 评论(1) | 转发(0) |
0

上一篇：不得不转发：读博和大便的相同点

下一篇：自己写的CSS皮肤动态更换代码

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

yifangyou2011-06-21 10:17:23

不错，可以根据内容调整框的大小

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

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

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

16024965号-6