Web前端技术 课件 模块一 任务2 主页布局

主页布局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:颜色;一般情况下元素背景颜色默认值是transparent（透明），也可以手动指定背景颜色为某种颜色或透明色。其取值方式有3种：预定义的颜色值，就是颜色英文单词，例如black，white，green等。#+6位十六进制数，例如#FF0000，#123456，#DE32FA等，实际工作中，这种颜色表示法是最常用的。RGB代码，如rgb（red值，green值，blue值），每个值的范围是0~255，或者rgb（100%，50%，0%）。CSS样式：盒子模型延时符网页布局过程：先准备好相关的网页元素，网页元素基本都是盒子box。利用CSS设置好盒子样式，然后摆放到相应位置。往盒子里面装内容。网页布局的核心本质：就是利用CSS摆盒子。所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。CSS样式：边距延时符padding属性用于设置内边距，即边框与内容之间的距离，如果盒子有背景，padding部分也会填充背景。当我们给盒子指定padding值之后，发生了2件事情：(1) 内容和边框有了距离，添加了内边距。(2) padding影响了盒子实际大小。也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。margin属性用于设置外边距，即控制盒子和周边元素之间的距离。外边距可以让块级盒子水平居中，但是必须满足两个条件：(1) 盒子必须指定了宽度（width）。(2) 盒子左右的外边距都设置为auto。CSS样式：边框延时符border可以设置元素的边框。边框由三要素组成:边框宽度(粗细)边框样式边框颜色，语法如下：border:border-width||border-style||border-color例如border:1pxsolidred;表示设置1px粗细的红色实线边框，三个参数没有顺序要求。边框不同边可以分开写，如只设定上边框：border-top:1pxsolidred;其余同理。CSS样式：flex布局延时符flex是flexiblebox的缩写，意思为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当为父元素设置为flex布局后，所有子元素沿着弹性盒子主轴方向排列，默认主轴为水平。采用flex布局的元素成为flex容器（flexcontainer），它的所有子元素称为flex项目(flexitem)或flex元素。任务实施延时符结构分析样式分析设置页面样式页面结构结构分析延时符主页总体由头部、轮播图、主体、尾部4个部分组成，这四个部分是从上到下的结构，本任务最终以图片形式分别插入内容，除了主体外，其余以单张图片插入。样式分析1头部、轮播图、主体、尾部4个部分从上到下依次排列，符合文档流的特点，其中头部、轮播图、尾部的宽度跟屏幕等宽，这是<div>标签的特点之一，不需要进行设置。主体部分需要给定一个宽度，这里设置为1200px。