【HTML网页设计】 HTML+CSS做一个学生抗疫感动专题网页设计作业网页

频道：游戏专题日期：2025-02-25 05:01:06 浏览：75

文章目录

[作者的主页 - 获取更多高质量的源代码]

[研究材料/简历模板/访谈材料/网站设计和生产]

＃1。网站标题‍️与流行病作斗争，向逆行和人类主题致敬，用于逆行和网页设计工作模板的Web Design为大学生的抗流动性以及其他网站设计和生产。 2。网站描述

为流行病而战，向逆行致敬。以人为主题的网络设计作品是使用Div CSS布局进行的，总共有多个页面：网站主页，触摸角色，移动的时刻，触摸视频，触摸的图片集和触摸的新闻页面。，使用CSS设置网页背景颜色，并在导航区域中创建鼠标的荧光效果。一些页面插入了触摸MP4视频。工作代码是在简单的学生级别制定的，而DIV的命名合理。

一组高质量的网页设计应包括（具体来说，取决于个人要求）

该页面分为四个部分：标题，菜单导航栏（最好下拉），中间内容部分和页脚。所有页面彼此超链接，并且可以达到由5-10页组成的3级页面。页面样式的统一布局是正常的，还不错，并且使用了DIV+CSS技术。菜单很漂亮且引人注目，辅助菜单可以正常弹出并跳跃。必须有JS特殊效果，例如定时开关和图片旋转木马的手动切换。页面上有多媒体元素，例如GIF，视频，音乐和形式技术的使用。该页面令人耳目一新，美丽而慷慨，不一样。。我们不仅应该能够呈现用户所需的内容，而且还应满足良好布局，优美的界面，优雅的颜色匹配和各种表达方式的要求。 3。网站简介

在网站布局方面：计划采用与主要主流浏览器兼容并具有稳定的显示效果的当前主流浮动网页布局结构。

在网站程序方面：计划使用最新的Web编程语言HTML5+CSS3+JS编程语言来完成网站的功能设计。并确保网站代码与市场上的所有主流浏览器兼容，并在打开网站后立即查看网站的效果。

在网站材料方面：计划从主要平台收集漂亮的图片材料，仔细选择适合Web样式的图片，然后使用PS制作适合Web尺寸的图片。

关于网站文件：网站系统文件的类型包括：HTML Web结构文件，CSS Web样式文件，JS Web特殊效果文件，图像Web图片文件；

在网页编辑方面：网页的工作代码很简单，您可以使用任何HTML编辑软件（例如Dreamweaver，Hbuilder开元棋官方正版下载，hbuilder，vScode，sublime，sublime，webStorm，webstorm，text，Notepad ++和其他任何HTML编辑软件，请修改，修改和编辑操作等）。

在：

（1）HTML文件包含：其中index.html是主页，而其他HTML是辅助页面；

（2）CSS文件包含：CSS的所有页面样式，文本滚动，图片放大等；

（3）JS文件包含：JS实现动态旋转木马效果，表单提交，点击事件等（JS代码在某些网页中使用）。

4。网站演示

5.️网站代码HTML结构代码


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>预防新xxxtitle>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
	head>
	<body>
		<div class="web">
			<div class="top">
				<img src="img/top.jpg" />
			div>
			<div id="nav">
				<ul>
					<li><a href="index.html">主页a>li>
					<li><a href="fxgc.html">发现过程a>li>
					<li><a href="yfff.html">预防方法a>li>
                    <li><a href="fhzn.html">防护指南a>li>
                    <li><a href="denglu.html">会员登陆a>li>
                    <li><a href="zhuce.html">会员注册a>li>
				ul>
			div>
			<div class="neirong">
            <div class="banner">
            <img src="img/banner.jpg">
            div>
				<div class="title">xx病毒div>
				<div class="bx1">
					<ul>
						<li><img src="img/img1.jpg">li>
						<li><img src="img/img2.jpg">li>
						<li><img src="img/img3.jpg">li>
					ul>
				div>
				<div class="bx2">
					<p>
					201xxxxxxx19”，因2019年武汉xxxx2020年1月12日被世xxxx名。
					p>
					<p>
					20xxxx感及相关疾病监测，发现多起xx肺部感xxx现象。国家卫生健康委决定将xxx炎纳入法xxx传染病的预防、控制措施。截至2020年1月7日21xx状病毒。
					p>
					<p>
					1月20日xxxx肺炎疫情作出重要指示，强调要xxxx健康放在第一位，坚xx情蔓延势头。
					p>
					<p>
					2020年1月30日，xxxx为国际关注的突发公共卫生事件，强调不建议实施旅行和贸易限制，并再次高度肯定中方的防控举措。
					p>
				div>
				<div class="title">xxx特征div>
				<div class="bx3">
					<img src="img/img4.jpg" />
					<p>xx会出现程度不同的症状，有的只是发烧或xx肺炎，有的则更为严xxx。p>
					<p>该xxx致死率约为2%到4%，但这是一个非常早期的百分比，随着更多信息的获得可能会改变。同时，这并不意味着它不严重，只是xxxx一定人人都会面临最严重的后果。p>
					<p>经呼吸道飞沫xxx，气溶胶和消xxx明确。p>
					<p>各个年龄段的人xxxxxp>
					<p>截至2月20xxxx）和新xx团xxxx计死亡病例2121例，xxxx症x例xxx4例，现有疑似xx2例。 p>
                    <p>该xxx但这是一个非常早期的百分比，随着更多信息的获得可能会改变。同时，这并不意味着它不严重，只是说xxxxx定人人都会面临最严重的后果。p>
				div>
			div>
			<div class="foot">
				版权所有©xxxx
			div>
		div>		
	body>
html>

CSS样式代码

body {
	margin: 0 auto;
	font-size: 14px;
	font-family: "微软雅黑",arial;
	line-height: 22px;
	color: #141515;
	background:#ece9e9;
}
div,p,input,ul,li,h1,h2,h3,h4 {
	height: auto;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}
li {
	list-style: none;
}
a {
	text-decoration: none;
	color: #141515;
}
a:hover {
	color: #1575be;
}
img {
	border: 0;
	margin: 0;
	padding: 0;
}
.web {
	width: 1200px;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
}
.top {
	height: 234px;
}
#nav {
	height: 56px;
	line-height: 56px;
	background: #28285c;
}
#nav ul {
	padding: 0px;
}
#nav ul li{
	width:200px;
	float: left;
	text-align: center;
	height: 56px;
}
#nav ul li a{
	font-size:20px;
	color: #fafafd;
}
.banner{
	width:1200px;
	height:335px;
	margin:0 auto;
	}
.neirong{
	width: 100%;
	height: auto;
	overflow: hidden;
	background: white;	
}
.title{
	width: 212px;
	height: 46px;
	background: #73b4f8;
	text-align: center;
	line-height: 46px;
	font-size: 20px;
	color: #fdfeff;
	margin-top: 33px;
	margin-left: 25px;
	margin-bottom: 30px;
}
.bx1{ 
	width: 1130px;
	height: 253px;
	margin: 0 auto;
	margin-bottom: 30px;
}
.bx1 ul{
	padding: 0px;
}
.bx1 ul li{
	width: 356px;
	height: 253px;
	margin: 0px 10px;
	float: left;
}
.bx2{
	width: 1130px;
	height: 300px;
	margin: 0 auto;
}
.bx2 p{
	line-height: 30px;
	font-size: 16px;
	color: #030303;
	text-indent: 2em;
}
.bx3{
	height: 450px;
	width: 1130px;
	margin: 0 auto;
}
.bx3 img{ 
	float: right;
	margin-right: 25px;
}
.bx3 p{
	line-height: 30px;
	font-size: 16px;
	color: #030303;
	text-indent: 2em;
}
.foot{
	height: 100px;
	line-height: 100px;
	text-align: center;
	color: #fefefe;
	font-size: 14px;
	background: #28285c;
}
.fbx1{
	height: 330px;
	width: 1130px;
	margin: 0 auto;
}
.fbx1 img{
	float: right;
	margin-left: 20px;
}
.fbx1 p{
	line-height: 30px;
	font-size: 16px;
	color: #030303;
	text-indent: 2em;
	margin-top: 10px;
}
.fbx2{
	height: 330px;
	width: 1130px;
	margin: 0 auto;
}
.fbx2 img{
	float: left;
	margin-right: 20px;
}
.fbx2 p{
	line-height: 30px;
	font-size: 16px;
	color: #030303;
	text-indent: 2em;
	margin-top: 10px;
}
.fbx3{
	height: 340px;
	width: 1130px;
	margin: 0 auto;
}
.fbx3 img{
	float: right;
	margin-left: 20px;
}
.fbx3 p{
	line-height: 30px;
	font-size: 16px;
	color: #030303;
	text-indent: 2em;
	margin-top: 10px;
}
.ffbx1{
	width: 1130px;
	margin: 0 auto;
	height: 560px;
}
.ffbx1 ul{
	padding: 0px;
}
.ffbx1 ul li{
	width: 496px;
	margin: 0px 30px;
	float: left;
}
.ffbx1 ul li img{
	margin-bottom: 30px;
}
.ffbx1 ul li p{
	line-height: 30px;
	font-size: 16px;
	color: #030303;
	text-indent: 2em;
}
.ffbx2{
	height: 500px !important;
}
.huodao {
	padding:0px 40px;
	margin-bottom:40px;	
	height: auto;
	overflow: hidden;
}
.huodao h2 {
	color: #333;
	font-size: 18px;
	line-height: 20px;
	padding: 20px 0 20px 25px;
	background: url(../img/ico.png) no-repeat 2px 20px;
	margin-top: 10px;
}
.huodao p {
	font-size: 16px;
	line-height: 30px;
}
.zhuce{
	width:550px;
	height:400px;
	margin:0 auto;
	margin-bottom:30px;
	}
.txt{
	width:200px;
	height:30px;
	border:#CCC 1px solid;
	}
.btn{
	width:120px;
	height:30px;
	line-height:30px;
	border:none;
	background:#28285c;
	text-align:center;
	float:left;
	margin-right:10px;
	color:#FFF;
	}

6.如何继续向盲人学习

21年内编程新秀的16条提示

在条目期间，不要盲目阅读太多书籍，找到一本在线或周围有经验的程序员推荐的教科书开yun体育官网入口登录app，然后首先系统地研究它。阅读更多帮助文件。帮助文档就像玩游戏的秘密一样。如果您需要阅读，请不要太自信。新手是否容易被诸如对象，属性，方法等之类的单词混淆？那是因为您甚至还没有掌握最基本的知识。不要忽略不起眼的问题，并且经常总结并从中学习。如果不积累足够的知识和经验，您就无法开发一个完整的项目。牢记过时的技术比牢记它们要好。如果您学习到老了，那么您就不能只用一步和一半的姿势突破世界。阅读您可以仔细理解的书籍；阅读即使必须阅读的书，也无法理解的书。阅读一百次的书将使人们对其含义有意义。不要期望阅读一次，您可以掌握它。即使有完整的源代码，请亲自练习教程中的示例。扩展您在教程中看到的有意义的示例；并将它们应用于您自己的工作。不要错过教程中的任何练习 - 请全部完成并记笔记。通过持续实践得到改善和发展。您比Daniu更糟的只是经验的积累。每当您学到一个困难的观点时，请尝试与朋友或在线分享您的经验，以便其他人可以理解并表明您确实掌握了它。擅长保存源文件开yun体育app入口登录，这些都是您的知识积累。遇到问题时不要问问题。学会自己找到答案。例如，在Google，Baidu和W3CSchool上有许多与编程相关的材料。您只需输入关键字就可以找到答案。 7。更多的干货

1。如果我的博客对您有所帮助，如果您喜欢我的博客内容，请“喜欢”，“ Comments”，“最爱”和“收藏夹”以及连续三键单击！

2。[跟着我|获取更多源代码|高质量文章]请您学习各种前端插件，3D酷效果，图片显示，文本效果以及全站点模板，大学毕业生HTML模板，最终作业模板等！ “这里有许多前端开发人员一起讨论前端节点知识并互相学习”！

3。

欢迎进行交流和研究与上述内容有关的技术问题

[上一篇]电商游戏专题03：交互设计篇

[下一篇]九洲光电谢拥军荣获OFweek•2013新锐人物奖