Web前端开发项目教程 课件 4.1.2 分析制作今日影评剧情简介页面_第1页
Web前端开发项目教程 课件 4.1.2 分析制作今日影评剧情简介页面_第2页
Web前端开发项目教程 课件 4.1.2 分析制作今日影评剧情简介页面_第3页
Web前端开发项目教程 课件 4.1.2 分析制作今日影评剧情简介页面_第4页
Web前端开发项目教程 课件 4.1.2 分析制作今日影评剧情简介页面_第5页
已阅读5页，还剩27页未读， 继续免费阅读

下载本文档

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

文档简介

Web前端开发项目教程主讲人：张金娜分析制作今日影评剧情简介页面【任务目标】

知识目标熟悉CSS样式规则的定义；掌握CSS基础选择器的用法。

能力目标能够选择恰当的引入样式表的方式；能够灵活运用CSS选择器定义标签样式。

素质目标夯实学习基础，促进综合发展。【导学知识】一、应用CSS样式规则使用HTML属性：使用CSS属性：

<h1align="center"class="one">不飞则已，一飞冲天；</h1><h1align="center"class="one">不鸣则已，一鸣惊人。</h1><h1align="center"class="two">青青园中葵，朝露待日晞。</h1><h1align="center"class="two">阳春布德泽，万物生光辉。</h1><h1align="center"class="two">常恐秋节至，焜黄华叶衰。</h1><h1align="center"class="two">百川东到海，何时复西归？</h1><h1align="center"class="two">少壮不努力，老大徒伤悲。</h1>

<style>h1{text-align:center;}</style><h1class="one">不飞则已，一飞冲天；</h1><h1class="one">不鸣则已，一鸣惊人。</h1><h1class="two">青青园中葵，朝露待日晞。</h1><h1class="two">阳春布德泽，万物生光辉。</h1><h1class="two">常恐秋节至，焜黄华叶衰。</h1><h1class="two">百川东到海，何时复西归？</h1><h1class="two">少壮不努力，老大徒伤悲。</h1>【导学知识】字体大小文本颜色文本样式字体样式【导学知识】一、应用CSS样式规则未应用CSS样式规则的页面效果：应用CSS样式规则的页面效果：定义基本的CSS样式语法规则如下：选择器{属性1:属性值1;属性2:属性值2;…;属性n:属性值n;}对键值键值键值对对样式声明1样式声明2样式声明n…【导学知识】图

渐变角度数值方向关系p{color:#333399;font-size:14px;line-height:30px;}样式规则应用前后：【导学知识】二、引入CSS样式表未引入CSS样式表文件的剧情简介：引入CSS样式表文件的剧情简介：【导学知识】三、CSS中的特殊选择器1.CSS伪类<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>伪类与CSS类结合</title><style>a{font-size:32px;color:pink;display:block;background-color:#0000ff;}a.one{text-align:center;}a.two{text-align:right;}a.highLight:hover{color:#fff;background-color:#00ff00;}</style></head><body><aclass="one">不飞则已，一飞冲天；</a><aclass="one">不鸣则已，一鸣惊人。</a><aclass="twohighLight">青青园中葵，朝露待日晞。</a><aclass="two">阳春布德泽，万物生光辉。</a><aclass="two">常恐秋节至，焜黄华叶衰。</a><aclass="twohighLight">百川东到海，何时复西归？</a><aclass="two">少壮不努力，老大徒伤悲。</a></body></html>表

锚伪类伪类名描述a:link超链接点击之前的样式a:active超链接被点击不释放时的样式a:visited超链接被访问后的样式a:hover鼠标悬停在超链接上时的样式【导学知识】三、CSS中的特殊选择器1.CSS伪类【导学知识】三、CSS中的特殊选择器2.CSS伪元素【导学知识】三、CSS中的特殊选择器3.通用选择器*{属性1:属性值1;属性2:属性值2;…;属性n:属性值n;}*{margin:0;padding:0;}【任务实现】1.编写剧情简介页面index.html<!doctypehtml><htmllang="en"><head> <metacharset="UTF-8"> <title>今日影评</title> <linkrel="stylesheet"type="text/css"href="../css/common.css"> <linkrel="stylesheet"type="text/css"href="../css/index.css"></head><body> <header> <ul> <li><ahref="index.html">剧情简介</a></li> <li><ahref="page2.html">角色介绍</a></li> <li><ahref="page3.html">制作相关</a></li> <li><ahref="page4.html">影片音乐</a></li> <li><ahref="page5.html">放映信息</a></li> <li><ahref="page6.html">获奖记录</a></li> <li><ahref="page7.html">观影感触</a></li> </ul> </header> <main> <imgsrc="../../img/i1.jpg"> <divclass="text"> <h1>战狼Ⅱ</h1> <p>《战狼Ⅱ》是吴京执导的动作军事电影，由吴京、弗兰克·格里罗、吴刚、张翰、卢靖姗、淳于珊珊、丁海峰等主演。 该片于2017年7月27日在中国内地上映。2020年3月20日，《战狼Ⅱ》重映。 该片讲述了脱下军装的冷锋被卷入了一场非洲国家的叛乱，本来能够安全撤离的他无法忘记军人的职责，重回战场展开救援的故事。 该片以56.8亿元雄踞国产电影历史最高票房纪录。并在中国内地创下累计观影人次1.4亿的成绩，荣登“单一市场观影人次”全球榜首。</p> </div> <divclass="ping"> <pclass="p1">开篇长镜头惊险大气引人入胜，结合了水平不俗的快剪下实打实的真刀真枪，让人不禁热血沸腾！作为一个中国人，那颗民族自豪心砰砰砰跳个不停。<span>————豆瓣精彩短评</span></p> <pclass="p2">总的感受，无论你在世界的任何地方，祖国都是你最坚实的后盾。<span>————猫眼短评</span></p> <pclass="p3">我只想说，中国不死，中国要强！东有中华，如日方升。国有锐士，谁与争锋？<span>————知乎</span></p> </div> </main></body></html>【任务实现】2.编写通用样式表common.cssp,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,form,table,a,div,img,body{ margin:0; padding:0;}a{ text-decoration:none;}li{ list-style:none;}headerul{ width:90%; display:flex; justify-content:space-around; margin:40pxauto;}headerulli{ width:13%;}headerullia{ color:#fff; display:block; background-color:rgba(0,0,0,0.4); border:1pxsolidgray; text-align:center; line-height:45px; font-size:14px; border-radius:5px;}headerullia:hover{ color:#bc2e22; background-color:rgba(0,0,0,0.6);}main{ width:90%; margin:0pxauto;}h2{ color:#b2652d; line-height:60px; text-align:center; font-size:34px; font-family:"幼圆"; width:15%; margin:10pxauto; letter-spacing:2px; text-shadow:4px3px3px#b7a696;}【任务实现】3.编写剧情简介样式表index.cssmainimg{ float:right; margin-top:100px; border-radius:50%; box-shadow:0px0px10px10px#bc2e22;}.text{ width:45%;}h1{ color:#003399; line-height:50px; text-align:center;}.textp,.ping{ font-size:14px; line-height:30px; text-indent:2em;}.textp{ color:#333399;}.ping{ width:45%; padding:20px;}.ping.p1{ color:#CC3333;}.ping.p2{ color:#996699;}.ping.p3{ color:#FF9966;}pspan{ di

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

温馨提示

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

最新文档

评论

0/150

提交评论