admin管理员组文章数量:1794759
HTML+CSS抗疫网页设计 疫情感动人物静态HTML网页 web前端开发技术 web课程设计 网页规划与设计
📂文章目录
- 一、👨🎓网站题目
- 二、✍️网站描述
- 三、📚网站介绍
- 四、💠网站演示
- 五、⚙️ 网站代码
- 🧱HTML结构代码
- 💒CSS样式代码
- 六、🥇 如何让学习不再盲目
- 七、🎁更多干货
一、👨🎓网站题目
👨⚕️ 抗击疫情致敬逆行者感人类题材、致敬逆行者网页设计作品、大学生抗疫感动专题网页设计作业模板、等网站的设计与制作。
二、✍️网站描述
🏷️抗击疫情致敬逆行者感人类题材网页设计作品采用DIV CSS布局制作，共多个页面：网站首页、感动人物、动人瞬间、感人视频、感动图集、感动新闻页面。，使用CSS设置了网页背景颜色，制作了导航区域鼠标经过荧光效果。个别页面插入了感人MP4视频。作品代码采用学生简单水平制作，DIV命名合理。
🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)
三、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1）📜html文件包含：其中index.html是首页、其他html为二级页面； （2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等； （3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
四、💠网站演示
五、⚙️ 网站代码 🧱HTML结构代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>战胜xx病毒</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="main"> <div class="top"> <div class="logo"> <img src="images/logo.png"> <img src="images/title.png"> </div> </div> <div id="nav"> <ul> <li><a class="hot" href="index.html">网站首页</a></li> <li><a href="jies号.html">病毒介绍</a></li> <li><a href="zhiyuan.html">八方支援</a></li> <li><a href="liuyan.html">在线留言</a></li> </ul> </div> <div class="content"> <div class="box1"> <img src="images/img2.jpg"> <h1>什么是新型xxx？</h1> <p> 2019新xxx2019-nCoV）， 因2019年武xxxx例而被发现，2020年x12日x病x合征（MExx）和xxxx（xxSx）等较严xxxxxx。 </p> <p>2019年12月xxx相关疾病监测，xxxxx <p>人感染了xxxx热、咳嗽、气促和呼吸困难xxx病例中，感染可导x炎、严xx症状是可以处x此需根据xxxx </div> <div class="itit"> 八方支援 </div> <div class="box2"> <ul> <li> <img src="images/img4.jpg"> <h2>医疗力量援鄂抗疫 逆向而行</h2> </li> <li> <img src="images/img5.jpg"> <h2>医用药品支援</h2> </li> <li> <img src="images/img6.jpg"> <h2>社工积极响应回到工作岗位</h2> </li> </ul> </div> <div class="box3"><img src="images/img7.jpg"></div> </div> <div class="foot">战胜新型冠状病毒</div> </div> </body> </html> 💒CSS样式代码 body { margin: 0 auto; font-size: 12px; font-family: "微软雅黑",arial; line-height: 22px; color: #2b2b2b; background: #e5e5e5; } div,p,h1,ul{ height: auto; margin: 0; padding: 0; vertical-align: middle; } img { border: 0; margin: 0; padding: 0; } li{ list-style: none; } .main{ width: 1200px; height: auto; overflow: hidden; margin: 0 auto; } .top{ height: 253px; background: url(../images/img1.jpg) no-repeat; padding-top: 110px; } .logo{ width: 880px; height: 110px; margin: 0 auto; } .logo img{ float: left; margin-right: 15px; } #nav{ height: 60px; line-height: 60px; background: #af0001; } #nav ul{ padding: 0px; } #nav ul li{ width: 300px; text-align: center; float: left; } #nav ul li a{ display: block; width: 300px; color: #ffffff; font-size: 18px; text-decoration: none; } .hot{ background: #8c0c0c; } .content{ height: auto; overflow: auto; background: #ffffff; padding: 40px 20px; } .box1{ height: 243px; margin-bottom: 30px; } .box1 img{ float: left; margin-right: 20px; }
六、🥇 如何让学习不再盲目
21年程序员总结给编程菜鸟的16条忠告
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬版权声明：本文标题：HTML+CSS抗疫网页设计 疫情感动人物静态HTML网页 web前端开发技术 web课程设计 网页规划与设计 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686623548a87587.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论