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

最新推荐文章于 2024-04-03 18:34:51 发布

轻飘风扬

最新推荐文章于 2024-04-03 18:34:51 发布

阅读量2.3k

点赞数 1

分类专栏：【走进PHP】走进PHP的缤纷世界文章标签：盒子模型经典案例 div css

本文链接：https://blog.csdn.net/sjin_1314/article/details/8830530

版权

【走进PHP】同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

走进PHP的缤纷世界

39 篇文章 19 订阅

订阅专栏

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

分析思路
<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;
    
}