网页设计与制作项目实训教程 教学课件 ppt 作者 严加琼 曾金发 项目15
37页1、项目15 使用CSS样式布局页面,项目描述,知识储备,实践向导,能力拓展,退 出,项目小结,15.1 项目描述,在学习CSS基础知识之后,进一步学习更高级的CSS应用技能,使用CSS样式表进行网页布局。本项目主要通过实例讲解CSS布局的手工编写和工具运用,完成“海思教育”网站首页的草稿布局和首页的布局美化。在最后一个任务中增加了CS6的流体网格布局内容。,15.2 知识储备,15.2.1 常用布局标记 15.2.2 盒子模型 15.2.3 元素定位方法,15.2知识储备,15.2.1常用布局标记 1.块级元素,表15-1 常见的块级元素(block element),15.2知识储备,15.2.1常用布局标记 2.行内元素,表15-2 常见的行内元素(inline element),15.2知识储备,15.2.2 盒子模型 CSS 盒子模型是CSS中最重要的概念之一,也叫框模型。一个盒子模型的基本组成如图15-1所示。,图15-1 盒子模型,15.2知识储备,15.2.2 盒子模型 1.内边距 CSS中,padding 属性定义元素边框与元素内容之间的空白区域。paddi
2、ng 属性接受长度值或百分比值,但不允许使用负值。例如,希望所有元素的各边都有 10 像素的内边距,只需如下规则: * padding: 10px; 这里的符号“*”是通用选择器,即所有的标记都选择,与DOS操作系统中通配符“*”作用相似。也可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值,例如: div padding: 5px 0.5em 0px 40%;,15.2知识储备,15.2.2 盒子模型 2.外边距 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位可以是像素、英寸、毫米或 em,百分数值甚至负值都可以。margin 还可以设置为 auto。当然,常见的做法是为外边距设置长度值。 例如:h1 margin : 10px 0px 15px 5px; 上例为 h1 元素的四个边分别定义了不同的外边距,所使用的长度单位是像素 (px) ,与内边距的设置相同,这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的。,15.2知识储备,1
3、5.2.2 盒子模型 3.外边距的合并 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。如图15-3所示。,图15-3 边距合并,15.2知识储备,15.2.2 盒子模型 3.外边距的合并 当元素发生嵌套时(这里内边距为0),内外元素的上下外边距也会发生合并。如图15-4所示。,图15-4 嵌套边距合并,15.2知识储备,15.2.3元素定位方法 1. float浮动定位 浮动定位(float)是CSS排版中最常用的手段,图片的浮动可以使文字环绕图片。浮动的元素仍然是网页流的一部分,常常通过对DIV元素应用float浮动来进行定位。 属性float的值可以设置为left、right或者默认值none。当设置了元素向左或者向右浮动时,元素会向其父元素的左侧或右侧靠紧。,15.2知识储备,15.2.3元素定位方法 2. position定位 CSS中通过position属性可以选择四种不同类型的定位: Static(无定位):元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。 Relative
4、(相对定位):元素框偏移一定距离。元素仍保持形状,它原本所占的位置保留。 Absolute(绝对定位):元素框从标准流删除,并相对于其包含块级元素定位。包含块级元素可以是文档中的另一个元素。元素原先在正常文档流中所占的位置会失去。元素定位后生成一个块级元素,无论定位之前是否是块级元素。 Fixed(相对于窗口的固定定位):表现类似于把 position 设置为absolute,固定在浏览器的某个位置。IE6不支持该属性。,15.2知识储备,15.2.3元素定位方法 2. position定位,图15-7 相对定位,图15-8 绝对定位,15.3 实践向导,任务15-1 手工代码草稿布局 通常在进行页面布局前,都会对页面的“盒子”摆放进行一个简单的规划,构筑基础的页面结构,然后再进行具体的设置和美化。在Dreamweaver中手工编写代码进行基础布局,是前端工作的基本功之一。对一个页面进行如图15-9所示的简单色块结构布局。,图15-9 草稿页面规划,15.3 实践向导,任务15-1 手工代码草稿布局 1.固定容器位置以及设置容器大小 body margin:0px; padding:0
《网页设计与制作项目实训教程 教学课件 ppt 作者 严加琼 曾金发 项目15》由会员E****分享,可在线阅读,更多相关《网页设计与制作项目实训教程 教学课件 ppt 作者 严加琼 曾金发 项目15》请在金锄头文库上搜索。
逍遥游复习 知识点整理
近现代法德关系史 高三展示课3稿
当代大学生人生信仰及追求的调查研究
长相思 纳兰性德-ppt课件
课件:危机意识 一
英语ppt演讲关于阿甘正传
发达国家基础教育改革的动向与趋势 修改版
中国民间美术 课件.ppt
生物质发电技术与系统 课程ppt 第1章 生物质发电技术现状及发展趋势 2学时 -----2016
现代信号处理思考题 含答案
执业药师继续教育 抑郁症的药物治疗 100分
小学生的成长档案模板不用修改 万能型
增订六版 现代汉语 上册 第二章文字 思考与练习答案
国家财政ppt课件
加拿大英语介绍
六年级统计图的选择课件
中学生成长档案ppt
中国现代文学史期末复习整理
lohi和hihilo训练对女子赛艇运动员运动能力影响的比较研究
风雨贾平凹阅读答案
2024-03-21 39页
2024-03-21 41页
2024-03-21 40页
2024-03-21 34页
2024-03-21 33页
2024-03-21 35页
2024-03-21 21页
2024-03-21 45页
2024-03-21 33页
2024-02-20 85页