一、效果预览
二、代码实现
1、主体结构
（1）标签结构
（2）容器样式
2、头部
（1）头部标签
（2）头部样式、
3、导航
（1）标签结构
（2）CSS样式
4、主体
（1）主体标签
<div class="middle">
<div class="middle-left"> <div class="middle-left-top"> 第一栏
div> <div class="middle-left-bottom"> <div class="middle-left-bottom-first"> 第二栏
div> <div class="middle--left-bottom-second"> 第三栏
div>
div>
div>
<div class="middle-mid"> <div class="middle-mid-top"> 第四栏
div> <div class="middle-mid-bottom"> <div class="middle-mid-bottom-first"> 第五栏
div> <div class="middle-mid-bottom-second"> 第六栏
div>
div>
div>
<div class="middle-right"> <div class="middle-right-first"> 第七栏
div> <div class="middle-right-second"> 第八栏
div> <div class="middle-right-third"> 第九栏
div>
div>
div> /*主体样式*/ .middle{
background-color:lightgreen; } .middle::after{
content:""; clear: both; display: block; } .middle-left,.middle-mid,.middle-right{
width:390px; float: left; border:1px solid red; } .middle-left,.middle-mid{
margin-right: 10px; } .middle-left{
background-color: green; } .middle-mid{
background-color: blue; } .middle-right{
background-color: yellow; } /*主体左栏样式*/ .middle-left-bottom::after{
content:""; clear: both; display: block; } .middle-left-bottom-first,.middle--left-bottom-second{
float: left; margin:10px; border:1px solid red; width:160px; } .middle-left-bottom-first,.middle--left-bottom-second{
height:200px; background-image: url(./image/mid-left-bottom.jpg); } .middle-left-top{
margin:10px; height:100px; background-image: url(./image/mid-left-top.jpg); } /*主体中栏样式*/ .middle-mid-bottom-first,.middle-mid-bottom-second{
float: left; margin:10px; border:1px solid red; width:160px; height:200px; background-image: url(./image/mid-left-bottom.jpg); } .middle-mid-top{
margin:10px; height:100px; background-image: url(./image/mid-left-top.jpg); } /*主体右栏样式*/ .middle-right::after{
content:""; clear: both; display: block; } .middle-right-first{
margin:10px; height:100px; background-image: url(./image/mid-left-top.jpg); } .middle-right-second,.middle-right-third{
float: left; margin:10px; border:1px solid red; width:160px; height:200px; background-image: url(./image/mid-left-bottom.jpg); } 5、底部
（1）标签结构
<div class="footer"> <img src="./image/footer.jpg" alt="">
div> （2）底部样式
/*底部样式*/ .footer{
background-image: url(./image/footer.jpg); } 布局前划分结构非常重要，这样就不容易造成混乱。这样我们就实现了一个非常简单的DIV+CSS网页结构布局。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/210773.html原文链接：https://javaforall.net
