1.先看看经典案例效果图，导出思路：

分析：思路

基本结构

<div>

<ul>

<li><img src=""/> </li>

…………

</ul>

</div>

2.案例演示：

（1）box2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>盒子模型加强</title>

<link rel="stylesheet" type="text/css" href="box2.css" />

</head>

<body>

<div class="div1">

<!--ul在布局中可以控制显示内容的多少-->

<ul class="faceul">

<li>

<img src="030Q92636-49.jpg"/>

</li>

<li>

<img src="030Q92636-49.jpg"/>

</li>

<li>

<img src="030Q92636-49.jpg"/>

</li>

<li>

<img src="030Q92636-49.jpg"/>

</li>

<li>

<img src="030Q92636-49.jpg"/>

</li>

<li>

<img src="030Q92636-49.jpg"/>

</li>

<li>

<img src="030Q92636-49.jpg"/>

</li>

<li>

<img src="030Q92636-49.jpg"/>

</li>

<li>

<img src="030Q92636-49.jpg"/>

</li>

</ul>

</div>

</body>

</html>

（2）box2.css

@charset "utf-8";

/* CSS Document */

.div1 {

    width:500px;

    height:600px;

    border:1px solid gray;

}

.faceul{

    width:400px;

    height:550px;

    border:1px solid red;

    padding:5px;

    margin:10px;

}

.faceul li {

    list-style-type:none;

    float:left;/*左浮动*/

    width:55px;

    height:55px;

    border:1px solid red;

    margin-right:5px;

    margin-top:5px;

}

.faceul li img {

    width:50px;

    height:50px;

    margin-left:5px;

    margin-top:5px;

}

效果图：

这时候我们再次回顾当初盒子模型图，印象就更深了：

css笔记17：盒子模型加强版的案例的更多相关文章

  1. HTML&CSS精选笔记_盒子模型

    盒子模型 认识盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margi ...

  2. 【CSS学习】--- 盒子模型

    一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...

  3. css中的盒子模型

    css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型.   1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...

  4. CSS学习之盒子模型

    1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...

  5. CSS学习系列1 - CSS中的盒子模型 box model

    css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括 ...

  6. CSS Flexbox 弹性盒子模型

    CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...

  7. css笔记16：盒子模型的入门案例

    1.案例一: 效果图如下: (1)box1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  8. css中的f弹性盒子模型的应用案例

    案例1: <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...

  9. HTML学习笔记 w3sCss盒子模型（阴影）（div的一些使用）案例 第十节 （原创） 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. OpenJDK与JDK的区别及Ubuntu下的安装方法

    OpenJDK与JDK的区别: OpenJDK是JDK的开放原始码版本,以GPL协议的形式放出.两者的授权协议的不同,且在采用GPL协议的OpenJDK中,SUNJDK的一部分源代码因为产权的问题无法 ...

  2. 百度，你家云管家能靠谱点不？替你脸红！Shame on you！

    此文已提交百度云问题反馈, 坐等答复. 笔者最近下载某24+G分卷压缩文件, 24+G啊, 足足要下将近7个小时.满心欢喜的下载完却尼玛发现解压出错, 有6个文件无法解压?wrong password ...

  3. <Chapter 2>2-2-1.用户偏好模式（The User Preferences Pattern）

    在这个模块中我们要创建的应用是一个简单的钟.当一个用户访问这个网站时,这个应用会更具服务器的系统时间显示当前的时间.默认情况下,这个应用使用标准国际时间(UTC)时区显示当前时间.用户可以使用Goog ...

  4. angularJS笔记

    1.MVC ng-app: html表头处,每个htnl文件只能有一个ng-app ng-controller :js文件中定义 ng-model:只要引用了angularJS就可以使用 js文件代码 ...

  5. Codeforces 375

    A 7的所有的余数都可以用1,6,8,9排列得到,然后搞一下就可以了. B 可以用类似于单调队列的东西搞.具体看代码: /* * Problem: B. Maximum Submatrix 2 * A ...

  6. Java NIO 缓冲区学习笔记

    Buffer其实就是是一个容器对象,它包含一些要写入或者刚读出的数据.在NIO中加入Buffer对象,体现了新库与原I/O的一个重要区别.在面向流的I/O中,您将数据直接写入或者将数据直接读到Stre ...

  7. 第三次作业，GUI设计之最大子序列和

    先吐槽一发!!!学渣表示作业太难了啊!!!!!!做一次作业要用好久好久,要问好多好多大神才能行,虽然确实提高不少,花的时间真是……!!!!! 这次作业费劲心血,希望老师能给个好分数,至少对于学渣来说已 ...

  8. HDU 1078 FatMouse and Cheese (记忆化搜索)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1078 老鼠初始时在n*n的矩阵的(0 , 0)位置,每次可以向垂直或水平的一个方向移动1到k格,每次移 ...

  9. HDU 3308 LCIS (线段树区间合并)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3308 题目很好懂,就是单点更新,然后求区间的最长上升子序列. 线段树区间合并问题,注意合并的条件是a[ ...

  10. 又遇BUG-ORA-01148：数据文件忽然变为recover状态

    现象: RAC环境,数据文件状态变为recover,查看alert日志有如下报错: Wed Jun 26 02:31:03 2013 Thread 1 advanced to log sequence ...