div+css排版的樣例

2020-10-23 18:55:02

字體：大中小

來源：轉載

供稿：網友

div+css排版的樣例

<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html  xmlns="http://www.w3.org/1999/xhtml";  lang="gb2312"> <head> <meta  http-equiv="Content-Type"  content="text/html;  charset=gb2312"  /> <meta  http-equiv="Content-Language"  content="gb2312"  /> <meta  content="all"  name="robots"  /> <meta  name="Author"  content="huobazi@aspxboy.com  ,活靶子"  /> <meta  name="Copyright"  content="www.AspxBoy.Com,自由版權,任意轉載."  /> <meta  name="Description"  content="www.AspxBoy.Com"  /> <meta  name="Keywords"  content="www.AspxBoy.Com,活靶子,huobazi"  /> <title>  Div布局  </title> <style> body{text-align:center;margin:0;padding:0}/*text-align:center是ie中必須要有的*/div {                 height:200px;                 color:red;   } .title {                 margin:0  auto;                 width:776px;                 background-color:#abcdef; } .middle {                 margin:0  auto;                 width:776px; } .left {                 float:left;                 clear:right;                 width:20%;                 background-color:#eeefff; } .center {                 float:left;                 clear:right;                 width:50%;                 background-color:#CCC000; } .right {                                  float:left;                 clear:right;                 width:30%;                 background-color:#fff000; } .both {                 clear:both;                   width:100%;                 background-color:#666999;   } .footer {                                 margin:0  auto;                 width:776px;                 clear:both;                   background-color:#000fff;   } </style> </head> <body> <div  class="title">頂部</div> <div  class="middle">                 <div  class="left">左側</div>                 <div  class="center">中部</div>                 <div  class="right">右側</div>                 <div  class="both">全行</div>                 <div  class="left">左側</div>                 <div  class="center">中部</div>                 <div  class="right">右側</div>                 <div  class="both">全行</div>                 <div  class="left">左側</div>                 <div  class="center">中側</div>                 <div  class="right">右側</div> </div> <div  class="footer">底部</div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執行]

上一篇：HTML結構化：實踐DIV＋CSS網頁布局入門指南

下一篇：CSS經典技巧十則第1/2頁