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. Ubuntu 下安装 Oracle Java

    这只是一篇流水帐,记录如何安装Java. 在Ubuntu 下管理软件很方便,但安装的Java是opensdk.如果在某些条件下,需要安装Sun (Oracle)的Java,则需要自己手工安装. 一般情 ...

  2. 【转载】10个有用的du命令行

    10 Useful du (Disk Usage) Commands to Find Disk Usage of Files and Directories The Linux “du” (Disk ...

  3. 为Delphi程序增加UAC功能(管理员身份运行exe)

    相关资料:http://bbs.csdn.net/topics/320071356# 操作方法: 在Source\VCL目录下应该有这样两个文件sample.manifest和WindowsXP.rc ...

  4. Spring AOP Interceptor transaction is not working

    Problem The Spring AOP transaction is not working in following interceptors? <bean id="testA ...

  5. UVaLive 6625 Diagrams & Tableaux (状压DP 或者 DFS暴力)

    题意:给一个的格子图,有 n 行单元格,每行有a[i]个格子,要求往格子中填1~m的数字,要求每个数字大于等于左边的数字,大于上边的数字,问有多少种填充方法. 析:感觉像个DP,但是不会啊...就想暴 ...

  6. freemaker自定义分页控件实现

    <link href="${res}/css/pages-jhdb.css" rel="stylesheet" type="text/css&q ...

  7. 修改mysql字符编码出现Job failed to start解决办法

        从网上找到如下资料: $sudo gedit /etc/mysql/my.cnf [client]下添加: default-character-set=utf8 [mysqld]下添加: de ...

  8. 解决mysql导入导出数据乱码问题

    最近在linux上面用mysqldump导出数据,放在windows系统中导入就会出现中文乱码,然后就会导致出现: Unknown MySQL server host和Can't connect to ...

  9. ADO.NET 快速入门（二）：执行命令

    Commands发出针对数据库的数据存储动作.例如,你可以执行一条命令插入或者删除数据.获取更多从数据库移动数据相关的信息,请参考“Update a Database from a DataSet”. ...

  10. Flex友好提示、警告

    Flex 自带的Alert带给用户的体验并不好,对于一些简单的提示来说,这个小题大作了. <?xml version="1.0" encoding="utf-8&q ...