网页设计与制作项目式教程（HTML+CSS）课件06.制作“著名诗人”模块

网页设计与制作项目式教程（HTML+CSS）功能模块类网站开发项目——“古诗词”网站页面模块的实现“古诗词”网站页面模块的实现我国传统文化博大精深、源远流长，蕴含着极其丰富而宝贵的精神财富，传承和弘扬中华优秀传统文化一直是教育领域的热点。最近，学校国风社团负责人阿文找到小丁，希望他能够帮忙制作一个“古诗词”网站，提高同学们对传统文化的学习兴趣。小丁充分了解了社团的需求，分析了网站需要的功能模块，他和团队的小伙伴将在工作室老师和企业专家的指导下学习制作该网站的功能模块。情景导入任务3.1创建“古诗词”网站项目项目实施任务分析小丁分配到的任务是制作“古诗词”网站中的“著名诗人”“诗词推荐”“诗文释义”“诗人简历”模块。在制作之前，小丁需要做一些准备工作，根据网站开发需求以及UI设计师提供的素材，创建网站项目，项目信息如表3-1所‍示。表3-1项目信息项目名称古诗词网站模块“著名诗人”模块（poet.html）、“诗词推荐”模块（commend.html）、“诗文释义”模块（translate.html）、“诗人简历”模块（introduce.html）资源目录样式表目录（css）、图片目录（img）项目实施操作实施1.新建网站项目在开发软件HBuilderX中新建“古诗词”网站项目，具体步骤如下：（1）打开开发软件HBuilderX，选择“文件”菜单中的“新建”→“项目”命令。任务3.1创建“古诗词”网站项目项目实施操作实施1.新建网站项目（2）在“选择模板”区域中选择“基本HTML项目”，填写项目名称“古诗词”，设置存储位置。任务3.1创建“古诗词”网站项目项目实施操作实施2.网站资源管理根据网站资源需求新建目录和文件，基于模板基础，在“古诗词”根目录上右击，选择“新建”→“目录”和“新建”→“html文件”命令，建立commend.html、introduce.html、poet.html、translate.html文件。注意：要将素材文件夹中的图片文件复制到img文件夹‍内。任务3.1创建“古诗词”网站项目任务3.2制作“著名诗人”模块项目实施任务分析““著名诗人”模块效果图项目实施任务分析分析页面的框架结构，其框架结构图及主要设置如下：任务3.2制作“著名诗人”模块知识储备知识导图根据任务分析，在之前掌握知识的基础上，完成本任务还需要学习的主要知识点有CSS选择器基础、盒子模型基础和浮动布局，知识导图如图所示。任务3.2制作“著名诗人”模块知识储备新知学习1：CSS选择器基础CSS选择器是用于选择应用样式的HTML元素的一种模式，通过CSS选择器，我们可以对页面中的元素进行样式设置。CSS选择器主要分为以下几类：基本选择器、属性选择器、伪类选择器、组合选择器和伪元素选择器。这里将介绍基本选择器中的标签选择器、类选择器、id选择器和群组选择‍器。任务3.2制作“著名诗人”模块知识储备标签选择器是最简单的选择器，选择器通常是某个HTML元素，如p元素、td元素等，甚至可以是HTML本‍身。语法：标签名{属性1:属性值1；属性2:属性值2；属性3:属性值3；……}举例：任务3.2制作“著名诗人”模块新知学习1：CSS选择器基础知识储备类选择器可以为指定class的HTML元素设置样‍式。在HTML元素中，class属性的值不具有唯一性，可以使用class属性为一个或多个元素添加相同的样式。语法：类名{属性1:属性值1；属性2:属性值2；属性3:属性值3；……}举例：任务3.2制作“著名诗人”模块新知学习1：CSS选择器基础知识储备id选择器通过HTML元素的id属性来选取元素。每个HTML元素只能有一个id属性，且该属性的值在整个文档中必须是唯一‍的。语法：id名{属性1:属性值1；属性2:属性值2；属性3:属性值3；……}举例：任务3.2制作“著名诗人”模块新知学习1：CSS选择器基础知识储备群组选择器是由逗号分隔的选择器列表，是一种将多个选择器组合在一起，应用相同样式的选择器。我们可以在群组选择器中同时包含类选择器、id选择器、元素选择器等，用逗号分开，从而选择多个元素同时应用相同的样‍式。例如<h1>、<h2>和<p>标签均应用了相同的字体和颜色样式，可以使用以下代码：任务3.2制作“著名诗人”模块新知学习1：CSS选择器基础知识储备新知学习2：盒子模型基础盒子模型是CSS布局的基础，它描述了HTML元素在页面上的显示方式。了解盒子模型有助于我们更好地掌握CSS布局技‍巧。1．盒子模型的概念盒子模型是一个矩形的容器，用于存放HTML元素。每个HTML元素都可以看作一个盒子，而这个盒子由4个部分组成：内容区、内边距、边框和外边距。任务3.2制作“著名诗人”模块知识储备（1）内容区（content）。内容区是盒子中承载HTML元素内容的矩形区域。（2）内边距（padding）。内边距是盒子与边框之间的空白区域。（3）边框（border）。边框是盒子的4条线，用于分隔内容区和内边距。（4）外边距（margin）。外边距是盒子与盒子之间的空白区域。任务3.2制作“著名诗人”模块新知学习2：盒子模型基础知识储备（1）content常用属性。元素中所有的子元素和文本内容都排列在内容区中，可以使用width和height属性来控制内容区大小。content常用属性如表3-2所‍示。表3-2content常用属性任务3.2制作“著名诗人”模块新知学习2：盒子模型基础属性描述height用于设置内容区的高度width用于设置内容区的宽度知识储备（2）padding常用属性。元素的内边距在边框和内容区之间，padding常用属性如表3-3所‍示。表3-3padding常用属性任务3.2制作“著名诗人”模块新知学习2：盒子模型基础属性描述padding-top定义元素的上内边距padding-right定义元素的右内边距padding-bottom定义元素的下内边距padding-left定义元素的左内边距Padding用一个声明定义所有内边距属性知识储备（3）margin常用属性。外边距定义元素之间的空间，简单来说，如果将网页中的每个元素看成一个个盒子，外边距就是盒子与盒子之间的距离。margin常用属性如表3-4所‍示。表3-4margin常用属性任务3.2制作“著名诗人”模块新知学习2：盒子模型基础属性描述margin-top定义元素的上外边距margin-right定义元素的右外边距margin-bottom定义元素的下外边距margin-left定义元素的左外边距margin用一个声明定义所有外边距属性知识储备（4）border常用属性。边框可以是围绕内容和内边距的一条或者多条线，对于这些线条，可以设置它们的样式、宽度及颜色。border常用属性如表3-5所‍示。表3-5border常用属性任务3.2制作“著名诗人”模块新知学习2：盒子模型基础知识储备任务3.2制作“著名诗人”模块新知学习2：盒子模型基础表3-5border常用属性知识储备1．网页文档流的概念网页文档流是指网页中所有元素的排列方式，包括文本、图像、表格、列表等。这些元素按照一定的规则排列，以便用户可以轻松地阅读和理解页面内容。网页文档流包含标准文档流、浮动文档流和定位文档流三种，其中浮动文档流和定位文档流也可以统称为脱离文档‍流。任务3.2制作“著名诗人”模块新知学习3：浮动布局知识储备2．浮动布局的概念浮动布局是一种基于CSS的网页布局方式，常用于实现文本环绕图片、对齐导航菜单等效果。在浮动布局中，元素的位置由它在HTML文档流中的位置决定，而不是由CSS样式决定。这意味着，当一个元素浮动后，它会脱离正常的文档流，不再占据空间，浮在其他元素之上。其他元素会围绕在浮动元素周围，形成一个新的布局结‍构。浮动布局通过设置元素的float属性来实现，可设置向左或向右浮动。任务3.2制作“著名诗人”模块新知学习3：浮动布局知识储备3．浮动布局的优点（1）布局简单：浮动布局可以轻松地实现文本环绕图片、对齐导航菜单等效‍果。（2）兼容性好：大多数浏览器都能支持浮动布局，不需要额外的兼容性处‍理。（3）灵活性高：通过调整浮动的方向和顺序，可以实现多种复杂的布局效‍果。4．浮动布局的缺点（1）高度塌陷问题：当两个浮动元素在同一行时，它们的高度会塌陷，导致布局混‍乱。（2）清除浮动问题：当页面中有多个浮动元素时，需要使用clear属性来清除浮动，否则可能会导致高度塌陷等问‍题。（3）不易维护：由于浮动元素脱离了正常的文档流，与其他元素的关系不清晰，因此需要仔细考虑浮动元素的顺序和清除浮动问题，否则可能会导致布局混‍乱。任务3.2制作“著名诗人”模块新知学习3：浮动布局知识储备5．浮动float浮动属性float是CSS网页布局的“利器”，我们可以通过不同的浮动属性值灵活地定位div元素，以达到布局网页的目的,我们可以通过float属性使元素向左或向右浮动。语法：float:取值;表3-6float属性常用值任务3.2制作“著名诗人”模块新知学习3：浮动布局属性值描述left元素向左浮动right元素向右浮动知识储备6．清除浮动clear在CSS中，清除浮动都是在定义浮动的元素之后设置‍的。语法：clear:取值;表3-7clear属性常用值任务3.2制作“著