网页设计期末考试
一、表格设计与实现
首先我们先来看一下题干的要求！
依据题意我们可以分析出，该题需要我们创建一个表格，进行列元素标签跨行即可实现。
分两种做法：
“傻子”做法–直接创建一个九行八列的表格，找到相应的列元素标签跨行，再将多余出去的列标签元素删除即可！
在此我们主要讲解第二种做法！！！
“动脑”做法：拿到表格进行分析，可知第二行第一个列元素跨了四行，第六行第一个列元素跨了两行，第八行第一个列元素跨了两行，第二行第八个列元素跨了八行。剩余三，四，五，七，九行分别只需六个列元素。分析完毕，开始代码任务。******阿！表格初步终于完了，我是做完整体才来写的，大佬们见谅，下面我们让它变漂亮一些。先把字体居中，利用css修饰列元素text-align：center即可。居中了。。。。不错，给他换个皮肤吧，我不喜欢这样边框带间隙的，我还想让他整个表格到中间来。所以我们继续上css，进行table{border-collapse: collapse;margin: auto;}，table,th,td{border: 2px solid blue;}效果还是不错的，不能光听我bb。直接上效果图！！！
自我感觉还是不错的哈！
下面是源代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>课程表</title>
<style>
table{
border-collapse: collapse;
margin: auto;
}
table,th,td{
border: 2px solid blue;
}
td{
text-align: center;
}
</style>
</head>
<body>
<h1 align="center">课程表</h1>
<table border="2">
<tr>
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td rowspan="4">上午<br>8:00-12:00</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td rowspan="8">休息</td>
</tr>
<tr>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
</tr>
<tr>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
</tr>
<tr>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
</tr>
<tr>
<td rowspan="2">下午<br>4:00-6:00</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
</tr>
<tr>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
</tr>
<tr>
<td rowspan="2">晚上<br>7:00-9:00</td>
<td>上自习吧</td>
<td>上自习吧</td>
<td>上自习吧</td>
<td>上自习吧</td>
<td>上自习吧</td>
<td>上自习吧</td>
</tr>
<tr>
<td>上自习吧</td>
<td>上自习吧</td>
<td>上自习吧</td>
<td>上自习吧</td>
<td>上自习吧</td>
<td>上自习吧</td>
</tr>
</table>
</body>
</html>
二、表单设计与实现
还是先来看一下题目要求~
进行分析：一个大标题，一个文本域，一个密码域，两行复选框的组合，一个大大的文本框，一个下拉列表，三个按钮，分析完毕，直接敲。这个也没啥要注意的，就是每个步骤打完要来俩换行，说白了还是为了美观嘛，对了！如果想要这个表单居中，直接套一个盒子模型就行。直接给他center，so easy~
直接效果图！
源代码奉上：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我的表单</title>
</head>
<body>
<div align="center">
<h1>我的表单</h1>
<form>
账号：<input type="text"><br><br>
密码：<input type="password"><br><br>
爱好：<input type="checkbox">体育<input type="checkbox">唱歌<input type="checkbox">旅游<input type="checkbox">阅读<br><br>
性别：<input type="checkbox">男<input type="checkbox">女<br><br>
自我介绍：<textarea rows="10" cols="50"></textarea><br><br>
地址：<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>河北</option>
<option>天津</option>
<option>重庆</option>
<option>河南</option>
</select><br><br>
<button>提交</button> <button>重置</button> <button>按钮</button>
</form>
</div>
</body>
</html>
三、JavaScript算法设计
分析题目：
进行分析：找到此网页是第一步，你要是这一步都做不到，我也是无能为力了呀。开始，分析代码，源代码很贴近中国人标准，哈哈哈哈哈。我没有别的意思哈。chang，kuan，gao，各种ID都是给你定义好的，我们只需要写一个js函数在按钮点击时调用即可。我们列出来三个变量long，width，height，意思也很明显，获取到value值后进行parseInt转型，进行整数运算。之后将结果显示到相应区域即可（biaomianji，tiji），这么明显，老师真的是煞费苦心了，怕我们有丝毫的看不懂啊。最后，在button处调用吧。
直接效果图！
源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 上机考试操JS部分</title>
<style type="text/css">
p{
font-size:24px;
}
.xianshi{
font-size:36px;
background:#99CC33;
width:200px;
}
</style>
<script type="text/javascript">
//此处编写JS代码实现题目要求
function qiu(){
var long = document.getElementById("chang").value;
var width = document.getElementById("kuan").value;
var height = document.getElementById("gao").value;
l=parseInt(long);
w=parseInt(width);
h=parseFloat(height);
v=l*w*h;
document.getElementById("tiji").innerHTML=v;
s=2*(l*w+l*h+w*h);
document.getElementById("biaomianji").innerHTML=s;
}
</script>
</head>
<body>
<div>
<iframe id="header" src="header.html" scrolling="no" width="100%" height="700px"></iframe>
</div>
<div id="content">
<center>
<p style="font-size:24px;">按照下面表单各项，请实现当输入长方体的长，宽，高时，在相应的元素中显示出长方体的<b>表面积和体积</b></p>
<p><a href="index.htm" style="background-color:#FF3399; font-size:24px">返回考试首页</a></p>
<p style="font-size:40px;">我的JavaScript代码设计</p>
<br>
<hr/>
<p > 长：<input id = "chang" type="text" name="chang" value="" size="10"/>
<br><br>
宽：<input type="text" id = "kuan" name="宽" value="" size="10"/>
<br><br>
高：<input type="text" name="高" id = "gao" value="" size="10"/>
<br />
<br/>
<input type="button" name="jisuan" value="计算体积和表面积" onclick="qiu()"/>
<br><br>
</p>
<p id="biaomianji" class="xianshi" style="font-size:18px;">此处显示表面积</p>
<p id="tiji" class="xianshi" style="font-size:18px;">此处显示体积</p>
<div style="margin:10px;">
<center>
<iframe runat="server" src="footer.html" width="980" height="150" frameborder="0" scrolling="no"></iframe>
</center>
</div>
</body>
</html>
四、JQuery设计与实现
题目分析：
分析：这个说啥呢，其实没啥可说的，就是最简单的一个jQuery导入，然后调用淡入淡出罢了，如果不习惯是因为你看别的代码习惯了，他的符号你看着不顺眼而已。此处需要强调一下，定义的都是匿名函数，一定要注意好语句别写错。
对了！！！最最最最重要的一点，因为老师这个源代码有些问题，不要在注释着请在此处编写函数实现题目要求的后面写代码，新起一个script吧，要不然不能实现淡入淡出。这个效果需要自己体验，还是蛮好玩的，直接上源代码吧！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 上机考试操JQuery部分</title>
<style type="text/css">
p{
font-size:24px;
}
.xianshi{
font-size:36px;
background:#99CC33;
width:200px;
}
</style>
</head>
<body>
<div>
<iframe id="header" src="header.html" scrolling="no" width="100%" height="700px"></iframe>
</div>
<div id="content">
<center>
<p style="font-size:24px;">请设计代码实现：点击按钮时以下三个色块淡入淡出<b>要求函数应用JQuery（注：相应的文件在js文件夹中）</b></p>
<p><a href="index.htm" style="background-color:#FF3399; font-size:24px">返回考试首页</a></p>
<p style="font-size:40px;">我的JQuery效果展示</p>
<br>
<hr/>
<script src="js/jquery-3.4.1.min.js">
//请在此处编写函数实现题目要求
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(1000);
});
});
</script>
</head>
<body>
<button>点击按钮观察淡入淡出下面的色块。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
<div style="margin:10px;">
<center>
<iframe runat="server" src="footer.html" width="980" height="150" frameborder="0" scrolling="no"></iframe>
</center>
</div>
</body>
</html>
五、样式表单考察
题目分析：
分析：
话说题不应该是越做越难嘛，这个怎么越来越放水。。。哈哈哈哈，这个主要就是读懂题目，要把代码写进老师给你的样式文件里面去，再引用它。这个实在实在不知道说点啥，直接上效果。
源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 上机考试操</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div>
<iframe id="header" src="header.html" scrolling="no" width="100%" height="600px"></iframe>
</div>
<div id="content">
<ul>
<h1>表格设计与实现</h1>
<li><a href="table.html" style="font-size:18px; background:#00FFFF;">点击链接，按照页面显示的表格样式，在其下方设计并实现表格（10分）</a></li>
<h1>表单设计与实现</h1>
<li><a href="form.html" style="font-size:18px; background:#00FFFF;">点击链接，按照页面显示的表单样式在其下方设计并实现表单（10分）</a></li>
<h1>JavaScript算法设计</h1>
<li><a href="js.html" style="font-size:18px; background:#00FFFF;">点击链接，按照页面要求实现算法设计（10分）</a></li>
<h1>JQuery设计与实现</h1>
<li><a href="jquery.html" style="font-size:18px; background:#00FFFF;">点击页面链接按照页面要求实现操作效果（5分）</a></li>
<h1>样式表单考察</h1>
<li><a href="css/index.css" style="font-size:18px; background:#00FFFF;">将当前页面<b>li标签的行内样式</b>放入命名为“index.css”的文件，并实现外部文件引用不改变本页显示效果(5分)</a></li>
</ul>
</div> <!--cat end-->
</div> <!--main end-->
<center>
<iframe id="footer" runat="server" src="footer.html" width="980" height="150" frameborder="0" scrolling="no"></iframe>
</center>
</div><!--container end-->
</body>
</html>
css源代码：
li{
font-size:18px;
background:#00FFFF;
}
感谢大家的观看，希望对大家有帮助！谢谢~
所有文件我已经压缩好，正在审核中，审核完后大家可以直接下载文件~
4263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
