人民大2024Web前端技术-PPT模块一 任务2 主页布局.pptx

主页布局Web前端技术主讲老师：***延时符

CONTENTS目录01任务描述03知识点导图02学习目标04相关知识05任务实施延时符

任务描述延时符

任务描述在学会了创建项目和文件后，我们开始要正式创建和制作主页。在上个任务的主页效果图片引导下，按照实际项目开发的流程，进行主页布局，先把主页划分为几个区域，用局部图片拼接把整个页面效果呈现，后期再分别完成每一个区域块的内容结构和样式添加。延时符

页面效果图延时符

学习目标延时符

学习目标掌握CSS样式通配符选择器和类选择器的使用方法；掌握CSS弹性布局flex相关属性的设置方法；掌握CSS背景颜色样式background-color、border属性的设置方法。知识目标能够根据效果图使用合理标签进行页面结构搭建；能为页面添加内部CSS样式；能够根据需求正确使用类选择器进行样式添加；技能目标延时符培养细致、认真的工作态度；培养与他人合作沟通的能力；培养善于思考、敢于提问的精神。素养目标

知识点导图延时符

知识点导图延时符

相关知识延时符注释图像标签类选择器通配符选择器盒子模型Flex布局

HTML标签：注释延时符如果需要在HTML文档中添加一些便于阅读和理解，但又不需要显示在页面中的文字，就需要使用注释标签。HTML中的注释语法如下：!--注释语句--也可以选择需要改为注释的行，按快捷键:ctrl+/，将已有文字或代码改为注释，添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。

添加图像，使用imgsrc=”图像URL”/方法，本次任务中需要根据实际需求调整图像的大小，需要用到图像的宽度和高度属性width和height。默认情况下，如果不给img/标签设置宽高属性，图像就会以原始尺寸显示，如若需要也可以通过width属性和height属性，定义图像的大小。通常宽和高只需要设置一个，另一个会根据图像原来的宽高比例自动调整。如果同时设置宽高值，会引起图像的宽高比例不对，从而图片变形。HTML标签：图像标签延时符

html5新标签在html5中增加了一些有语义的新标签，合理的使用这些标签可以使页面代码更清晰，可访问性更好，搜索引擎更优。这些标签都是双标签，具体的含义如下：header：定义文档或区块的页眉，通常包含标题、导航和其他相关信息。main：定义文档的主要内容，一个页面中只能包含一个main元素。footer：定义文档或区块的页脚，通常包含版权信息、联系方式等内容。延时符nav：section：定义文档的一个独立节或区块，用于组织相关的内容。article：定义导航链接的容器，用于包裹网站的导航部分。定义一个独立的、完整的、可以独自分发或独立引用的内容块，如博客文章、新闻报道等。aside：定义页面或区块的侧边栏或附属信息，通常用于显示相关的内容或广告。

CSS样式：类选择器延时符为页面内容添加样式，需要通过选择器选中相应的标签。选择器分为基础选择器和复合选择器两个大类。本任务先介绍基础选择器。基础选择器是由单个选择器组成的，包括：标签选择器、类选择器、id选择器和通配符选择器。如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。基本语法如下：类选择器视频讲解.类名{属性1:属性值1;属性2:属性值2;...}在CSS中类选择器使用“.”（英文点号）进行标识，类名是用户命名的，命名时不要使用纯数字、中文等命名，应使用英文字母来表示，命名要有意义，尽量使别人一眼就知道这个类名的目的。类选择器是开发中最常用的。类选择器定义好样式后，在HTML中以标签的class属性表示。可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签.简单理解就是一个标签有多个名字。在标签class属性中写多个，这个标签就可以分别具有这些类名的样式。如：divclass=“greenpink”多样式应用/div。多个类名中间必须用空格分开

CSS样式：通配符选择器延时符在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。基本语法如下：*{属性1:属性值1;属性2:属性值2;...}通配符选择器不需要调用，自动就给所有的元素使用样式，本任务中是用于清除所有的元素标签的内外边距，这也是通配符选择器使用最多的场景。*{margin:0;padding:0;}

CSS样式：背景颜色延时符background-color属性定义了元素的背景颜色。基本语法如下：background-color:颜色;一般情况下元素背景颜色默认值是transparen