WEB2.0网页制作标准教程(8)CSS布局入门(2)
作者:阿捷 来源:网页设计师 时间:2007-09-11 13:21:00
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控制所有的外观表现,便于改版。
使页面更具有易用性,更有亲和力。例如:盲人使用屏幕阅读机,用背景技术实现的图片就不会被朗读出来。
阅读下一篇:WEB2.0网页制作标准教程(9)第一个CSS布局实例
标签:CSS,布局,web2.0
0
投稿
猜你喜欢
15个网页排版例子赏析
2008-01-06 16:38:00
mysql提示Changed limits: max_open_files: 2048 max_connections: 1910 table_cache: 64的解决
2024-01-23 11:01:32
让所有IE支持HTML5的解决方案
2009-10-31 18:43:00
react native环境安装流程
2023-07-02 10:22:36
从学习到接单赚钱 十大网络技术人员推荐收藏的网站
2023-02-05 02:54:24
用ASP+CSS实现随机背景
2007-09-26 12:33:00
ECMAScript6函数默认参数
2024-05-13 09:18:24
用css和js实现firefox和IE支持局部打印
2008-05-23 13:04:00
WAP页面设计与实现小贴士
2011-01-10 20:38:00
python selenium登录豆瓣网过程解析
2021-12-15 09:52:49
MySQL流程控制IF()、IFNULL()、NULLIF()、ISNULL()函数的使用
2024-01-13 19:07:17
采用memcache在web集群中实现session的同步会话
2023-10-01 22:26:37
Vue 通过自定义指令回顾v-内置指令(小结)
2023-07-02 16:56:42
Python中sys.argv用法图文详解
2023-09-07 18:30:00
使用python切片实现二维数组复制示例
2021-11-02 22:24:41
python3.7添加dlib模块的方法
2023-09-16 03:58:55
mysql使用LOAD语句批量录入数据
2010-03-18 16:19:00
微信小程序开发之获取用户手机号码(php接口解密)
2023-11-15 03:34:59
js链表操作(实例讲解)
2024-04-17 10:37:33
Flask之flask-script模块使用
2022-02-18 11:01:13