WEB2.0网页制作标准教程（8）CSS布局入门（2）
作者：阿捷 来源：网页设计师 发布时间：2007-09-11 13:21:00
标签：CSS,布局,web2.0
2.CSS2盒模型
自从1996年CSS1的推出，W3C组织就建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层<div>。盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。上面我们讲的sample层就是一个典型的盒。对于初学者，经常会搞不清楚margin，background-color，background-image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。
3.辅助图片一律用背景处理
用XHTML+CSS布局，有一个技术一开始让你不习惯，应该说是一种思维方式与传统表格布局不一样，那就是：所有辅助图片都用背景来实现。类似这样：
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
尽管可以用<img>直接插在内容中，但这是不允许的。这里的"辅助图片"是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。例如：相册中的图片、图片新闻中的图片，上面的3d盒模型图片都属于内容的一部分，它们可以用<img>元素直接插在页面里，而其它的类似logo，标题图片，列表前缀图片都必须采用背景方式或者其他CSS方式显示。
这样做的原因有2点：
将表现与结构彻底相分离，用CSS控制所有的外观表现，便于改版。
使页面更具有易用性，更有亲和力。例如：盲人使用屏幕阅读机，用背景技术实现的图片就不会被朗读出来。
0
投稿猜你喜欢
- 一、若出现404错误，自动跳转到所在目录的首页；二、若当前页本身是目录首页，则自动跳转至上一级目录的默认首页。自定义404页面代码如下：&l
- Firefox 3 有一个很让人讨厌的bug：基于某种目的，在表单提交时 disable 掉提交按钮，通过后退键回到这个页面后，这个提交按钮
- 现在介绍加速网页图形显示速度的六种方法，为你解决这个难题。其最基本的宗旨就是，让你用买鱼的价钱，品尝到熊掌的美味和营养。 1.首先要确定图像
- 内容摘要： 网页的色彩搭配往往是网友们感到头疼的问题，尤其是那些完全没有美术基础的网友。到底用
- 一个SELECT查询中的LIKE语句来执行这种查询，尽管这种方法可行，但对于全文查找而言，这是一种效率极端低下的方法，尤其在处理大量数据的时
- 鼠标双击滚动屏幕，单击停止滚动，很多小说新闻网站都有这个很人性化的功能，阅读起小说、新闻来很方便，不用手动拉滚动条。js代码如下：<h
- A.动态页面第一步：创建转向控制页面，创建网站默认的首页文件（通常为"index.asp"或"default.
- 前些日子有网友问：将ASP纪录集输出成n列的的表格形式显示的方法？现在写了一个，方便大家使用。'定义变量 Dim cn,r
- Q： 不知xml和html有什么区别？它们不同在哪？ A： 关于XML和HTML区别请参考： http://www.w3c.org/Mark
- 如何在线删除表或索引？ <％Set conn1 = Server.CreateObject(&
- 问：如何让内联框架里面的网页背景透明？（用iframe嵌套一网页，怎么能够设置其背景为透明以便能显示父框架中网页的背景图？）答：这是需要 I
- 有时候，因为内容的更改或者隐私问题，我们往往不 希望别人通过“百度快照”的方法 查看 自己网站的某一些网页，对于网站管理员来说，百度快照也分
- 模糊数据库指能够处理模糊数据的数据库。一般的数据库都是以二直逻辑和精确的数据工具为基础的，不能表示许多模糊不清的事情。随着模糊数学理论体系的
总结了5个关于css布局的常见问题，并附有解决方法，供参考。float的3像素问题及解决办法当使用float浮动容器后，在IE6下会产生3p- 每个人都可以编写CSS代码，甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗？开始用这5个Tips改进你的CSS吧！一、关于CSS
- 校勘(collation)是指对代码页、字母大小写、音调、语言和字母表的整理，很多校勘都是在数据进入数据库之前进行的，根据我的经验，北美的大
- MYSQL数据库以它短小、方便、速度快、免费等优点成为很多网站目前首选数据库，但一般都是用PHP+MYSQL相结合来开发各种动态页面，其实A
- 本文由伯乐在线 - 敏捷翻译的史莉萍翻译自《Creating an Effective Color-Scheme for Web Desig
- 目录本文目标如何使用本教程正则表达式到底是什么？入门测试正则表达式元字符字符转义重复字符类反义替换分组后向引用零宽断言负向零宽断言注释贪婪与
- 如果我们希望在网页的不同角落里放置不重复平铺的背景图，该怎么办呢？比如网页的背景要如图所示，并要求在不
