简易的盒子模型
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<style>
?? ??? ??? ?body{
?? ??? ??? ??? ?margin: 0 auto;/* 上面是0,左右居中...上右下左 */
?? ??? ??? ??? ?width: 1200px;/* 將此區域居中 */
?? ??? ??? ?}
?? ??? ??? ?/* 設置頂部區塊 */
?? ??? ??? ?.bTop{
?? ??? ??? ??? ?height: 70px;
?? ??? ??? ??? ?width: 1200px;
?? ??? ??? ??? ?background-color: #AAFFFF;
?? ??? ??? ?}
?? ??? ??? ?.bTopbotton{
?? ??? ??? ??? ?height: 30px;
?? ??? ??? ??? ?width: 1200px;
?? ??? ??? ??? ?background-color: #000000;
?? ??? ??? ?}
?? ??? ??? ?/* 設置中間區塊 */
?? ??? ??? ?.bMid{
?? ??? ??? ??? ?height: 400px;
?? ??? ??? ??? ?width: 1200px;
?? ??? ??? ??? ?background-color: cyan;
?? ??? ??? ?}
?? ??? ??? ?/* 設置底部區塊 */
?? ??? ??? ?.bBotton{
?? ??? ??? ??? ?height: 200px;
?? ??? ??? ??? ?width: 1200px;
?? ??? ??? ??? ?background-color: lightblue;
?? ??? ??? ?}
?? ??? ??? ?/* 設置中間區塊左邊部分 */
?? ??? ??? ?.bMidleft{
?? ??? ??? ??? ?height: 400px;
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?background-color: #00ff00;
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?/* 設置中間區塊中部部分 */
?? ??? ??? ?.bMidmid{
?? ??? ??? ??? ?height: 400px;
?? ??? ??? ??? ?width: 800px;
?? ??? ??? ??? ?background-color: bisque;
?? ??? ??? ??? ?float: left;
?? ??? ??? ?}
?? ??? ??? ?/* 設置中間區塊右邊部分 */
?? ??? ??? ?.bMidright{
?? ??? ??? ??? ?height: 400px;
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?background-color: deepskyblue;
?? ??? ??? ??? ?float: left;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body> ?<div class="bTop">這是頂部</div>
?? ??? ??? ?<div class="bMid">
?? ??? ??? ??? ?<div class="bMidleft">這是中左</div>
?? ??? ??? ??? ?<div class="bMidmid">這是中</div>
?? ??? ??? ??? ?<div class="bMidright">這是中右</div>
?? ??? ??? ?</div>
?? ??? ??? ?<div class="bBotton">這是底部</div>
?? ??? ?</div>
?? ?</body>
</html>
總結
- 上一篇： Wpe封包服务器不回传怎么办
- 下一篇： 微软王码五笔86版 for win95/