Web实验报告实验报告：
实验报告五
13_1.html
<!-- exp_13_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国传承千年礼仪之邦的由来</title>
<style type="text/css">
h1,
h3 {
text-align: center;
}
h1 {
text-shadow: 0 0 15px #55aa00;
/* 设置文本阴影 */
color: red;
padding-top: 10px;
height: 46px;
}
p {
text-indent: 2em;
column-count: 3;
/* 设置列数 */
column-gap: 40px;
/* 设置列间隙 */
column-rule: 4px dashed #ff0000;
/* 设置列宽度、线型、颜色 */
font-size: 22px;
line-height: 1.5em;
}
figcaption,img{width:700px;text-align: center;border-radius: 25px;}
img:hover{transform: scale(1.2,1.2);}
</style>
</head>
<body>
<article style="margin:20px auto;width:850px;heigth:500px;background:#FEFAFB;padding:30px;">
<header>
<hgroup>
<h1>中国传承千年礼仪之邦的由来</h1>
<h3><a href="#">中国是礼仪之邦，讲究礼尚往来。 </a></h3>
</hgroup>
<section>
<figure style="text-align:center;">
<img src="image-ex-13-1.jpg" width="700px" title="八礼四仪"><br>
<figcaption>▲能够与人和谐相处，适应环境、智慧待人，也是一个家族、民族优良素质的体现。在中国，这已经是一门深奥的学问。</figcaption>
</figure>
</section>
<section>
<p>中国素有"礼仪之邦"之称，正所谓有礼仪之大谓之夏，中国的礼节与仪式。中国礼仪以周为最，中国古代一般推行周礼。中国古代有五礼之说，祭祀之事为吉礼，冠婚之事为喜礼，宾客之事为宾礼，军旅之事为军礼，丧葬之事为凶礼。民俗界认为礼仪包括生、冠、婚、丧4种人生礼仪。实际上礼仪可分为政治与生活两大部类。政治类包括祭天、祭地、宗庙之祭，祀先师、先王、圣贤;乡饮、相见礼、军礼等。生活类包括五祀、高禖之祀、傩仪、诞生礼、冠礼、饮食礼仪、馈赠礼仪等。 中国礼仪在中国文化中起着"准法津"的作用。中国礼仪渗透于人们日常生活中的点点滴滴。餐桌上的礼仪，待客之道，拜访致礼等。现推广"八礼四仪"。</p>
</section>
</header>
<footer>
<h3><strong>中华民族礼仪之邦 悠久文化源远流长</strong></h3>
</footer>
</article>
</body>
</html>
13_2.html
<!-- exp_13_2.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>北京风景图片动画欣赏</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
h3{
width:1000px ;
height: 26px;
margin: 0 auto;
text-align: center;
padding: 5px auto;
}
#box {
width: 1000px;
height: 600px;
display: flex;
margin: 0 auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
box-shadow: 0 0 5px 15px #F3E3D3;
}
#box>div {
width: 300px;
height: 180px;
transition-duration: 3s;
}
#box>div>img {
width: 100%;
height: 100%;
}
#box>div:nth-child(1):hover {
transform: translate(665px, 200px);
/*移动*/
transition-property: all;
transition-duration: 3s;
}
#box>div:nth-child(2):hover {
transform: skew(210deg);
/*倾斜*/
transition-property: all;
transition-duration: 3s;
}
#box>div:nth-child(3):hover {
transform: rotateY(50deg);
/*旋转*/
transition-property: all;
transition-duration: 3s;
}
#box>div:nth-child(4):hover {
transform: rotateX(50deg);
/*旋转*/
transition-property: all;
transition-duration: 3s;
}
#box>div:nth-child(5):hover {
transform: scale(2);
/*缩放*/
transition-property: all;
transition-duration: 3s;
}
#box>div:nth-child(6):hover {
transform: rotateZ(180deg);
/*旋转*/
transition-property: all;
transition-duration: 3s;
}
#box>div:nth-child(7):hover {
transform: rotateZ(180deg) translate(-333px, 400px);
/*旋转并移动*/
transition-property: all;
transition-duration: 3s;
}
#box>div:nth-child(8):hover {
transform: rotateY(360deg);
/*旋转*/
transition-property: all;
transition-duration: 3s;
}
#box>div:nth-child(9):hover {
transform: rotateX(360deg);
/*旋转*/
transition-property: all;
transition-duration: 3s;
}
</style>
</head>
<body>
<h3>北京风景图片CSS3动画效果赏析</h3>
<div id="box">
<div><img src="image-ex-13-2-1.jpg" alt="" /></div>
<div><img src="image-ex-13-2-2.jpg" alt="" /></div>
<div><img src="image-ex-13-2-3.jpg" alt="" /></div>
<div><img src="image-ex-13-2-4.jpg" alt="" /></div>
<div><img src="image-ex-13-2-5.jpg" alt="" /></div>
<div><img src="image-ex-13-2-6.jpg" alt="" /></div>
<div><img src="image-ex-13-2-7.jpg" alt="" /></div>
<div><img src="image-ex-13-2-8.jpg" alt="" /></div>
<div><img src="image-ex-13-2-9.jpg" alt="" /></div>
</div>
</body>
</html>
实验报告六
12_1.html
<!-- exp_12_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style type="text/css">
fieldset {
width: 300px;
height: 150px;
border: 1px double #0033ff;
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<fieldset>
<legend>登录页面</legend>
用户名:<input type="text" name="username"><br>
密 码:<input type="password" name="pwd"><br>
类 型:
<input type="radio" name="r" value="r1">管理员
<input type="radio" name="r" value="r2">普通用户<br>
<input type="checkbox" name="cb" value="cb1">记住密码
<input type="checkbox" name="cb" value="cb2">自动登录<br>
<input type="submit" name="submit" value="提交">
<input type="reset" name="reset" value="重置">
</fieldset>
</form>
</body>
</html>
12_6_1.html
<!-- edu_12_6_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用会议注册表</title>
<style type="text/css">
body {text-align: center;}
h1 {font-size: 26px;text-align: center;}
.zhuce {font-size: 14px;text-align: center;width: 820px;
margin: 0 auto;background: url(image-12-6-bg.jpg);
box-shadow: 0 0 10px 10px #E1E2F5; /*设置边框阴影 */
}
.zhuce td {border: 1px solid #9B9B9B;padding: 2px 3px;}
.zhuce .ibg {text-align: left;}
.zhuce .bbg {padding: 5px 0;font-size: 16px;}
#bt {width: 120px;height: 35px;background: #FFFBDA;
margin: 0 20px;border-radius: 25px;/* 设置圆角边框 */
}
#bt:hover{background-color: #DFF100;} /* 盘旋时改变背景色 */
</style>
</head>
<body>
<h1>通用会议注册表</h1>
<form>
<table class="zhuce">
<tr>
<td width="100px">参会者姓名</td>
<td colspan="4" class="ibg"><input name="txtName" type="text"></td>
<td>职务</td>
<td colspan="3" class="ibg" >
<input name="txtZhiwu" type="text" placeholder="请输入您的职务">
</td>
</tr>
<tr>
<td>工作单位</td> <td colspan="8" class="ibg">
<input name="txtDanwei" type="text" style="width:500px;">
</td>
</tr>
<tr>
<td>电话</td> <td colspan="2" class="ibg">
<input name="txtTel" type="text"> </td>
<td>传真</td> <td class="ibg"> <input name="txtFax" type="text"> </td>
<td colspan="3">手机</td>
<td class="ibg"> <input name="txtMobil" type="text"> </td>
</tr>
<tr>
<td>通讯地址</td>
<td colspan="6" class="ibg">
<input name="txtAddress" type="text" style="width:400px;">
</td>
<td>邮编</td>
<td class="ibg"> <input name="txtPostCode" type="text"></td>
</tr>
<tr>
<td>E-mail</td>
<td colspan="6" class="ibg">
<input name="txtEmail" type="text" style="width:180px;">
</td>
<td>国家</td>
<td class="ibg">
<select name="ddlCountry" id="ddlCountry" style="width:180px;">
<option value ="" disabled>请选择</option>
<option value="中国" selected>中国</option>
<option value="欧洲-英国">欧洲-英国</option>
<option value="南美洲-巴西">南美洲-巴西</option>
<option value="美国">美国</option>
<option value="非洲-南非">非洲-南非</option>
</select>
</td>
</tr>
<tr>
<td>省份</td>
<td colspan="6" class="ibg">
<select name="ddlProvince" style="width:180px;">
<option value="请选择" disabled>请选择</option>
<option value="北京市">北京市</option>
<option value="天津市">天津市</option>
<option value="重庆市">重庆市</option>
<option value="上海市">上海市</option>
</select>
</td>
<td>城市</td>
<td class="ibg"><input name="txtCity" type="text" style="width:180px;"></td>
</tr>
<tr><td colspan="9"><p>会议费标准（人民币）</p></td></tr>
<tr>
<td colspan="2">身份 / 时间</td>
<td colspan="4"><input type="date" value="2021-08-27"/>之前注册</td>
<td colspan="3"><input type="date" value="2021-08-30"/>之后注册</td>
</tr>
<tr>
<td colspan="2">会员</td>
<td colspan="4"><input type="radio" name="rbMem" value="rbMem1">1500元</td>
<td colspan="3"><input type="radio" name="rbMem" value="rbMem2">1800元</td>
</tr>
<tr>
<td colspan="2">非会员</td>
<td colspan="4"><input type="radio" name="rbMem" value="rbNoMem1">1800元</td>
<td colspan="3"><input type="radio" name="rbMem" value="rbNoMem2">2000元</td>
</tr>
<tr>
<td colspan="9" class="bbg">
<input id="bt" type="submit" name="btnOk" value="提 交">
<input id="bt" type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
12_2.html
<!-- exp_12_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>应聘页面</title>
</head>
<body>
<form>
<strong>希望工作地点:</strong>
<select name="hangye" size=1>
<option value="北京" selected>北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="西安">西安</option>
<option value="杭州">杭州</option>
<option value="南京">南京</option>
<option value="重庆">重庆</option>
<option value="天津">天津</option>
</select>
<strong>月薪要求:</strong>
<input type="text" size=10>
<input type="checkbox">要求提供过渡住房<br>
<strong>请选择应聘行业:</strong><br>
<select name="hangye" size=8 multiple>
<option value="C1" selected>计算机软件</option>
<option value="C2">计算机硬件</option>
<option value="C3">计算机服务</option>
<option value="C4">通信/电信/网络设备</option>
<option value="C5">互联网/电子商务</option>
<option value="C6">网络游戏</option>
<option value="C7">电子技术/半导体/集成电路</option>
<option value="C8">仪器仪表/工业自动化</option>
</select>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
实验报告七
14_7_1.html
<!-- edu_14_7_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手机网上微店</title>
<style type="text/css">
table {width: 580px;height: 200px;
box-shadow: 0 0 15px 15px #F2F3F4;}
caption {margin: 15px auto;font-size: 22px;}
td {text-align: center;vertical-align: middle;}
.myBtn {margin: 20px;width: 120px;height: 45px;
border: 1px solid #44FFEE;border-radius: 25px;}
.myBtn:hover {background-color: #F1D2E3;}
</style>
<script type="text/javascript">
var result = ""; //存放选购信息
var price = new Array(2576.00, 2999.00, 3898.00, 699.00, 599.00, 699.00);
var product = new Array("iPhone 6 32GB 金色 移动联通电信4G", "OPPO R11 全网通 黑色版","Apple iPhone 6s Plus 32GB 金色 移动联通电信4G手机", "小米 红米手机4X 全网通版 2GB内存 16GB 香槟金", "小米 红米手机4A 全网通版 2GB内存 16GB 玫瑰金","小米 红米4X 全网通版 2GB内存 16GB 樱花粉");
var isSelected = new Array(0, 0, 0, 0, 0, 0);
function clearAll() {
isSelected = [0, 0, 0, 0, 0, 0]; //选择状态全部置0
//所有复选框状态变为未选中状态
myForm.sp0.checked = false;
myForm.sp1.checked = false;
myForm.sp2.checked = false;
myForm.sp3.checked = false;
myForm.sp4.checked = false;
myForm.sp5.checked = false;
}
function checkOut() {
var total = 0; //存放小计金额
var count = 0; //存放选购产品件数
for (var i = 0; i < isSelected.length; i++) {
count += isSelected[i];
}
for (var i = 0; i < price.length; i++) {
total = total + price[i] * isSelected[i] //累计金额
}
alert("您所选购的" + count + "件,产品总价=" + total + "\n" + "请去支付！");
}
function shoppingCart() {
//判断有多少个复选框被选中
var selectList = ""; //保存所选产品清单
for (var j = 0; j < product.length; j++) {
if (isSelected[j]) { //分行显示
selectList += (j + 1) + "-" + product[j] + ",价值=" + price[j] + "\n";
}
}
var info = (selectList == "") ? "您的购物车为空，请选购！" : selectList;
alert(info); //生成一个结算清单，显示输出
}
function checkSelect(number) {
var temp; //暂存复选框状态
switch (number) {
case 0:
temp = myForm.sp0.checked;
break;
case 1:
temp = myForm.sp1.checked;
break;
case 2:
temp = myForm.sp2.checked;
break;
case 3:
temp = myForm.sp3.checked;
break;
case 4:
temp = myForm.sp4.checked;
break;
default:
temp = myForm.sp5.checked;
break;
}
isSelected[number] = (temp) ? 1 : 0; //记录下选中产品，1-选中，0-未选
}
</script>
</head>
<body>
<form name="myForm" method="post" action="">
<table align="center" border="0">
<caption>手机批发业务-商品备选区</caption>
<tr>
<td><img src="mobile_1.jpg" /><br />
<h4 name="h41">iPhone 6 32GB 金色 移动联通电信4G</h4><input type="checkbox" name="sp0" value="2576"
onclick="checkSelect(0);">¥ 2576.00<br />
</td>
<td><img src="moblie_2.jpg" /><br />
<h4 name="h421">OPPO R11 全网通 黑色版</h4>
<input type="checkbox" name="sp1" value="2999" onclick="checkSelect(1);">¥ 2999.00<br />
</td>
<td><img src="moblie_3.jpg" /><br />
<h4 name="h43">Apple iPhone 6s Plus 32GB 金色 移动联通电信4G手机</h4>
<input type="checkbox" name="sp2" onclick="checkSelect(2);"> ¥ 3898.00<br />
</td>
</tr>
<tr>
<td><img src="moblie_4.jpg" /><br />
<h4 name="h44">小米 红米手机4X 全网通版 2GB内存 16GB 香槟金</h4><input type="checkbox" name="sp3" value="699"
onclick="checkSelect(3);"> ¥ 699.00
<br />
</td>
<td><img src="moblie_5.jpg" /><br />
<h4 name="h45"> 小米 红米手机4A 全网通版 2GB内存 16GB 玫瑰金</h4>
<input type="checkbox" name="sp4" value="599" onclick="checkSelect(4);">¥ 599.00<br />
</td>
<td><img src="moblie_6.jpg" /><br />
<h4 name="h46">小米 红米4X 全网通版 2GB内存 16GB 樱花粉</h4>
<input type="checkbox" name="sp5" value="699" onclick="checkSelect(5);">¥ 699.00<br />
</td>
</tr>
<tr>
<td colspan="3">
<input class="myBtn" type="button" value="查看购物车" onclick="shoppingCart();">
<input class="myBtn" type="button" value="收银台结算" onclick="checkOut();">
<input class="myBtn" type="button" value="初始化参数" onclick="clearAll();">
</td>
</tr>
</table>
</form>
</body>
</html>
实验报告八
15_6_1.html
<!-- edu_15_6_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册页面</title>
<style type="text/css">
strong {
color: red;
font-style: bolder;
}
fieldset {
width: 560px;
height: 186px;
padding: 0px 50px;
margin: 0 auto;
}
#button {
margin: 10px 20px;
}
</style>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function checkReg() {
var username = $("myname").value;
var pwd = $("mypwd1").value;
var pwdConfirm = $("mypwd2").value;
var checkright = true;
if (username == "" || pwd == "") //两者中有一个为空
{
alert("请确认用户名和密码输入是否正确！！");
checkright = false;
} else //不为空，再判断用户名和密码的长度合法性
{
if (username.length < 6) {
alert("用户名长度太短，至少6个字符！！");
checkright = false;
} else if (pwd.length < 6) {
alert("密码长度太短，至少6个字符！！");
checkright = false;
} else if (pwd != pwdConfirm) {
alert("两次输入的密码必须一致！！");
checkright = false;
} else {
checkright = true;
}
}
return checkright;
}
function clearInfo() {
var flag = confirm("确认要重置数据吗？");
if (flag == true) {
$("myname").value = "";
$("mypwd1").value = "";
$("mypwd2").value = "";
}
}
</script>
</head>
<body>
<form action="simple.html" method="get" onSubmit="return checkReg()" onReset="clearInfo()">
<fieldset>
<legend align="center">新用户注册</legend><br>
<div>
<label>用 户 名: </label>
<input type="text" name="myname" id="myname"><strong>(用户名要大于6位)</strong><br>
<label> 登录密码: </label>
<input type="password" name="mypwd1" id="mypwd1"><strong>(密码要大于6位)</strong><br>
<label> 密码确认: </label>
<input type="password" name="mypwd2" id="mypwd2"><br>
<input id="button" type="submit" value="用户注册">
<input id="button" type="reset" value="重置">
</div>
</fieldset>
</form>
</body>
</html>
15_1.html
<!-- exp_15_1.html 实验15-1 -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<html>
<head>
<title> 表单处理事件 </title>
<style type="text/css">
fieldset {
margin: 10px auto;
width: 300px;
height: 200px;
padding: 20px auto;
color: white;
text-align: center;
}
legend {
color: white;
font-size: 18px;
font-weight: bold;
text-align: center;
}
form {
background-color: #663399;
padding: 10px;
width: 360px;
height: 250px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
function checklogin() {
var username = document.getElementById("myname").value;
var pwd = document.getElementById("mypwd").value;
if (username == "") //两者中有一个为空
{
alert("用户名不能为空！！");
document.getElementById("myname").focus();
return false;
} else {
if (username.length < 8 || username.length > 20) {
alert("用户名太短，应在8~20个字符之间！！");
document.getElementById("myname").focus();
return false;
}
}
if (pwd == "") //两者中有一个为空
{
alert("密码不能为空！！");
document.getElementById("mypwd").focus();
return false;
} else {
if (pwd.length < 8 || pwd.length > 20) {
alert("密码太短，应在6~20个字符之间！！");
document.getElementById("mypwd").focus();
return false;
}
}
return true;
}
</script>
</head>
<body>
<form name="loginform" method="post" action="loginindex.html" onsubmit="return checklogin()">
<fieldset>
<legend>用户登录</legend>
<br><br>
<label>用户名</label>
<input type="text" name="" id="myname"><br><br>
<label>密 码</label>
<input type="password" name="" id="mypwd"><br><br><br>
<input type="submit" value="提交"><input type="reset">
</fieldset>
</form>
</body>
</html>
扫一扫
5593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
