彻底弄懂CSS盒子模式之一（DIV布局快速入门)（2）
作者：唐国辉 来源：蓝色经典 发布时间：2007-05-11 17:03:00
标签：css,div,盒子
再直接列一段代码加深理解结构和表现相分离：
用CSS排版
<style type="text/css">
<!--
#photoList img{
height:80;
width:100;
margin:5px auto;
}
-->
</style> <div id="photoList">
<img src="http://www.blueidea.com/tech/web/2007/01.jpg" />
<img src="http://www.blueidea.com/tech/web/2007/02.jpg" />
<img src="http://www.blueidea.com/tech/web/2007/03.jpg" />
<img src="http://www.blueidea.com/tech/web/2007/04.jpg" />
<img src="http://www.blueidea.com/tech/web/2007/05.jpg" />
</div>
不用CSS排版
<img src="http://www.blueidea.com/tech/web/2007/01.jpg" width="100" height="80" align="middle" />
<img src="http://www.blueidea.com/tech/web/2007/02.jpg" width="100" height="80" align="middle" />
<img src="http://www.blueidea.com/tech/web/2007/03.jpg" width="100" height="80" align="middle" />
<img src="http://www.blueidea.com/tech/web/2007/04.jpg" width="100" height="80" align="middle" />
<img src="http://www.blueidea.com/tech/web/2007/05.jpg" width="100" height="80" align="middle" />
第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。
[提示：你可先修改部分代码，再按运行]
用CSS排版减小网页文件体积
像上面我做的那个版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了(用class调用，而不是ID)，只要改变其中的文字内容就可以生成风格统一的众多板块了，它的样式和结构代码是（请不要直接复制生成网页，把下面代码分别粘贴到网页中它们应在的位置）：
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {
font-size: 12px;
margin: 0px auto;
height: auto;
width: 805px;
}
.mainBox {
border: 1px dashed #0099CC;
margin: 3px;
padding: 0px;
float: left;
height: 300px;
width: 192px;
}
.mainBox h3 {
float: left;
height: 20px;
width: 179px;
color: #FFFFFF;
padding: 6px 3px 3px 10px;
background-color: #0099CC;
font-size: 16px;
}
.mainBox p {
line-height: 1.5em;
text-indent: 2em;
margin: 35px 5px 5px 5px;
}
-->
</style>
<div class="mainBox">
<h3>前言</h3>
<p>正文内容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>转变思想</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>熟悉步骤</h3>
<p>正文内容 </p>
</div>
0
投稿猜你喜欢
1 分类图像滤波按图像域可分为两种类型：邻域滤波(Spatial Domain Filter)，其本质是数字窗口上的数学运算。一般用于图像平- asp连接sql 第一种写法： 代码如下: MM_conn_STRING = "Driver={SQL Server};serv
- 目录1. 首先2. 编程惯用法3. 基础用法4. 库的使用5. 设计模式6. 内部机制7. 使用工具辅助项目开发8. 性能剖析与优化1. 首
- 游戏截图动态演示源码分享state/tool.pyimport osimport jsonfrom abc import abstractm
- pytorch查看模型model参数parameters示例1：pytorch自带的faster r-cnn模型import torchim
- 字符串的IndexOf()方法搜索在该字符串上是否出现了作为参数传递的字符串,如果找到字符串,则返回字符的起始位置 (0表示第一个字符,1表
- 主程序mainaddfunc.pyfrom flask import Flask, render_template, request, ur
- 本文实例为大家分享了Python基于OpenCV实现人脸检测，并保存的具体代码，供大家参考，具体内容如下安装opencv如果安装了pip的话
- 1、主从同步原理主从同步架构图（异步同步）这是最常见的主从同步架构主从同步流程（异步同步）主库把数据变更写入binlog文件从库I/O线程发
- 本文会介绍一些Python大神用的贼溜的技巧，让一探究竟吧！欢迎收藏学习，喜欢点赞支持，欢迎畅聊。整理字符串输入整理用户输入的问题在编程过程
- 一、Go语言实战——自定义集合Set在Go语言中有作为Hash Table实现的字典（Map）类型，但标准数据类型中并没有集合（Set）这种
- 前段时间做一个小项目，为了同时存储多条数据，其中有一个功能是解析Excel并把其中的数据存入对应数据库中。花了两天时间，不过一天多是因为用了
- 1.DNS查询过程：以查询 www.baidu.com为例（1）电脑向本地域名服务器发送解析www.baidu.com的请求（2）本地域名服
- 背景前段时间写了一个自动化安装 MySQL 的程序，其中有一个环节就是动态的渲染 my.cnf 文件；总的解决方案就是像 Django 渲染
- 在DBA的日常工作中，经常需要重装或在新机器上安装Oracle,但每次安装所浪费的时间、精力以及失败的挫折都在考验着DBA的承受能力，本文着
- 本文实例讲述了Sanic框架安装与简单用法。分享给大家供大家参考，具体如下：Sanic是一个类似Flask的Python 3.5+ Web服
- 1.设计原则 1) 标准化和规范化 数据的标准化有助于消除数据库中的数据冗余。标准化有好几种形式，但Third Normal Form（3N
- anaconda指的是一个开源的Python
- 因为函数或类都是对象，它们也能被四处传递。它们又是可变对象，可以被更改。在函数或类对象创建后但绑定到名字前更改之的行为为装饰(decorat
- setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。语法:setTimeout(code,millisec)参数：cod
