站长软件下载 东莞佳利热转印机 空白卫衣批发 个性服饰定制

典型的DIV＋CSS布局——固定宽度且居中的版式

一、效果

二、HTML结构

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>典型的DIV＋CSS布局</title>  
  5.     <link href="css/layout.css" rel="stylesheet" type="text/css" />  
  6.     <style type="text/css">  
  7.         </style>  
  8. </head>  
  9. <body>  
  10.     <div id="wrap">  
  11.         <div id="header">  
  12.             <h1>典型的DIV＋CSS布局</h1>  
  13.         </div>  
  14.         <div id="menu">  
  15.         </div>  
  16.         <div id="container">  
  17.             <div id="side">  
  18.             </div>  
  19.             <div id="content">  
  20.             </div>  
  21.         </div>  
  22.         <div id="footer">  
  23.             <p>Copyright©2012,<a href="http://blog.csdn.net/yousuosi">WestGarden</a>.</p>  
  24.         </div>  
  25.     </div>  
  26. </body>  
  27. </html>  

三、CSS

  1. *{  
  2.     margin:0;  
  3.     padding:0;  
  4. }  
  5. body {  
  6.     text-align:center;  
  7.     background:url(bg.jpg);  
  8. }  
  9. a:link      { color: #A0410D; text-decoration:none; }  
  10. a:visited   { color: #A0410D; text-decoration:none; }  
  11. a:active    { color: #A0410D;  cursor:hand; text-decoration:none; }  
  12. a:hover     { color: #FFCC17;  cursor:hand; text-decoration:"underline"; }  
  13. h1,h2,h3,h4  
  14. {  
  15.     color:#C36C2D;  
  16. }  
  17. #wrap{  
  18.     width:800px;  
  19.     margin:0 auto;  
  20.     text-align:left;  
  21. }  
  22.   
  23. #header{  
  24.     height:118px;  
  25.     text-align:center;  
  26.     background:#FDE38F url(logo.jpg) no-repeat;  
  27. }  
  28. #header h1  
  29. {  
  30.     line-height:118px;  
  31. }  
  32. #menu  
  33. {  
  34.     height:22px;  
  35.     background:url(bar.jpg) repeat-x;  
  36. }  
  37. #container  
  38. {  
  39.     float:left;  
  40.     background:#A0410D;  
  41. }  
  42. #side  
  43. {  
  44.     width:200px;  
  45.     float:left;  
  46. }  
  47. #content  
  48. {  
  49.     width:600px;  
  50.     float:left;  
  51.     height:400px;  
  52.     background:white;  
  53. }  
  54. #footer  
  55. {  
  56.     clear:both;  
  57.     height:22px;  
  58.     text-align:right;  
  59. }  
  60. #footer p  
  61. {  
  62.     line-height:22px;  
  63. }  


 【说明】

一、*{ margin:0; padding:0;}是一种不严格的样式重置，做自己的网站，一般都需要一个reset.css，reset.css内容可参

posted on 2012-10-16 09:32  pc蛋蛋  阅读(325)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 pc蛋蛋
Powered by .NET 8.0 on Kubernetes