第4章 使用CSS布局网页

《第4章 使用CSS布局网页》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、网站建设技术——第4章使用CSS布局网页内容概述01教学目标02实验04知识点讲解03本章通过具体案例，详细地介绍了CSS语言的基础知识。内容主要包括添加样式表的方法、CSS选择器的设置方法、盒子模型、文字、颜色和背景的设置方法以及多种页面布局的设置方法等。BACKNEXTPREV掌握添加CSS样式的方法；掌握设置CSS选择器的方法；掌握盒子模型的设置方法；掌握盒子的浮动和定位的设置方法；掌握文字、颜色和背景的设置方法；掌握页面布局的方法。二、教学目标BACKNEXTPREV4.1使用CSS样式设计页面使用CSS样式设计“

2、网页设计教学”页面，页面效果如图所示。三、知识点讲解BACKNEXTPREV4.2知识解析4.2.1CSS基础一、Web标准二、XHTML三、DOCTYPE声明四、CSS简介三、知识点讲解BACKNEXTPREV五、添加CSS的方法嵌入样式表内嵌样式表链接外部CSS样式表（外部样式）六、CSS选择器选择器类型CSS的继承性注释三、知识点讲解BACKNEXTPREV七、div和span网页元素可以分为行内元素和块级元素两种添加起始标记。示例如下图所示。三、知识点讲解BACKNEXTPREV教师演示操作过程4.2.2盒子模型盒

3、子模型(BoxModel)是CSS中一个很重要的概念。它是用来描述一个元素是如何组成的。三、知识点讲解BACKNEXTPREV浮动属性值4.2.3盒子的浮动与定位盒子的浮动属性floatfloat属性可以实现复杂页面的CSS布局。none：元素在水平方向会自动伸展。left:元素会向其父元素的左侧靠紧。right:元素就会向其父元素的右侧靠紧。BACKNEXTPREV盒子的定位属性positionposition属性可以实现页面元素的定位。它规定了四种定位方式，分别对应于position属性的值。1static:标准流布局

4、2absolute:绝对定位3relative:相对定位4fixed:固定定位BACKNEXTPREV4.2.4文字、颜色和背景一、文字在CSS中常见的字体(font)属性有以下几种：font-familyfont-sizefont-weightfont-stylefont-variant三、知识点讲解BACKNEXTPREV二、颜色color(颜色)属性值的设置方式有三种：十六进制值RGB码颜色名称三、背景在CSS中常见的背景(background)属性有以下几种：background-colorbackgroundd-

5、imagebackground-repeatbackground-attachmentbackground-position三、知识点讲解BACKNEXTPREV冻结布局css布局相对布局凝结物布局绝对布局流动布局BACKNEXTPREV4.4布局与排版15页面需求在素材页面中实现两栏布局页面布局锁定设置页面内容区显在浏览器的中间。CSS布局安庆美食网页面素材页面BACKNEXTPREV16页面分析在素材页面中采用流动布局并结合盒子浮动的设置来实现两栏布局采用冻结布局把页面布局锁定采用凝结物布局来解决。这种设计锁定了页面中

6、内容区的宽度，但它把内容区放到浏览器的中间CSS布局安庆美食网页面完成效果BACKNEXTPREV教师演示操作过程4.4综合案例——制作网上购物网站首页使用Div+CSS，布局“手机电子商城”网上购物网站首页。三、知识点讲解BACKNEXTPREV教师演示操作过程18实验目的与要求掌握运用CSS样式表进行页面布局的技术。实验内容运用CSS样式表布局为企业网站设计一个首页。实验四布局企业网站首页BACKNEXTPREV