div浮动排版

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>

效果图