### 盒子的经典案例：
实现下面的布局：
### 分析思路
~~~
<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;
}
~~~
- 前言
- HTML（第一天）
- HTML（第二天）
- DIV+CSS(第一天）
- DIV+CSS(第二天）
- DIV+CSS(第三天）
- DIV+CSS(第四天）
- PHP开发环境配置说明
- PHP基础数据类型及运算符介绍
- 走进PHP函数
- 走进位运算
- 走进数组及相关数组函数
- 面向对象的编程（类与对象)
- 面向对象的编程(类成员方法用法）
- 构造方法，析构方法
- static，global用法
- 静态方法
- 面向对象的编程方法
- 接口方法
- 接口VS继承、final、const
- 错误及异常处理机制、错误日志
- HTTP协议深度剖析
- 文件下载
- PHP数据库编程
- 数据库编程（2）
- 超全局变量
- Zend studio 开发环境入门
- 雇员管理系统（1）
- 雇员管理系统（2）
- 会话技术(cookie session)
- 会话技术 session场景使用介绍！
- PHP.in中session和cookie的配置说明
- PHP文件编程
- 报表及绘图技术
- 报表及绘图技术（jpgraph库使用，Linux安装及配置说明）
- XML基本语法及DTD介绍
- XML编程（Dom技术）
- XML编程（Xpath技术,simpleXml技术）基础入门
- 网上支付平台PHP版本
- javascript基础入门