CSS排版页面实例代码
程序员文章站
2022-04-19 21:03:39
...
创建CSS文件如下:
@charset "utf-8"; /* CSS Document */ *{ margin:0px; padding:0px; border:0px; } #box{ width:1100px; height:760px; margin:auto; } #hen { width:1100px; height:160px; background-color:#936; } #zuo{ width:250px; height:500px; margin-top:10px; background-color:#03C; float:left; margin-bottom:10px; } #zhong-1{ width:262px; height:300px; margin-top:10px; margin-left:10px; float:left; background-color:#000; } #zhong-2{ width:262px; height:300px; margin-top:10px; margin-left:10px; float:left; background-color:#000; } #xia{ width:544px; height:190px; background-color:#03C; margin-top:10px; float:left; margin-bottom:10px; } #you{ width:295px; height:500px; margin-left:10px; margin-top:10px; background-color:#3F6; float:right; margin-bottom:10px; } #dibu { width:1100px; height:50px; margin-top:10px; background-color:#CF3; clear:both; }
html文件如下:
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS排版页面</title> <link href="css/63301.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="box"> <div id="hen"></div> <div id="zuo"></div> <div id="zhong-1"></div> <div id="zhong-2"></div> <div id="you"></div> <div id="xia"></div> <div id="dibu"></div> </div> </body> </html>
最终实现效果如图:
以上就是CSS排版页面实例代码的详细内容,更多请关注其它相关文章!
上一篇: PHP生成友好URL
下一篇: PHP使用CURL伪造来源IP与网址