W前端技术基础开发概述16

Web前端开发技术基础任务

首页制作AIGC赋能版项目5规划页面布局（综合案例）——首页任务要求任务要求图5-1-1首页效果本任务应用HTML标签和CSS样式完成红色文化资源网首页的制作，红色文化资源网首页由页头、页中、页尾三大模块构成。页头包括Logo和导航栏，页中根据首页效果图分为4个栏目，分别为“新闻动态”“景点·胜迹”“红色英雄”“关于我们”。制作要点提示1.新建站点、链接样式1）运行HBuilderX软件，选择“文件”→“新建”→“项目”命令，在弹出的对话框中选择“普通项目”，将项目命名为“chapter5”，单击“浏览”按钮，选择存放路径，勾选“基本HTML项目”，单击“创建”按钮新建项目。2）将项目中的“index.html”文件重命名为“example01.html”。3）打开example01.html文件，在<title></title>标签对中输入标题文字“首页”。4）将图片素材放入项目的img文件夹中。5）在CSS文件夹中新建.css文件，命名为“example01.css”，在HTML页面中链接example01.css文件。制作要点提示2.制作整体结构布局（1）搭建HTML结构1）将页面主体结构划分为页面头部<header>、中间主体<main>、页面尾部<footer>三大模块。2）将中间主体<main>分为4个部分，分别为“新闻动态”“景点·胜迹”“红色英雄”“关于我们”，使用<section></section>标签对作为盒子容器，分别设置类名为“xwdt”“jdsj”“hsyx”“gywm”。制作要点提示2.制作整体结构布局（2）CSS样式美化设置中间主体<main>样式。3.制作页头模块页头栏目的HTML结构和CSS样式美化此处不再介绍。制作要点提示4.制作新闻动态栏目（1）页面结构分析新闻动态栏目主要包含3个内容，分别为标题、新闻列表、新闻主图。制作要点提示4.制作新闻动态栏目（2）搭建HTML结构1）在类名为“xwdt”的<section></section>标签对中添加1个<h2></h2>标签对，作为栏目标题，并输入“新闻动态”文字信息。2）在<h2></h2>标签对后添加1个<ul></ul>标签对，作为新闻列表的容器，根据效果图，新闻列表一共有4个，在<ul></ul>标签对中添加4个<li></li>标签对，作为新闻列表项，在每一个<li></li>标签对中添加<a></a>标签对，并输入文字信息。3）在<ul></ul>标签对后添加1个<div></div>标签对，作为新闻主图的容器，在<div></div>标签对中添加1个<img>标签，并设置好图片的路径。制作要点提示4.制作新闻动态栏目（2）搭建HTML结构1）在类名为“xwdt”的<section></section>标签对中添加1个<h2></h2>标签对，作为栏目标题，并输入“新闻动态”文字信息。2）在<h2></h2>标签对后添加1个<ul></ul>标签对，作为新闻列表的容器，根据效果图，新闻列表一共有4个，在<ul></ul>标签对中添加4个<li></li>标签对，作为新闻列表项，在每一个<li></li>标签对中添加<a></a>标签对，并输入文字信息。3）在<ul></ul>标签对后添加1个<div></div>标签对，作为新闻主图的容器，在<div></div>标签对中添加1个<img>标签，并设置好图片的路径。制作要点提示4.制作新闻动态栏目（3）CSS样式美化1）设置新闻动态栏目的盒子样式。设置类名为“xwdt”的盒子样式，高度为300px，上外边距为30px，上边框为5px的红色实线制作要点提示4.制作新闻动态栏目（3）CSS样式美化2）设置新闻动态栏目中标题的样式。设置类名为“xwdt”的元素中<h2>的样式，外边距为10px，文字颜色为#c400013）设置新闻动态栏目中<ul>的样式。设置类名为“xwdt”的元素中<ul>的样式为左浮动。制作要点提示4.制作新闻动态栏目（3）CSS样式美化4）设置新闻动态栏目中<li>的样式。设置类名为“xwdt”的元素中<li>的样式，外边距为10px，下内边距20px，下边框为1px的红色实线，文字大小16px，文字加粗。制作要点提示4.制作新闻动态栏目（3）CSS样式美化5）设置新闻动态栏目中新闻主图<div>盒子的样式。设置类名为“xwdt”的元素中<div>的样式为左浮动。6）设置新闻动态栏目中<img>的样式。设置类名为“xwdt”的元素中<img>的样式，宽度为380px。制作要点提示5.制作景点·胜迹栏目（1）页面结构分析景点·胜迹栏目主要包含了标题和胜迹图片列表。制作要点提示5.制作景点·胜迹栏目（2）搭建HTML结构1）在类名为“jdsj”的<section></section>标签对中添加1个<h2></h2>标签对，作为栏目标题，并输入“景点·胜迹”文字信息。2）在<h2></h2>标签对后添加1个<ul></ul>标签对，作为景点·胜迹图片列表的容器，根据效果图，一共有4个胜迹图片，在<ul></ul>标签对中添加4个<li></li>标签对，在每一个<li></li>标签对中添加1个<img>标签，并设置好图片的路径，在<img>标签后添加<p></p>标签对，并输入对应的文字信息。制作要点提示5.制作景点·胜迹栏目（3）CSS样式美化1）设置景点·胜迹栏目的盒子样式。设置类名为“jdsj”的元素样式为左浮动，清除浮动影响，上下外边距为10px，左右外边距为0px，宽度为600px，高度为580px，上边框为5px的红色实线。制作要点提示5.制作景点·胜迹栏目（3）CSS样式美化2）设置景点·胜迹栏目的<h2>标题样式。设置类名为“jdsj”的元素中<h2>的样式，外边距为10px，文字颜色为#c40001。3）设置景点·胜迹栏目的<li>样式。设置类名为“jdsj”的元素中<li>的样式，宽度为250px，外边距为15px、25px、10px、25px，左浮动，盒子阴影为灰色、偏移量为5px，模糊为15px。制作要点提示5.制作景点·胜迹栏目（3）CSS样式美化4）设置景点·胜迹栏目的<img>样式。设置类名为“jdsj”的元素中<img>的样式，宽度为250px，高度为200px。制作要点提示5.制作景点·胜迹栏目（3）CSS样式美化5）设置景点·胜迹栏目的<p>样式。设置类名为“jdsj”的元素中<p>的样式，文字大小为20px，文本居中对齐，上外边距为5px，背景颜色为#c40201，文字颜色为白色。制作要点提示5.制作景点·胜迹栏目（3）CSS样式美化6）设置景点·胜迹栏目的<li>悬停样式。设置类名为“jdsj”的元素中<li>的悬停样式，放大1.2倍，盒子阴影的偏移量为5px、模糊半径值为5px，颜色为#333。制作要点提示6.制作红色英雄栏目（1）页面结构分析红色英雄栏目包含了标题和姓名。制作要点提示6.制作红色英雄栏目（2）搭建HTML结构1）在类名为“hsyx”的<section></section>标签对中添加1个<table></table>标签对，作为表格容器。2）在<table></table>标签对中添加1个<caption></caption>标签对，作为栏目标题，并输入“红色英雄”文字信息。3）根据效果图，该表格一共有5行3列，在<caption></caption>标签对后添加5个<tr></tr>标签对，在每一个<tr></tr>标签对中添加3个<td></td>标签对，并输入对应的文字信息。制作要点提示6.制作红色英雄栏目（3）CSS样式美化1）设置红色英雄栏目的样式。设置类名为“hsyx”的元素样式为左浮动，左外边距为20px，上外边距10px，边框线为3px的灰白色实线，上边框为5px红色实线。制作要点提示6.制作红色英雄栏目（3）CSS样式美化2）设置红色英雄栏目的<table>表格样式。设置类名为“hsyx”的元素中<table>的样式宽度为300px。3）设置红色英雄栏目的<caption>样式。设置类名为“hsyx”的元素中<caption>标签的样式，字体大小为25px，内边距为10px，字体加粗，文字颜色为#c40001。制作要点提示6.制作红色英雄栏目（3）CSS样式美化4）设置红色英雄栏目的单元格<td>样式。设置类名为“hsyx”的元素中<td>的样式，宽度为100px，字体大小为18px，文本居中，上外边距为20px，背景颜色为#c40001，文字颜色为白色，内边距为20px。制作要点提示6.制作红色英雄栏目（3）CSS样式美化5）设置红色英雄栏目的单元格<td>悬停样式。设置类名为“hsyx”的元素中<td>的悬停样式，放大1.5倍，边框为1px的灰色实线。制作要点提示7.制作关于我们栏目（1）页面结构分析关于我们栏目包含了标题、简介和留言表单。制作要点提示7.制作关于我们栏目（2）搭建HTML结构1）在类名为“gywm”的<section></section>标签对中添加1个<h2></h2>标签对，作为栏目标题，并输入“关于我们”文字信息。2）在<h2></h2>标签对后添加1个<p></p>标签对，作为关于我们栏目简介的容器，并输入文字信息。3）在<p></p>标签对后添加1个<form></form>标签对，作为留言表单的标签，并设置action属性为“example01.html”，设置method属性为“post”。4）根据效果图，表单中一个有3个输入框和1个提交按钮，所以在<form></form>标签对中添加4个<div></div>标签对，作为表单控件的容器。5）在前面2个<div></div>标签对中分别添加1个<label></label>标签对，作为提示文字的标签，并输入文字信息。在<label></label>标签对后添加1个<input>标签，并设置好对应的type分别为“tel”“email”，设置name属性分别为“myphone”“myemail”，设置placeholder属性分别为“请输入你的电话”“请输入你的邮箱”。6）在第3个<div></div>标签对中添加1个<label></label>标签对，作为提示文字的标签，并输入文字信息。在<label></label>标签对后添加1个<textarea></textarea>标签对，并设置cols为“33”、rows为“5”。7）将第4个<div></div>标签的类名称设置为“btn”，在其添加1个<input>标签，作为“提交”按钮，设置对应的type为“submit”，设置value属性为“提交”。制作要点提示7.制作关于我们栏目（2）搭建HTML结构制作要点提示7.制作关于我们栏目（3）CSS样式美化1）设置关于我们栏目的样式。设置类名为“gywm”的元素样式为清除浮动，边框为3px灰白色实线，上边框为5px红色实线，高度280px。制作要点提示7.制作关于我们栏目（3）CSS样式美化2）设置关于我们栏目的标题<h2>样式。设置类名为“gywm”的元素中<h2>的样式，外边距为10px，文字颜色为#c40001。制作要点提示7.制作关于我们栏目（3）CSS样式美化3）设置关于我们栏目的<P>样式。设置类名为“gywm”的元素中<p>的样式，宽度为48%，左浮动，内边距为20px，文本首行缩进2em，行高为25px。制作要点提示7.制作关于我们栏目（3）CSS样式美化4）设置关于我们栏目的<form>样式。设