W前端技术基础开发概述4_第1页
W前端技术基础开发概述4_第2页
W前端技术基础开发概述4_第3页
W前端技术基础开发概述4_第4页
W前端技术基础开发概述4_第5页
已阅读5页，还剩49页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端开发技术基础任务2红色景点页面制作——盒子模型及使用CSS设置图像样式通关任务1制作“龙州起义纪念馆”页面AIGC赋能版📑目录01.任务描述02.任务目标03.任务实施任务描述盒子模型是CSS中重要的核心概念之一，是使用CSS控制页面元素外观和位置的基础。掌握盒子模型的规律和特征，能更好地实现网页中各元素的呈现效果。本任务将使用盒子模型制作红色景点页面中的“龙州起义纪念馆”页面，并通过CSS样式对其进行美化。任务描述任务目标1.理解盒子模型的概念。2.掌握盒子模型的相关属性。3.能够使用盒子模型完成“龙州起义纪念馆”页面的制作。图3-2-1“龙州起义纪念馆”页面效果任务实施——结构分析页面由<div>、<h1>、<p>和<span>标签进行搭建。其中，<div>标签包含了标题标签<h1>和段落标签<p>，标签<p>中包含标签<span>。“龙州起义纪念馆”放置在<span></span>标签对中。任务实施——构建HTML结构（1）创建站点并保存网页1）运行HBuilderX软件，选择“文件”→“新建”→“项目”命令，在弹出的对话框中选择“普通项目”，将项目名称命名为“chapter3-2”，单击“浏览”按钮，选择存放路径，勾选“基本HTML项目”复选框，单击“创建”按钮新建项目。2）将项目中的“index.html”文件重命名为“example01.html”。3）打开example01.html文件，在<title></title>标签对中输入文字“龙州起义纪念馆”，为网页设置文档标题。（

2）创建HTML主体结构图3-2-3代码及效果任务实施——构建HTML结构1）在<body></body>标签对中输入<div></div>标签对，作为页面主体内容的容器。2）在<div></div>标签对中添加<h1></h1>和<p></p>标签对，并输入文字。3）为<p></p>标签对中的段首文字“龙州起义纪念馆”添加<span></span>标签对，后面会对其样式进行设置。CSS样式分析图3-2-4龙州起义纪念馆CSS样式分析后的效果任务实施——CSS样式分析1）设置<div>宽度为880px、高度为350px，盒子水平方向居中，设置边框为3px的酒红色（#C40001）实线，圆角半径为20px。2）设置<h1>字体颜色为#333333，文字水平方向居中，下外边距为5px。3）设置<p>内边距为10px，字体为微软雅黑，字体大小为16px，首行缩进2个字符，行高为40px。4）设置“龙州起义纪念馆”文字颜色为酒红色（#C40001），字体大小为20px，字体加粗。设置div的样式任务实施——CSS样式添加图3-2-5设置div样式后的效果在<head></head>标签对中添加内部样式表<style></style>标签对，设置网页各元素样式。（

1）设置<h1>、<p>、段首文字“龙州起义纪念馆”的样式。任务实施——CSS样式添加图3-2-1“龙州起义纪念馆”页面效果Web前端开发技术基础

通关任务2制作“八路军桂林办事处纪念馆”页面AIGC赋能版📑目录01.任务描述02.任务目标04.知识宝典03.任务实施任务描述图像是网页中主要的元素之一。图像不但能够美化页面，而且与文本相比能够更直观地表达信息。图文混排的页面，能让网页变得更加生动和形象，可以提高浏览者查看网页的兴趣。本任务主要使用HTML中的盒子模型、图像标签<img>搭建红色景点二级页面中的“八路军桂林办事处纪念馆”页面，并通过CSS样式对其进行美化。任务描述任务目标1.掌握图像的基本样式设置方法。2.掌握图像和文本混排的方法。3.掌握元素浮动属性的运用，能为元素设置浮动，并清除浮动带来的不良影响。4.能够使用图像样式、浮动属性完成“八路军桂林办事处纪念馆”页面的制作。图3-2-6“八路军桂林办事处纪念馆”页面效果任务实施——结构分析“八路军桂林办事处纪念馆”页面包含标题和内容，分别使用<h2>标签和<div>标签。<div>标签里面包含图片（<img>标签）和文字（<p>标签）。任务实施——HTML结构搭建（1）创建站点并保存网页1）打开项目“chapter3-2”，在项目中新建.html文件，重命名为example02.html。

图3-2-7代码结构图3-2-6“八路军桂林办事处纪念馆”页面效果2）打开example02.html文件，在<title></title>标签对中输入标题“八路军桂林办事处纪念馆”。（

2）创建HTML结构图3-2-8“八路军桂林办事处纪念馆”页面的HTML代码及效果任务实施——构建HTML结构1）在<body></body>标签对中添加<h2></h2>标签对制作标题，添加<div></div>标签对添加页面内容。2）在<div></div>标签对中添加<img>标签插入图片，添加两个<p></p>标签对，分别设置类名为text1、text2，输入文字内容。3）给类名为text1的段首文字“八路军桂林办事处纪念馆”添加<span></span>标签对。任务实施——CSS样式分析1）设置<h2>的宽度为500px，盒子水平方向居中，文字居中对齐，底部边框为5px的酒红色（#C40001）实线，底部外边距为15px。2）设置<div>宽度为800px，高度为350px，水平方向居中，设置边框为3px的酒红色（#C40001）实线，左上角、右上角圆角半径为15px，设置div水平阴影为5px，垂直阴影为5px，模糊半径为5px，颜色为#ccc。3）设置图片向左浮动，上、下、左、右外边距为10px，圆角半径为20px，图片水平阴影为5px，垂直阴影为5px，模糊半径为5px，颜色为#ccc。4）设置类名为text1、text2的段落文字，左、右内边距为10px，字体为微软雅黑，文字大小为14px，首行缩进2个字符，行高28px。5）给类名为text2的段落文字清除左、右浮动带来的影响，设置文字背景颜色为灰色（#DCDCDC），上外边距为30px。6）设置“八路军桂林办事处纪念馆”文字颜色为酒红色（#C40001），文字大小为18px，字体加粗。CSS样式分析任务实施——CSS样式添加图3-2-9设置h2和div样式后的效果在<head></head>标签对中添加内部样式表<style></style>标签对，设置网页各元素样式。1.设置<h2>、<div>的样式任务实施——CSS样式添加图3-2-9设置h2和div样式后的效果2.设置<img>的样式4.设置<h1>、<p>、段首文字“龙州起义纪念馆”的样式。任务实施——CSS样式添加图3-2-1“龙州起义纪念馆”页面效果任务实施——CSS样式添加图3-2-12设置类名为text1text2段落文字样式后的效果5.设置text1、text2段落文字的样式任务实施——CSS样式添加图3-2-6“八路军桂林办事处纪念馆”页面效果6.设置“八路军桂林办事处纪念馆”文字的样式知识宝典-——盒子模型HTML的盒子模型（BoxModel）是CSS布局的基础，决定了元素如何在页面上渲染以及它们之间如何进行交互。每个HTML元素都可以看作是由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成的矩形盒子。盒子模型为HTML元素的布局和样式提供了强大的控制手段，使得开发人员能够轻松地实现各种复杂的页面效果。同时，理解盒子模型也是掌握CSS布局和样式的基础。1.盒子模型的概念一个标准的W3C盒子模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）这4个属性组成。图3-2-13标准的W3C盒子模型组成知识宝典-——盒子模型2.盒子模型的类型及转换在CSS中，根据计算方式的不同，盒子模型分为标准盒模型和IE盒模型。在标准盒模型中width和height指的是内容区域（content）的宽度和高度，不是盒子的实际大小；在IE盒模型中，width和height指的是内容区域+border+padding的宽度和高度。表3-2-2 盒子模型的分类、说明和计算公式知识宝典-——盒子模型使用box-sizing属性可以将盒子模型由默认的标准盒模型转换为IE盒模型（怪异盒模型）。IE盒模型可以更方便地指定盒子的自身尺寸，省去计算。知识宝典-——盒子模型3.盒子模型的相关属性1）边框（border）属性在网页中，表格、段落、图片都可以设置边框样式。要设置一个元素的边框，必须设置以下3个方面：边框的宽度、边框的线、边框的颜色。边框有4条，每条边框都可以独立设置，如“border_x0002_top:上边框宽度上边框样式上边框颜色”；若4条边框的属性值一样，则可简写为“border:边框宽度边框样式边框颜色”。表3-2-3盒子模型border属性值举例及效果知识宝典-——盒子模型3.盒子模型的相关属性2）圆角边框（border-radius）属性CSS3中新增的border-radius属性用于设置圆角边框。设置圆角半径时，可以分别为4个角设置不同的圆角半径值。语法格式为“border_x0002_radius：圆角半径”。表3-2-4盒子模型border-radius属性值举例及效果知识宝典-——盒子模型3.盒子模型的相关属性3）内边距（padding）属性padding属性用于设置盒子中内容与边框之间的距离，可通过padding-top、padding-right、padding-bottom、padding-left分别设置上内边距、右内边距、下内边距、左内边距，也可通过padding综合设置4个方向的内边距。语法格式为“padding:像素值”。表3-2-5盒子模型padding属性值举例及效果以上可以简写为：padding：20px、5px、10px、30px;代表的方向为：上、右、下、左。知识宝典-——盒子模型3.盒子模型的相关属性4）外边距（margin）属性外边距用于设置盒子与其他盒子之间的距离，可通过margin-top、margin-right、margin-bottom、margin-left分别设置上外边距、右外边距、下外边距、左外边距，也可通过marging综合设置4个方向的外边距，其属性值的设置与padding相似。表3-2-6 盒子模型margin属性值举例及效果知识宝典-——盒子模型3.盒子模型的相关属性5）盒子阴影（box-shadow）属性box-shadow属性用于给盒子添加周边阴影效果。语法格式为“box-shadow:h-shadow（x轴偏移量）v-shadow（y轴偏移量）blur（模糊半径）spread（阴影大小）color（颜色）inset（阴影类型）”。表3-2-7 box-shadow属性值及说明表3-2-8 盒子模型box-shadow属性值举例及效果知识宝典-——盒子的浮动1）浮动属性。元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到指定位置。在CSS中，通过float属性设置左浮动或右浮动，语法格式为“float:属性值;”。表3-2-9 float属性值及说明表3-2-10 盒子模型float属性值举例及效果知识宝典-——盒子的浮动2）清除浮动。当为一个元素设置了浮动属性后，它会脱离正常的文档流，导致其后的元素受到浮动元素的影响而发生位置变化。为了使浮动元素下方的元素不再受浮动元素的影响，可为下方元素设置clear属性，使其正常显示在浮动元素的下方。表3-2-11 clear属性值及说明clear属性主要用于清除浮动，应用于需要清除浮动影响的元素，它规定了元素的哪一侧不允许出现其他浮动元素。语法格式为“选择器{clear:属性值}”。知识宝典-——盒子的浮动为box1、box2设置向左浮动后，box1、box2脱离文档流，box3向上移动，占用了box1、box2原来文档流的位置，此时box3的一部分被box1、box2遮挡。若想让box3正常显示在box1、box2的下方，则需要给box3设置清除浮动，使其不受box1、box2浮动带来的影响。

表3-2-12 清除浮动举例及效果Web前端开发技术基础

通关任务3制作“李明瑞、韦拔群革命烈士纪念馆”页面AIGC赋能版📑目录01.任务描述02.任务目标04.知识宝典03.任务实施任务描述在HTML中，背景图像对于网页设计和用户体验具有重要的意义。为背景元素添加图像，可以增加网页的视觉吸引力，提高用户的阅读体验，并有助于传达网页的主题和信息。本任务主要使用HTML中的盒子模型、图像标签、文字标签搭建红色景点二级页面中的“李明瑞、韦拔群烈士纪念馆”页面，并通过CSS样式对其进行美化。任务描述任务目标1.掌握页面插入图像、添加背景图像的方法。2.掌握背景图像基本样式的设置方法。3.掌握图像和文本混排编辑的方法。4.掌握页面背景的设置方法。5.能够利用盒子模型、背景图像样式等完成“李明瑞、韦拔群烈士纪念馆”页面的制作。图3-2-16“李明瑞、韦拔群革命烈士纪念馆”页面最终效果任务实施——结构分析“李明瑞、韦拔群烈士纪念馆”页面包含标题和内容，分别使用<h2>标签和<div>标签。<div>标签里面包含图片和文字两部分内容。任务实施——HTML结构搭建（1）创建站点并保存网页1）打开项目“chapter3-2”，在项目中新建.html文件，重命名为example03.html。2）打开example03.html文件，在<title></title>标签对中输入标题“李明瑞、韦拔群烈士纪念馆”。（

2）创建HTML结构图3-2-8“李明瑞、韦拔群烈士纪念馆”页面的HTML代码及效果任务实施——构建HTML结构1）在<body></body>标签对中输入<h1></h1>、<div></div>标签对，作为栏目的标题和内容的容器。2）在<div></div>标签对中添加<img></img>和<p></p>标签对以插入图片，输入对应文字。任务实施——CSS样式分析1）设置<body>内、外边距为0，页面文字大小为16px，页面背景颜色为淡黄色（#f5f5dc）。2）设置<h1>的内边距为10px，文字水平居中对齐，设置标题在页面水平居中。3）设置<div>宽度为960px，上下外边距为10px，水平方向居中，内边距为20px，设置边框为2px的淡黄（#daa520）实线，设置背景颜色为白色（#fff），在右下角插入背景图片，不重复。4）设置<div>中的图片宽度为290px，高度为250px，向左浮动，右外边距为20px，设置边框为3px的棕色（#AC724A）实线，圆角半径为15px。5）设置<div>中的段落文字<p>，上外边距为10px，首行缩进2个字符，行高为35px。CSS样式分析任务实施——CSS样式添加图3-2-18添加页面、h1和div样式后的效果在<head></head>标签对中添加内部样式表<style></style>标签对，设置网页各元素样式。1.设置<body>、<h1>、<div>的样式任务实施——CSS样式添加图3-2-16“李明瑞、韦拔群革命烈士纪念馆”页面最终效果2.设置<div>中的图片、段落文字<p>样式知识宝典-——图像样式网页能通过背景颜色或背景图像给人留下深刻的第一印象，如节日题材的网站一般采用应景的图片来营造节日氛围，所以在网页设计中，控制背景颜色和背景图像是很重要的。设置背景颜色或背景图像时可使用综合属性background设置与背景相关的参数。1.背景颜色样式在CSS中，使用background-color属性来定义元素的背景颜色。语法格式为“background_x0002_color:颜色值”。表3-2-13 background-color属性举例及效果知识宝典-——图像样式知识拓展：背景图像渐变效果CSS渐变主要分为两种类型：线性渐变（LinearGradients）和径向渐变（RadialGradients），下面重点介绍线性渐变（LinearGradients）。线性渐变（LinearGradients）沿着一条直线（或称为渐变线）创建颜色过渡。这条线由渐变的方向和角度定义。在CSS中，使用linear-gradient()函数来创建线性渐变，语法格式为“background:linear-gradient（渐变角度,颜色值1，颜色值2，…，颜色值n）”。知识宝典-——图像样式2.背景颜色样式background-image属性是控制元素的必选属性，定义了图像的来源。与HTML的<img>标签一样，必须定义图像的来源途径，图像才能显示。语法格式为“background-image:url（"图像地址"）”。表3-2-16 background-image属性举例及效果1）background-image（背景图像）属性知识宝典-——图像样式1.背景颜色样式background-repeat属性定义背景图像的显示方式，如是否平铺和如何平铺。语法格式为“background-repeat:属性值”。2）background-repeat（背景图像平铺）属性属性值说明repeat默认值。表示在水平方向（x轴）和垂直方向（y轴）同时平铺repeat-x表示在水平方向（x轴）平铺repeat-y表示在垂直方向（y轴）平铺no-repeat表示不平铺表3-2-17 background-repeat属性及说明表3-2-18 background-repeat属性举例及效果知识宝典-——图像样式1.背景颜色样式background-position属性设置背景图像的起始位置。语法格式为“background-position:属性值”3）background-position（背景图像位置）属性表3-2-19 background-position属性及描述表3-2-20 background-position属性举例及效果“background-position:leftbottom;”表示背景图像相对于该元素的水平方向位置是left，垂直方向位置是bottom。知识宝典-——图像样式2.背景图像样式在CSS中，background-attachment属性可以设置背景图像是随对象滚动的还是固定不动的。语法格式为“background-attachment:属性值”。4）background-attachment（背景图像固定）属性表3-2-21 background-attachment属性及说明知识宝典-——图像样式3.background（综合设置背景）属性在CSS中，background属性可以同时设置所有的背景属性。语法格式为“background:背景属性”。表3-2-21 background-attachment属性及说明说明：背景属性可选择background-color、background-image、background-position、background-repeat、background-attachment。Web前端开发技术基础晋级任务

制作红色景点展示页面AIGC赋能版任务要求综合应用盒子模型、图像样式完成红色景点展示页面。任务要求图3-2-19晋级任务页面效果制作要点提示1.HTML结构搭建操作要点1）结构分为页面头部<header>、中间主体<main>和页面尾部<footer>三部分。2）页面头部<header>包括banner部分，用

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论