@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>
最終實現效果:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
