PHP自学之路-----DIV+CSS(第三天）

来源：互联网发布：wap办公软件编辑：程序博客网时间：2024/05/19 20:43

盒子的经典案例：
实现下面的布局：

分析思路
<div>
<ul>
<li><img /></li>
</ul>
<div>

具体实现：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> 盒子案例2 </title>  <link rel="stylesheet" style="text/css" href="box2.css" /> </head> <body>  <!--div 在布局中起到一个控制整个内容显示的位置-->  <div class="div1">    <!--ul在布局中的作用是可以控制显示内容多少-->    <ul class="faceul"> <li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li> <li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li> <li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li> <li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li> <li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li> <li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li> <li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li> <li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li> <li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li> <li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li>    </ul>  </div> </body></html>

.div1{   width:500px;   height:400px;   border:1px solid gray;   font-size:12px;}.faceul{    width:410px;height:300px;border:1px solid red;margin-left:5px;padding-left:5px;}.faceul li{    list-style-type:none;width:70px;height:80px;border:1px solid red;margin-right:10px;margin-top:5px;float:left;/*左浮动*/}.faceul li img{    width:50px;height:50px;margin-left:10px;margin-top:5px;margin-bottom:5px;}.faceul li a{  margin-left:10px;    }

PHP自学之路-----DIV+CSS(第三天）

盒子的经典案例：实现下面的布局：

分析思路<div> <ul> <li><img /></li> </ul><div>

具体实现：

盒子的经典案例：
实现下面的布局：

分析思路
<div>
<ul>
<li><img /></li>
</ul>
<div>