DIV+CSS佈局第一部分，一列布局，兩列布局，三列布局以及組合佈局舉例說明
阿新 • • 發佈：2018-12-31
DIV+CSS佈局一
一列布局：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>佈局</title> <style type="text/css"> body,h1{margin: 0;padding: 0;} .header{background-color: #000; color: #FFF; text-align: center;} .main{ background-color: #666; color: #fff; margin: 0 auto; width:80%; height: 700px; text-align: center; } .foot{ background-color: #000; color: #fff; margin: 0 auto; width:80%; height: 150px; text-align: center; } </style> </head> <body> <div class="header"><h1>頁面頭部資訊</h1></div> <div class="main"><h1>頁面主要內容</h1></div> <div class="foot"><h1>版權資訊</h1></div> </body> </html>
執行結果如下：
兩列布局
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>兩列布局</title> <style type="text/css"> body,h1{margin: 0;padding: 0;} .left{ float: left; width: 30%; background-color: black; color: green; height: 300px; } .right{ float: right; width: 70%; background-color: white; height: 300px; color: red; } .main{width: 90%; margin: 0 auto; text-align: center; } </style> </head> <body> <div class="main"> <div class="left">LOGO</div> <div class="right">使用者資訊</div> </div> </body> </html>
執行效果：
三列布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三列布局</title> <style type="text/css"> body,h1{margin: 0;padding: 0;} .left{ float: left; width: 20%; background-color: black; color: green; height: 300px; } .right{ float: right; width: 30%; background-color: green; height: 300px; color: red; } .middle{ float: left; width: 50%; background-color: yellow; height: 300px; color: gray; } .main{width: 90%; margin: 0 auto; text-align: center; } </style> </head> <body> <div class="main"> <div class="left">左邊</div> <div class="middle">中間資訊</div> <div class="right">右邊</div> </div> </body> </html>
執行結果如下：
綜合佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,h1{margin: 0; padding: 0;color: gray;text-align: center;}
.top{
background: yellowgreen;
width: 100%;
height: 100px;
}
.top_main{
margin: 0 auto;
background: #000;
width: 900px;
height: 100px;
}
.top_left{
float: left;
background:gold;
width: 200px;
height: 100px;
}
.top_right{
float: right;
background: #00C;
width: 700px;
height: 100px;
}
.nav{
margin: 0 auto;
background: #999;
width: 900px;
height: 50px;
}
.left{
float: left;
width: 300PX;
background-color: black;
color: green;
height: 300px;
}
.right{
float: right;
width: 300PX;
background-color: green;
height: 300px;
color: red;
}
.middle{
float: left;
width: 300PX;
background-color: yellow;
height: 300px;
color: gray;
}
.main{width: 900PX;
margin: 0 auto;
height: 500px;
background-color: peachpuff;
}
.footer{
margin: 0 auto;
background-color: #000;
width: 900px;
height: 200px;
color: #FFF;
}
</style>
</head>
<body>
<div class="top">
<div class=top-main>
<div class="top_left"><h1>logo</h1></div>
<div class="top_right"><h1>頭部資訊</h1></div>
</div>
</div>
<div class="nav"><h1>頁面導航</h1></div>
<!--主要內容-->
<div class="main">
<div class="left">左邊</div>
<div class="middle">中間資訊</div>
<div class="right">右邊</div>
</div>
<!--版權資訊-->
<div class="footer"><h1>版權資訊</h1></div>
</body>
</html>
執行結果如下：