抗击疫情致敬逆行者感人类题材网页设计作品采用DIV CSS布局制作,使用CSS设置了网页背景颜色,制作了导航区域鼠标经过荧光效果。感人视频页面插入了MP3音乐。作品代码采用学生简单水平制作,DIV命名合理 ,制作水平和原创度都适合学习或交作业用。
作品介绍1.网页作品简介方面 :抗击疫情网页制作作业 疫情防控网页设计模板 简单学生网页设计代做 静态HTML CSS网站制作成品 HTML期末大学生网页设计作业 ,喜欢的可以下载,文章页支持手机PC响应式布局。主要有:首页 疫情记忆 相关图库 登录注册 等总共 6 个页面html下载。
2.网页作品编辑方面:此作品为学生个人主页网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)
3.网页作品布局方面:网页布局整体为LOGO、导航、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。
4.网页作品技术方面:使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单,同时简单使用JavaScript制作了表单判断(提交时表单不能为空)
文章目录
一、作品演示
1.首页
2.疫情记忆
3.感动人物
4.城市疫情
5. 疫情情
6.登录/注册
二、代码目录 三、代码实现<!doctype html> <html> <head> <meta charset="utf-8"> <title>疫情记忆</title> <link href="css/style.css" rel="stylesheet" /> <link href="css/slideshow.css" rel="stylesheet" /> </head> <body> <div id="top"> <div id="above"> <div id="Logo"><a href="index.html"><img src="images/logo.png" width="180" height="50"></a></div> <div id="search"> <label for="textfield"></label> <input name="textfield" type="text" id="textfield" value=" 搜索" maxlength="15"> </div> <div id="login"><a href="login.html">注册账号</a></div> </div> </div> <!-- 导航条代码 开始 --> <div class="nav"> <ul class="list"> <li><a href="index.html">首页</a></li> <li><a href="#">疫情记忆 <img src="images/down.svg" alt="" width="12" height="12"></a> <div class="down"> <a href="article.html"> 人物</a> <a href="page.html"> 城市</a> <a href="list.html"> 世界</a></div> </li> <li><a href="photo.html">相关图库</a></li> <li><a href="login.html">注册/登录</a><a href="about.html"></a></li> </ul> </div> <!-- 导航条代码 结束 --> <div id="main-960"> <!-- 代码 开始 --> <div id="yc-mod-slider"> <div class="wrapper"> <div id="slideshow" class="box_skitter fn-clear"> <ul> <li> <img class="cubeRandom" src="images/slider1.jpg" /></li> <li> <img class="cubeRandom" src="images/slider2.jpg" /></li> <li> <img class="cubeRandom" src="images/slider3.jpg" /></li> <li> <img class="cubeRandom" src="images/slider4.jpg" /></li> <li> <img class="cubeRandom" src="images/slider5.jpg" /></li> </ul> </div> <script type="text/javascript" src="js/slideshow.js"></script> </div> </div> <!-- 代码 结束 --> <div id="aright"> <div id="atishi">勠力同心 勇往直前</div> </div> <div id="aright2"> <div id="image104"><a href="#"><img src="images/sf01.jpg" width="219" height="104"></a></div> <div id="image104"><a href="#"><img src="images/sf02.jpg" width="219" height="104"></a></div> </div> </div> <div id="im01"> <div id="text002">新型冠状病毒肺炎(Corona Virus Disease 2019,COVID-19),简称“新冠肺炎”,世界卫生组织命名为“2019冠状病毒病” [1-2] ,是指2019新型冠状病毒感染导致的肺炎。2019年12月以来,湖北省武汉市部分医院陆续发现了多例有华南海鲜市场暴露史的不明原因肺炎病例,证实为2019新型冠状病毒感染引起的急性呼吸道传染病。</div> <div id="anniu" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="page.html">观看视频</a></div> <div id="anniu1" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="list.html">了解更多</a></div> </div> <div class="div_first"> <div class="div_second"> <img src="images/slider01.jpg" alt=""><img src="images/slider02.jpg" alt=""><img src="images/slider03.jpg" alt=""><img src="images/slider04.jpg" alt=""> </div> </div> <div id="main-more"><table width="100%" height="318" border="0"> <tr> <td align="left"><a href="article.html"><img src="images/renwu.jpg" width="308" height="307"></a></td> <td align="center"><a href="page.html"><img src="images/chengshi.jpg" width="308" height="307"></a></td> <td align="right"><a href="list.html"><img src="images/shijie.jpg" width="308" height="307"></a></td> </tr> </table> </div> <div id="music"><table width="100%" border="0"> <tr> <td width="38%" height="55" align="center"><audio src="media/music.mp3" controls autoplay></audio></td> <td width="62%"><marquee>君をのせて (天空の城ラピュタ)</marquee></td> </tr> </table> </div> <!-- footer代码 开始 --> <footer> <div id="footer_all"> <div id="f1170-167"> <div id="logo-175-40"><a href="index.html"><img src="images/logo.png" width="180" /></a></div> <div class="aye" id="login"> <table width="103" border="0"> <tr> <td width="97" height="37" align="left"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?yqjy" class="ayahei">了解更多</a></td> </tr> </table> </div> <div class="aye" id="login"> <table width="103" border="0"> <tr> <td width="97" height="37" align="left"><span class="ayahei"><a href="login.html">注册账号</a></span><a href="Login.html"></a></td> </tr> </table> </div> <div id="right828-167"> <div id="l-828-80"> <div id="r-150-42"><a href="#"><img src="images/fb.png" width="45" height="45"></a></div> <div id="r-150-42-1"><a href="#"><img src="images/tw.png" alt="" width="45" height="45"></a></div> <div id="r-150-42-1"><a href="#"><img src="images/ins.png" alt="" width="45" height="45"></a></div> </div> <div id="r-lianjie"><table width="100%" border="0"> <tr> <td align="right">© 疫情记忆 </td> </tr> </table> </div> </div> </div> <div id="banquan"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym" target="_blank"><img src="images/lxidw7.svg" width="1000" height="36"></a></div> </div> </footer> <!-- 代码 结束 --> </body> </html>
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、源码获取
❉ ~ 关注我,点赞博文~ 每天带你涨知识!
❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
❉3.以上内容技术相关问题可以相互学习,可关注↓公Z号 获取更多源码 !