现在的位置: 首页 > 综合 > 正文

我写的CSS(最基本的外框架)

2012年11月29日 ⁄ 综合 ⁄ 共 1374字 ⁄ 字号 小 中 大 ⁄ 评论关闭
 上中下，左中右，居中，这些布局方法是最基本的。

  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>css基本布局方法</title>
  5.     <style type="text/css">
  6.         *
  7.         {
  8.             font-size:12px;
  9.             font-family:verdana;
  10.             margin:0px;/*--定义元素周围的空间*/
  11.             padding:0px;/*--定义元素边框与元素内容之间的空白*/
  12.         }
  13.         #body
  14.         {
  15.             position:relative;
  16.             width:85%;
  17.             margin:3px auto;/*上下,左右,这里的左右就是居中*/
  18.             height:100%;
  19.         }
  20.         #sidebar /*左边*/
  21.         {
  22.             position:absolute;
  23.             left:0;
  24.             top:0;
  25.             width:200px;
  26.         }
  27.         #right
  28.         {
  29.             width:240px;
  30.             position:absolute;
  31.             right:0;
  32.             top:0;
  33.         }
  34.         #center
  35.         {
  36.             margin:0 241px 0 201px;/*上右下左*/
  37.         }
  38.         #header,#footer
  39.         {
  40.             width:85%;
  41.             margin:0 auto;/*由浏览器设置*/
  42.             height:50px;
  43.         }
  44.         #sidebar,#right,#center,#header,#footer{border:solid 1px #000;}
  45.         #sidebar,#right,#center{height:780px;}
  46.     </style>
  47. </head>
  48. <body>
  49. <div id="header">head</div>
  50. <div id="body">
  51.     <div id="sidebar">left<br />left<br /></div>
  52.     <div id="center">center</div>
  53.     <div id="right">right</div>
  54. </div>
  55. <div id="footer">footer</div>
  56. </body>
  57. </html>
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞