div浮动排版

将照片放入div中，在通过对div进行排版来达到对照片进行排版的过程

创建div

先将要创建的div创建好

<div class="body"> <div class="top"> </div> <div class="middle"> </div> <div class="foot"> </div> </div>

在center中创建无序列表

由于center中的照片排列特殊，所以要创建列表

<div class="body"> <div class="top"> </div> <div class="middle"> <ul class="middle_top"> <li></li> <li></li> <li></li> </ul> <ul class="middle_foot"> <li></li> <li></li> <li></li> </ul> </div> <div class="foot"> </div> </div>

在无列表中创建a标签，照片填入

现在无序列表中创建，再在中将照片填入

<div class="body"> <div class="top"> <a href="#"> <img src="./img/index/banner_big.jpg"> </a> </div> <div class="middle"> <ul class="middle_top"> <li class="left"> <a href="#"><img src="./img/index/adv1.jpg"> </a> </li> <li class="center"> <a href="#"><img src="./img/index/adv2.jpg"></a> </li> <li class="right"> <a href="#"><img src="./img/index/adv_l1.jpg"></a> </li> </ul> <ul class="middle_foot"> <li class="left"> <a href="#"><img src="./img/index/adv3.jpg"></a> </li> <li class="center"> <a href="#"><img src="./img/index/adv4.jpg"></a> </li> <li class="right"> <a href="#"><img src="./img/index/adv_l2.jpg"></a> <a class="right_foot" href="#"><img src="./img/index/adv_l3.jpg"></a> </li> </ul> </div> <div class="foot"> <a href="#"><img src="./img/index/217.jpg"></a> </div> </div>

在HTML中创建内联样式，设置div样式

在中创建内联样式，先将盒子的间距清零，再设置div的样式

<style> /*将浏览器中的盒子边距清零*/ * { margin: 0px; padding: 0px; border: 0px; } /*最外边的div*/ .body { /*宽高*/ width: 1200px; height: 1200px; /*水平居中*/ margin: auto; } /*上面的盒子*/ .body .top { /*长宽*/ width: 1200px; height: 400px; } /*中间的盒子*/ .body .middle { /*宽高*/ width: 1200px; height: 640px; /*div上边距*/ margin-top: 16px; } /最下面的div/ .body .foot { /*宽高*/ width: 1200px; height: 160px; /*div上边距*/ margin-top: 16px; } </style>

再设置无序列表样式

<style> /*将浏览器中的盒子边距清零*/ * { margin: 0px; padding: 0px; border: 0px; } /*最外边的div*/ .body { /*宽高*/ width: 1200px; height: 1200px; /*水平居中*/ margin: auto; } /*上面的盒子*/ .body .top { /*长宽*/ width: 1200px; height: 400px; } /*中间的盒子*/ .body .middle { /*宽高*/ width: 1200px; height: 640px; /*div上边距*/ margin-top: 16px; } /最下面的div/ .body .foot { /*宽高*/ width: 1200px; height: 160px; /*div上边距*/ margin-top: 16px; } .body .middle ul { /*表单宽度*/ width: 1200px; /*去掉表单前面的点*/ list-style: none; } .body .middle ul li { /*每行浮动成一行*/ float: left; } .body .middle .middle_top { width: 1200px; height: 312px; } .body .middle .middle_foot { width: 1200px; height: 312px; margin-top: 16px; } .body .middle .middle_foot .right { width: 278px; } .body .middle .middle_top .center, .right { margin-left: 16px; } .body .middle .middle_foot .center, .right { margin-left: 16px; } .body .middle .middle_foot .right .right_foot { /*强制转换成内块可以设置边距*/ display: inline-block; /*设置上边距*/ margin-top: 16px; } </style>

效果图