- 1、本文档共3页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
div+css布局10:CSS 布局入门
华迪教育
华迪信息
CSS 布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的 GIF 图片来
控制文布局版块的间距;而现在则采用层(div)来定位,通过层的 margin,padding,border 等属性来控制版块的间距。
1.定义DIV
分析一个典型的定义 div 例子:
#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px solid;
BORDER-RIG #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIG来指定背景图片
路径;其次定义背景色#FEFEFE。no-repeat指背景图片不需要重复,如果需要横向重复用repeat-x,纵向重复
用repeat-y,重复铺满整个背景用repeat。后面的right bottom;是指背景图片从右下角开始。如果没有背景
图片可以只定义背景色 BACKGROUND: #FEFEFE
? COLOR 用于定义字体颜色,上一节已经介绍过。
? TEXT-ALIGN 用来定义层中的内容排列方式,center 居中,left 居左,right 居右。
? LINE-HEIGHT 定义行高,150%是指高度为标准高度的 150%,也可以写作:LINE-HEIG 或者 LINE-HEIG,
都是一样的意思。
? WIDTH 是定义层的宽度,可以采用固定值,例如 500px,也可以采用百分比,象这里的60%。要注意的是:这个宽度
仅仅指你内容的宽度,不包含 margin,border 和padding。但在有些浏览器中不是这么定义的,需要你多试试。
下面是这个层的实际表现:
这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内
容,这里是演示内容,
这里是演示内容,这里是演示内容,
这里是演示内容,这里是演示内容,
这里是演示内容...
我们可以看到边框是 2px 的灰色,背景图片在右下没有重复,内容距离上和左边框 20px,内容居中,一切和预想的一样。 hoho,
虽然不好看,但它是最基本的,掌握了它,你就已经学会一半的 CSS 布局技术了。就是这样,不算难吧!(另一半是什么?另
一半是层与层之间的定位。我会在后面逐步讲解。)
2.CSS2 盒模型
自从 1996 年CSS1 的推出,W3C 组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个
盒的属性,这些对像包括段落、列表、标题、图片以及层
。盒模型主要定义四个区域:内容(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;
尽管可以用 直接插在内容中,但这是不推荐的。这里的辅助图片是指那些不是作为页面要表达的内容的一部分,而
仅仅用于修饰、间隔、提醒的图片。例如:相册中的图片、图片新闻中的图片,上面的 3d 盒模型图片都属于内容的一部分,
它们可以用 元素直接插在页面里,而其它的类似 logo,标题图片,列表前缀图片都必须采用背景方式或者其他 CSS 方
式显示。
这样做的原因有 2点:
? 将表现与结构彻底相分离(参考阅读另一篇文章:《理解表现与结构相分离》),用 CSS 控制所有的外观表现,便于改
版。
? 使页面更具有易用性,更有亲和力。例如:盲人使用屏幕阅读机,用背景技术实现的图片就不会被朗读出来。
更多信息可以访问华迪IT培训 或 四川华迪信息
您可能关注的文档
- div+css布局6:调用样式表.doc
- 超级密码使用说明文档.docx
- 动漫设计:动画对白口型讲解.docx
- 金昌继电保护及自动装置复习题.doc
- AlphaCAM 安装说明.doc
- 四年级数学升和毫升-调查问卷.doc
- 问卷调查(项目前).doc
- RBS6000GSM基站简要工作流程.doc
- 访问WIN7共享文件出错“登录失败:未授予用户在此计算机上的请求登录类型”.doc
- 色彩搭配的原理与避讳第三章.doc
- 四川省德阳市罗江中学2025届高三考前热身化学试卷含解析.doc
- 山东省枣庄现代实验学校2025届高三下学期第五次调研考试化学试题含解析.doc
- 吉林省长春市十一高中等九校教育联盟2025届高三一诊考试生物试卷含解析.doc
- 2025届江苏省盐城市伍佑中学高考仿真模拟化学试卷含解析.doc
- 2025届广西贺州中学高考冲刺押题(最后一卷)生物试卷含解析.doc
- 安徽省池州市贵池区2025届高三第一次模拟考试生物试卷含解析.doc
- 宁夏银川一中2025届高三(最后冲刺)化学试卷含解析.doc
- 广东省广州市增城区四校联考2025届高考压轴卷化学试卷含解析.doc
- 2025届邯郸市第一中学高考生物必刷试卷含解析.doc
- 2025届安徽省安庆市石化第一中学高考仿真卷化学试卷含解析.doc
文档评论(0)