Web前端技术项目式教程课件 任务三 使用DIV+CSS实现中华传统文化网站首页结构布局

Web前端技术项目式教程

（HTML5+CSS3+Flex+Bootstrap）任务三

使用DIV+CSS实现中国传统文化网站首页布局知识目标1熟悉CSS的基本语法规则。2熟悉盒模型的基本原理。3了解CSS的层叠和继承。能力目标1掌握使用CSS选择器获取网页元素。2掌握使用CSS盒模型、区块、浮动、定位等设计网页布局。素质目标1培养学生对中华优秀传统文化的深刻理解和认同。2培养学生具有良好的职业道德，根据《中华人民共和国网络安全法》制作发布网页信息。思维导图任务描述李明编写完中华传统文化网站首页的HTML代码后，需要对网页进行美化。他使用的“装饰工具”是CSS。本任务的具体要求是使用CSS对中华传统文化网站首页内容进行定位。知识引入1.CSS规则基本语法2.CSS选择器3.CSS基本语法规则的应用方式4.CSS的层叠和继承5.CSS盒子模型6.CSS盒子的定位机制7.DIV+CSS布局剖析

1.CSS规则基本语法CSS规则由两个主要的部分构成：选择器以及一条或多条声明。其中，选择器是连接HTML元素与样式之间的纽带，它规定了样式作用在哪个HTML元素上。每条声明由一个属性和一个属性值组成，属性和属性值被冒号分开，以分号结束。

2.CSS选择器CSS选择器分为基本选择器和高级选择器。（1）基本选择器基本选择器分为标签选择器、类选择器和ID选择器。（2）高级选择器高级选择器分为子选择器、后代选择器、属性选择器、通用选择器、伪类和伪元素选择器、分组选择器。

3.CSS规则的应用方式在HTML文档中使用CSS的方法分为外部样式、内部样式和行内样式。

3.CSS规则的应用方式（1）外部样式当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，开发者可以通过改变一个文件来改变整个站点的外观。每个页面均使用<link>标签链接到样式表。3.CSS规则的应用方式（2）内部样式当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表。3.CSS规则的应用方式（3）行内样式行内样式就是直接把CSS代码添加到HTML的标记中，即作为HTML标记的属性标记存在。由于要将内容和表现混杂在一起，行内样式会失去CSS的许多优势。尽量不要使用这种方法。4.CSS的层叠和继承（1）层叠两个或两个以上的CSS规则同时叠加在同一个元素上时，CSS样式会产生冲突。层叠特性可以简单地理解为＂冲突＂的解决方案。换句话说就是应该优先使用哪个样式。4.CSS的层叠和继承（2）继承CSS继承指的是子标签会继承父标签的所有样式风格，并可以在父标签样式风格的基础上再加以修改，产生新的样式，而子标签的样式风格完全不影响父标签。5.CSS盒子模型（1）盒子模型每一个盒子都有一个内容区域（如:文本、图片等）和可选的环绕着内容的内边距（padding）、边框（border）和外边距（margin）。padding、border和margin都是有四个方向的。四个方向的顺序分别是上、右、下、左。5.CSS盒子模型（1）盒子模型每一个盒子都有一个内容区域（如:文本、图片等）和可选的环绕着内容的内边距（padding）、边框（border）和外边距（margin）。padding、border和margin都是有四个方向的。四个方向的顺序分别是上、右、下、左。5.CSS盒子模型6.CSS盒子的定位机制CSS中有3种基本定位机制：普通文档流、浮动和定位。所有的盒子默认都是在普通文档流中定位的。（1）普通文档流普通文档流中框的位置由其在HTML中的位置决定。块级盒子从上到下依次排列，行内盒子在一行中水平排列。6.CSS盒子的定位机制（2）浮动浮动的盒子不在文档的普通流中，可以向左或向右移动，直到它的外边缘碰到包含它的盒子或另一个浮动盒子的边框为止。因为它不再处于普通文档流中，所以它不占据空间。6.CSS盒子的定位机制（3）定位position属性的取值范围是：static|relative|absolute|fixed。每个取值的含义如下。①static：默认的属性值，该盒子按照标准流（包括浮动方式）进行布局。②relative：相对定位，使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离到达新的位置。它原来占据的位置仍然保留。7.DIV+CSS布局剖析目前互联网上常见的网页布局分为固定宽度布局和自适应宽度布局两类。固定宽度的网页不会随着显示终端屏幕尺寸的变化而变化。而自适应的布局能够根据浏览器窗口的大小，自动改变其宽度或高度值。任务实现：使用DIV+CSS定位中国传统文化网站首页1.新建CSS样式表文件，应用到网页中2.基础样式设置3.头部布局与定位4.主体内容.main_top区域布局与定位5.主体内容.main_middle区域布局与定位6.主体内容.main_bottom区域布局与定位7.页脚区域布局与定位任务拓展

请大家根据效果图，使用CSS实现中国传统文化网站二级页面“传统建筑”的布局结