Chinaunix首页 | 论坛 | 博客

天空从何开始hzm.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

tkchks

  • 博客访问： 2536725
  • 博文数量： 245
  • 博客积分： 4125
  • 博客等级： 上校
  • 技术积分： 3113
  • 用 户 组： 普通用户
  • 注册时间： 2009-03-25 23:56
文章分类

全部博文（245）

文章存档

2015年（2）

2014年（26）

2013年（41）

2012年（40）

2011年（134）

2010年（2）

我的朋友
最近访客
推荐博文
相关博文
HTML CSS Template

分类： 系统运维

2011-09-22 16:54:55


From:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "">

  4. <html xmlns="" xml:lang="en">
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.     <title>CSS Layout - 100% height</title>
  8.     <link rel="stylesheet" type="text/css" href="css/layout1.css" />
  9. </head>
  10. <body>

  12.     <div id="container">

  14.         <div id="header">
  15.             <h1>CSS layout: 100% height with header and footer</h1>
  16.             <p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p>
  17.         </div>

  19.         <div id="content">
  20.             <h2>Min-height</h2>
  21.             <p>
  22.                 The #container element of this page has a min-height of 100%. That way, if the content requires more height than the viewport provides, the height of #content forces #container to become longer as well. Possible columns in #content can then be visualised with a background image on #container; divs are not table cells, and you don't need (or want) the fysical elements to create such a visual effect. If you're not yet convinced; think wobbly lines and gradients instead of straight lines and simple color schemes.
  23.             </p>
  24.             <h2>Relative positioning</h2>
  25.             <p>
  26.                 Because #container has a relative position, #footer will always remain at its bottom; since the min-height mentioned above does not prevent #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.
  27.             </p>
  28.             <h2>Padding-bottom</h2>
  29.             <p>
  30.                 Since it is no longer in the normal flow, padding-bottom of #content now provides the space for the absolute #footer. This padding is included in the scrolled height by default, so that the footer will never overlap the above content.
  31.             </p>
  32.             <p>
  33.                 Scale the text size a bit or resize your browser window to test this layout. The <a href="css/layout1.css">CSS file is over here</a>.
  34.             </p>
  35.             <p>
  36.                 <a href="../css.html">Back to CSS Examples</a>
  37.             </p>
  38.         </div>

  40.         <div id="footer">
  41.             <p>
  42.                 This footer is absolutely positioned to bottom:0; of #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
  43.             </p>
  44.         </div>
  45.     </div>


  48.     <script src="" type="text/javascript"></script>
  49.     <script type="text/javascript">
  50.         _uacct = "UA-472607-1"; urchinTracker();
  51.     </script>

  53. </body>

  1. /**
  2.  * 100% height layout with header and footer
  3.  * ----------------------------------------------
  4.  * Feel free to copy/use/change/improve
  5.  */

  7. html,body {
  8.     margin:0;
  9.     padding:0;
  10.     height:100%; /* needed for container min-height */
  11.     background:gray;
  12.     
  13.     font-family:arial,sans-serif;
  14.     font-size:small;
  15.     color:#666;
  16. }

  18. h1 {
  19.     font:1.5em georgia,serif;
  20.     margin:0.5em 0;
  21. }

  23. h2 {
  24.     font:1.25em georgia,serif;
  25.     margin:0 0 0.5em;
  26. }
  27.     h1, h2, a {
  28.         color:orange;
  29.     }

  31. p {
  32.     line-height:1.5;
  33.     margin:0 0 1em;
  34. }

  36. div#container {
  37.     position:relative; /* needed for footer positioning*/
  38.     margin:0 auto; /* center, not in IE5 */
  39.     width:750px;
  40.     background:#f0f0f0;
  41.     
  42.     height:auto !important; /* real browsers */
  43.     height:100%; /* IE6: treaded as min-height*/

  45.     min-height:100%; /* real browsers */
  46. }

  48. div#header {
  49.     padding:1em;
  50.     background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
  51.     border-bottom:6px double gray;
  52. }
  53.     div#header p {
  54.         font-style:italic;
  55.         font-size:1.1em;
  56.         margin:0;
  57.     }

  59. div#content {
  60.     padding:1em 1em 5em; /* bottom padding for footer */
  61. }
  62.     div#content p {
  63.         text-align:justify;
  64.         padding:0 1em;
  65.     }

  67. div#footer {
  68.     position:absolute;
  69.     width:100%;
  70.     bottom:0; /* stick to bottom */
  71.     background:#ddd;
  72.     border-top:6px double gray;
  73. }
  74.     div#footer p {
  75.         padding:1em;
  76.         margin:0;
  77.     }

再一个表单模板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "">

  4. <html xmlns="" xml:lang="en">
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.     <title>CSS and tables for forms</title>
  8.     <link rel="stylesheet" type="text/css" href="css/sample1.css" />
  9. </head>
  10. <body>

  12.     <div id="container">
  13.         <div id="header">
  14.             <h1>CSS and tables for forms</h1>
  15.             <p>We don't always get to design our own form layouts. The form below, for instance, looks more suited for print than for the web, but that's just the way things sometimes go.</p>
  16.         </div>

  18.         <div id="content">
  19.             <h2>Widht:100%</h2>
  20.             <p>
  21.                 Instead of setting the width for each individual form element, why not simply let them scale to a grid automatically? The form below does exactly that. A fixed table layout creates a solid grid to work with. This grid is then used with varying colspan values, and the 100% width for input fields does the rest.
  22.             </p>

  24.             <table>
  25.                 <tr>
  26.                     <th>First name:</th>
  27.                     <td colspan="3"><input type="text" /></td>
  28.                 </tr>
  29.                 <tr class="required">
  30.                     <th>Last name:</th>
  31.                     <td colspan="3"><input type="text" /></td>
  32.                 </tr>
  33.                 <tr>
  34.                     <th>Gender:</th>
  35.                     <td colspan="3" class="input-group required">
  36.                         <input type="radio"> Male
  37.                         <input type="radio"> Female
  38.                     </td>
  39.                 </tr>
  40.                 <tr class="required">
  41.                     <th>Address:</th>
  42.                     <td colspan="3"><input type="text" /></td>
  43.                 </tr>
  44.                 <tr class="required">
  45.                     <th>House number:</th>
  46.                     <td><input type="text" /></td>
  47.                     <th>Postal code:</th>
  48.                     <td><input type="text" /></td>
  49.                 </tr>
  50.                 <tr>
  51.                     <th>E-mail address:</th>
  52.                     <td colspan="2" class="required"><input type="text" /></td>
  53.                     <td class="input-group">
  54.                         <input type="checkbox"/> Newsletter?
  55.                     </td>
  56.                 </tr>
  57.                 <tr>
  58.                     <th>Phone number:</th>
  59.                     <td colspan="2" class="required"><input type="text" /></td>
  60.                     <td class="input-group">
  61.                         <input type="checkbox"/> call me now
  62.                     </td>
  63.                 </tr>
  64.                 <tr>
  65.                     <th>Fax number:</th>
  66.                     <td colspan="3"><input type="text" /></td>
  67.                 </tr>
  68.             </table>

  70.             <p>
  71.                 Granted, using tables for forms may be questionable, but you're entering a world of pain if you don't do it for complex form layouts. The <a href="css/sample1.css">CSS file is over here</a>.
  72.             </p>
  73.             <p>
  74.                 <a href="../css.html">Back to CSS Examples</a>
  75.             </p>

  77.         </div>
  78.     </div>

  80.     <script src="" type="text/javascript"></script>
  81.     <script type="text/javascript">
  82.         _uacct = "UA-472607-1"; urchinTracker();
  83.     </script>


  86. </body>
  87. </html>


  1. /**
  2.  * 100% height layout with header and footer
  3.  * ----------------------------------------------
  4.  * Feel free to copy/use/change/improve
  5.  */


  8. table {
  9.     table-layout:fixed; /* force a solid grid */
  10.     border-collapse:collapse;
  11.     margin: 0 auto 1em;
  12.     width:450px;
  13. }
  14.     table th, table td {
  15.         white-space:nowrap; /* don't want wrapping text */
  16.         padding:2px 20px 2px 5px; /* right padding for required field marker */
  17.     }

  19.     table th {
  20.         padding:2px 0 2px 5px;
  21.         text-align:right;
  22.     }

  24.     td.required, tr.required td {
  25.         background:url("../req.gif") center right no-repeat;
  26.     }

  28.     table input {
  29.         width:100%; /* simply scale inputs to table cell size */
  30.     }
  31.         td.input-group input {
  32.             width:auto; /* but not for radios or checks */
  33.         }




  38. /* Other css */

  40. html,body {
  41.     margin:0;
  42.     padding:0;
  43.     height:100%;
  44.     background:gray;
  45.     
  46.     font-family:arial,sans-serif;
  47.     font-size:small;
  48.     color:#666;
  49. }

  51. h1 {
  52.     font:1.5em georgia,serif;
  53.     margin:0.5em 0;
  54. }

  56. h2 {
  57.     font:1.25em georgia,serif;
  58.     margin:0 0 0.5em;
  59. }
  60.     h1, h2, a {
  61.         color:orange;
  62.     }

  64. p {
  65.     line-height:1.5;
  66.     margin:0 0 1em;
  67. }

  69. div#container {
  70.     margin:0 auto;
  71.     width:750px;
  72.     background:#f0f0f0;
  73.     height:auto !important;
  74.     height:100%;
  75.     min-height:100%;
  76. }

  78. div#header {
  79.     padding:1em;
  80.     background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
  81.     border-bottom:6px double gray;
  82. }
  83.     div#header p {
  84.         font-style:italic;
  85.         font-size:1.1em;
  86.         margin:0;
  87.     }

  89. div#content {
  90.     padding:1em;
  91. }
  92.     div#content p {
  93.         text-align:justify;
  94.         padding:0 1em;
  95.     }

阅读(1348) | 评论(0) | 转发(0) |
0

上一篇：mysql 5.5.15 安装笔记

下一篇：Learn about cloud computing

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

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

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

16024965号-6