Web应用设计（期末课题设计）

喷喷炸洋芋

已于 2023-03-22 13:45:07 修改

阅读量569

点赞数 3

分类专栏：期末报告文章标签：前端

于 2023-03-22 13:39:51 首次发布

本文链接：https://blog.youkuaiyun.com/NIng_jies/article/details/128692788

版权

期末报告专栏收录该内容

3 篇文章

订阅专栏

该项目是一个关于疫情背景下的大学生创新创业的Web期末课题，要求包括多个页面的制作与跳转，以及轮播图、导航栏和个人信息展示功能。学生需使用HTML、CSS和JavaScript来构建网页结构，实现页面的动态效果，如图片轮播，并创建用户注册表单。页面需符合健康向上的主题，设计应美观且结构清晰。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web期末课题设计是关于一个疫情下的大学生创新创业，其中需要包含至少三个界面的来回跳转，界面的轮播图的设置，导航栏的制作，以及包含了个人信息的制作传递。

（如果需要源文件，以及实验报告，相关图片考研私我，免费的哈！！！）

其中包含以下的要求:

序号	评分内容及标准	课程目标	分值	实际得分
1	主题突出，健康向上，内容丰富，有创意、有特点。	课程目标1	5
2	站点以学号_姓名命名，文件保存时，图片放在images文件夹里，网页以index.html, 主页底部页脚需显示制作者的详细基本信息（班级、姓名、QQ 或邮箱等联系方式）首页要有导航、轮播图片及文章列表等基本元素。	课程目标1	5
3	页面中必须有文字（占页面的30%)、图像、超链接。制作相关主题至少3个以上页面，通过超链接，可以实现页面之间的相互跳转。	课程目标1	10
4	能够利用html标签搭建网页结构，div+css合理布局页面，结构清晰，美观。	课程目标2	20
5	能够合理定义css样式，利用CSS层叠样式表控制样式外观，包括字体，链接、图片等，页面整体美观，色彩搭配协调。	课程目标2	25
6	利用表格和表单完成用户注册页面，表单种类5种以上，并对表单做合理修饰，美观大方。	课程目标3	20
7	能够利用JavaScript完成交互效果，如图片的轮播、下拉菜单等。	课程目标3	15
备注	页面在浏览器中不能正常显示或有雷同者或不符合主题者，不予评分。
合计

1.轮播图的js文件，脚本文件

// JavaScript Document


function getStyle(obj,name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name]
	}
	else
	{
		return getComputedStyle(obj,false)[name]
	}
}

function getByClass(oParent,nClass)
{
	var eLe = oParent.getElementsByTagName('*');
	var aRrent  = [];
	for(var i=0; i<eLe.length; i++)
	{
		if(eLe[i].className == nClass)
		{
			aRrent.push(eLe[i]);
		}
	}
	return aRrent;
}

function startMove(obj,att,add)
{
	clearInterval(obj.timer)
	obj.timer = setInterval(function(){
	   var cutt = 0 ;
	   if(att=='opacity')
	   {
		   cutt = Math.round(parseFloat(getStyle(obj,att)));
	   }
	   else
	   {
		   cutt = Math.round(parseInt(getStyle(obj,att)));
	   }
	   var speed = (add-cutt)/4;
	   speed = speed>0?Math.ceil(speed):Math.floor(speed);
	   if(cutt==add)
	   {
		   clearInterval(obj.timer)
	   }
	   else
	   {
		   if(att=='opacity')
		   {
			   obj.style.opacity = (cutt+speed)/100;
			   obj.style.filter = 'alpha(opacity:'+(cutt+speed)+')';
		   }
		   else
		   {
			   obj.style[att] = cutt+speed+'px';
		   }
	   }
	   
	},30)
}

  window.onload = function()
  {
	  var oDiv = document.getElementById('playBox');
	  var oPre = getByClass(oDiv,'pre')[0];
	  var oNext = getByClass(oDiv,'next')[0];
	  var oUlBig = getByClass(oDiv,'oUlplay')[0];
	  var aBigLi = oUlBig.getElementsByTagName('li');
	  var oDivSmall = getByClass(oDiv,'smalltitle')[0]
	  var aLiSmall = oDivSmall.getElementsByTagName('li');
	  
	  function tab()
	  {
	     for(var i=0; i<aLiSmall.length; i++)
	     {
		    aLiSmall[i].className = '';
	     }
	     aLiSmall[now].className = 'thistitle'
	     startMove(oUlBig,'left',-(now*aBigLi[0].offsetWidth))
	  }
	  var now = 0;
	  for(var i=0; i<aLiSmall.length; i++)
	  {
		  aLiSmall[i].index = i;
		  aLiSmall[i].onclick = function()
		  {
			  now = this.index;
			  tab();
		  }
	 }
	  oPre.onclick = function()
	  {
		  now--
		  if(now ==-1)
		  {
			  now = aBigLi.length;
		  }
		   tab();
	  }
	   oNext.onclick = function()
	  {
		   now++
		  if(now ==aBigLi.length)
		  {
			  now = 0;
		  }
		  tab();
	  }
	  var timer = setInterval(oNext.onclick,3000) //滚动间隔时间设置
	  oDiv.onmouseover = function()
	  {
		  clearInterval(timer)
	  }
	   oDiv.onmouseout = function()
	  {
		  timer = setInterval(oNext.onclick,3000) //滚动间隔时间设置
	  }
  }

2.css样式设置

css主要用于界面的布局设置

@charset "utf-8";

/* CSS Document */

img {
    border: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#divSmallBox {
    overflow: hidden;
    *display: inline;
    *zoom: 1;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 10px;
    background: #ffffff;
}

#playBox {
    width: 1000px;
    height: 379px;
    margin: auto;
    background: #333;
    position: relative;
    overflow: hidden;
}

#playBox .oUlplay {
    width: 99999px;
    position: absolute;
    left: 0;
    top: 0;
}

#playBox .oUlplay li {
    float: left;
}

#playBox .pre {
    cursor: pointer;
    width: 45px;
    height: 45px;
    background: url(../images/l.png) no-repeat;
    position: absolute;
    top: 190px;
    left: 10px;
    z-index: 10;
}

#playBox .next {
    cursor: pointer;
    width: 45px;
    height: 45px;
    background: url(../images/r.png) no-repeat;
    position: absolute;
    top: 190px;
    right: 10px;
    z-index: 10;
}

#playBox .smalltitle {
    width: 1000px;
    height: 10px;
    position: absolute;
    bottom: 15px;
    z-index: 10
}

#playBox .smalltitle ul {
    width: 120px;
    margin: 0 auto;
}

#playBox .smalltitle ul li {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 10px;
    background: #ffffff;
    float: left;
    overflow: hidden;
    *display: inline;
    *zoom: 1;
}

#playBox .smalltitle .thistitle {
    background: #900;
}

.js轮播的图制作

// JavaScript Document


function getStyle(obj,name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name]
	}
	else
	{
		return getComputedStyle(obj,false)[name]
	}
}

function getByClass(oParent,nClass)
{
	var eLe = oParent.getElementsByTagName('*');
	var aRrent  = [];
	for(var i=0; i<eLe.length; i++)
	{
		if(eLe[i].className == nClass)
		{
			aRrent.push(eLe[i]);
		}
	}
	return aRrent;
}

function startMove(obj,att,add)
{
	clearInterval(obj.timer)
	obj.timer = setInterval(function(){
	   var cutt = 0 ;
	   if(att=='opacity')
	   {
		   cutt = Math.round(parseFloat(getStyle(obj,att)));
	   }
	   else
	   {
		   cutt = Math.round(parseInt(getStyle(obj,att)));
	   }
	   var speed = (add-cutt)/4;
	   speed = speed>0?Math.ceil(speed):Math.floor(speed);
	   if(cutt==add)
	   {
		   clearInterval(obj.timer)
	   }
	   else
	   {
		   if(att=='opacity')
		   {
			   obj.style.opacity = (cutt+speed)/100;
			   obj.style.filter = 'alpha(opacity:'+(cutt+speed)+')';
		   }
		   else
		   {
			   obj.style[att] = cutt+speed+'px';
		   }
	   }
	   
	},30)
}

  window.onload = function()
  {
	  var oDiv = document.getElementById('playBox');
	  var oPre = getByClass(oDiv,'pre')[0];
	  var oNext = getByClass(oDiv,'next')[0];
	  var oUlBig = getByClass(oDiv,'oUlplay')[0];
	  var aBigLi = oUlBig.getElementsByTagName('li');
	  var oDivSmall = getByClass(oDiv,'smalltitle')[0]
	  var aLiSmall = oDivSmall.getElementsByTagName('li');
	  
	  function tab()
	  {
	     for(var i=0; i<aLiSmall.length; i++)
	     {
		    aLiSmall[i].className = '';
	     }
	     aLiSmall[now].className = 'thistitle'
	     startMove(oUlBig,'left',-(now*aBigLi[0].offsetWidth))
	  }
	  var now = 0;
	  for(var i=0; i<aLiSmall.length; i++)
	  {
		  aLiSmall[i].index = i;
		  aLiSmall[i].onclick = function()
		  {
			  now = this.index;
			  tab();
		  }
	 }
	  oPre.onclick = function()
	  {
		  now--
		  if(now ==-1)
		  {
			  now = aBigLi.length;
		  }
		   tab();
	  }
	   oNext.onclick = function()
	  {
		   now++
		  if(now ==aBigLi.length)
		  {
			  now = 0;
		  }
		  tab();
	  }
	  var timer = setInterval(oNext.onclick,3000) //滚动间隔时间设置
	  oDiv.onmouseover = function()
	  {
		  clearInterval(timer)
	  }
	   oDiv.onmouseout = function()
	  {
		  timer = setInterval(oNext.onclick,3000) //滚动间隔时间设置
	  }
  }

Style.css代码段

@charset "utf-8";
* {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 14px;
}

h2 {
    font-size: 30px;
}

a {
    text-decoration: none;
}

.wrap {
    width: 1170px;
    height: auto;
    margin: 0 auto;
    background: #2196f3;
}

.container {
    width: 1100px;
    height: auto;
    margin: 0 auto;
    background: #edefec;
}

.top img {
    width: 100%;
}

.nav ul li {
    float: left;
    position: relative;
    background-color: #106cd6;
}

.last {
    border-left: 1px solid white;
}

.nav ul li a {
    display: block;
    text-align: center;
    text-decoration: none;
    width: 274px;
    height: 50px;
    color: white;
    border-right: 1px solid white;
    font: 700 16px/50px "微软雅黑";
}

.nav ul li ul {
    display: none;
}

.nav ul li:hover a {
    color: #f7ee00;
    position: relative;
    z-index: 9999;
}

.nav ul li:hover ul {
    display: block;
    position: absolute;
    top: 50px;
    left: 0;
    width: 105px;
}

.nav ul li:hover ul li a {
    display: block;
    background: #f7ee00;
    color: #000;
}

.nav ul li:hover ul li a:hover {
    background: #f79700;
    color: #000;
}

.banner {
    width: 100%;
    height: 409px;
    float: left;
    margin: 36px 0px;
}

.clear {
    clear: both;
}

.box {
    width: 100%;
    height: auto;
    float: left;
    margin-top: 10px;
}

.news-box1 {
    width: 297px;
    height: auto;
    float: left;
    margin-left: 10px;
}

.bt {
    width: 100%;
    height: 46px;
    float: left;
    color: #000;
}

.bt h1 {
    font-size: 18px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.txt-box {
    width: 100%;
    height: auto;
    float: left;
    margin-top: 20px;
}

.z15 {
    font-size: 15px;
    line-height: 26px;
    text-indent: 2em;
}

.z15b p {
    margin-top: 15px;
    font-size: 15px;
    line-height: 26px;
    text-indent: 2em;
}

.news-box2 {
    width: 390px;
    height: auto;
    float: left;
    margin-left: 34px;
}

.gallery li {
    float: left;
    display: block;
}

.ml {
    margin-left: 32px;
}

.mt {
    margin-top: 30px;
}

.news-box3 {
    width: 327px;
    height: 157px;
    float: right;
    margin-right: 5px;
}

.tu {
    width: 100%;
    height: 80px;
    float: left;
    padding-bottom: 30px;
    margin-top: 20px;
    border-bottom: solid 1px #333;
}

.tu-l {
    float: left;
    margin-right: 6px;
}

.z1 {
    font-size: 19px;
    color: #333;
    line-height: 50px;
}

.news-list {
    width: 100%;
    float: left;
    margin-top: 26px;
}

.news-list li a {
    display: block;
    font-size: 14px;
    line-height: 31px;
    color: #333;
}

.more {
    color: #333;
}

.more:hover {
    color: #F00;
}


.footer {
    width: 1100px;
    background: #106cd6;
    text-align: center;
    line-height: 50px;
    margin-top: 50px;
    color: #fff;
}

.con-box h3 {
    margin-top: 30px;
}

.con-box {
    width: 1040px;
    height: auto;
    float: left;
    padding: 30px;
}

.con-box h1 {
    font-size: 36px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
}

.fl {
    float: left;
    margin-right: 5px;
}

.lj a {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.lj a:hover {
    color: #F00;
}

input,
textarea,
select {
    outline: none;
    border: 1px solid #333;
}

table {
    width: 700px;
    margin: 10px auto 0;
    border: 1px solid #fff;
}

table h3 {
    font-size: 28px;
    font-weight: 700;
}

td,
tr {
    border: 1px solid #333;
}

table,
td,
tr {
    border-collapse: collapse;
}

td {
    padding: 5px;
}

table textarea {
    width: 500px;
    height: 130px;
    resize: none;
}

.niu {
    text-align: center;
}

.niu input {
    width: 80px;
    height: 40px;
    font-size: 22px;
}