网页设计与制作项目实训教程 教学课件 严加琼 曾金发 项目15.pdfVIP

《网页设计与制作项目实训教程》配套课件 项目15 项目15 使用CSS样式布局页面 使用CSS样式布局页面 《网页设计与制作项目实训教程》配套课件 项目描述 项目描述 知识储备 知识储备 实践向导 实践向导 项目小结 项目小结 能力拓展 能力拓展 退 出 退 出 15.1 项目描述 　　在学习CSS基础知识之后，进一步学习更高级 的CSS应用技能，使用CSS样式表进行网页布局。 本项目主要通过实例讲解CSS布局的手工编写和工 具运用，完成“海思教育”网站首页的草稿布局和首页 的布局美化。在最后一个任务中增加了CS6的流体网 格布局内容。 返 回 15.2 知识储备 15.2.1　常用布局标记 15.2.2　盒子模型 15.2.3　元素定位方法 15.2知识储备 15.2知识储备 15.2.1常用布局标记 1.块级元素  　　 表15-1 常见的块级元素(block element) div – 区块标记 center – 居中对齐块 h1 –h6 标题 hr - 水平分隔线 form - 交互表单 dl - 定义列表 menu - 菜单列表 p - 段落 pre - 格式化文本 ol – 有序列表 ul – 无序列表 table - 表格 15.2知识储备 15.2知识储备 15.2.1常用布局标记 2.行内元素　　 表15-2 常见的行内元素(inline element) span - 常用内联容器 img - 图片 b - 粗体 font - 字体设定 select - 项目选择 br - 换行 label - 表格标签 sub - 下标 input - 输入 框 strong - 粗体强调 u - 下划线 a - 锚点 textarea - 多行文本输入框 15.2知识储备 15.2知识储备 15.2.2 盒子模型  　　CSS 盒子模型是CSS中最重要的概念之一，也叫框模型。一个 盒子模型的基本组成如图15-1所示。