第一种HTML CSS使用div(盒子)进行基本布局1.单列布局 网页分为上中下三个模块
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>网页上中下</title> </head> <style> body{ margin: 0; } .box{ width: 960px;margin: 0 auto; } .box .header{ height: 120px; border: 1px solid #0000FF; line-height: 120px; } .box .main{ height: 300px; border: 1px solid #00FF00; line-height: 300px; } .box .footer{ height: 100px; border: 1px solid red; line-height: 100px; } p{ text-align: center; } </style> <body> <div class="box"> <p class="header">头部</p> <p class="main">主题</p> <p class="footer">底部</p> </div> </body></html>
2.双列布局网页分为左右模块 <!DOCTYPE html><html><head><meta charset="UTF-8"><title>网页左右布局（双列布局）</title></head><style>body{margin: 0;}.box{width: 80%;margin: 0 auto;overflow: hidden;}.box .left{width: 30%;height: 400px;background-color: #0f0;float: left;}.box .right{width: 70%;height: 400px;background-color: #0000FF;float: left;}</style><body><div class="box"><p class="left">1</p><p class="right">2</p></div></body></html> 3.三列布局网页分为左中右模块 <!DOCTYPE html><html><head><meta charset="UTF-8"><title>三列布局</title><style>body{margin: 0;}.box{width: 960px;margin: 0 auto;position: relative;}.box .left{width: 200px;height: 400px;background-color: #FF0000;position: absolute;}.box .center{height: 400px;background-color: #00FF00;margin:0 300px 0 200px;position: relative;margin-top: 10px;}.box .right{width: 300px;height: 400px;background-color: #FFC0CB;position: absolute;right: 0;top: 0;}</style></head><body><div class="box"><p class="left">左</p><p class="center">中</p><p class="right">右</p></div></body></html> 4.混合布局（常见网页布局） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>混合布局</title><style>body{margin: 0;}.box{width: 960px;margin: 0 auto;}.header{height: 120px;background-color: #ddd;}.main{height: 400px;background-color: #f00;position: relative;}.main .left{width: 200px;height: 400px;position: absolute;left: 0;top: 0;background-color: #ofccaa;}.main .center{height: 400px;margin: 0 300px 0 205px;background-color: #123456;}.main .right{width: 300px;height:400px;position: absolute;right: 0;top: -16px;background-color: #ff0;}.footer{height: 80px;background-color: blue;}</style></head><body><div class="box"><div class="header">头部</div><div class="main"><p class="left">嵌套内容左部分</p><p class="center">嵌套内容中间</p><p class="right">嵌套内容右部分</p></div><div class="footer">底部</div></div></body></html>