24大数据技术10.15实验课作业

注意

必须在学习通下载对应资源
本次作业包含5个页面，请注意对应文件名，以及不要更改文件名和移动文件位置
为保持与课本代码一致，采用和课本代码一样的代码书写方式，实际上这种写法不符合Html标准结构（无head、body标签等）
点击代码块，可使用方向键左右移动查看代码
代码块右上角可以最小化代码
注释部分不需要敲
提交3个运行后截图，分别是主页界面，登录界面，注册界面

1.打开publicView文件夹，编辑文件header.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link rel="stylesheet" href="../css/header.css">
<meta charset="utf-8"/>
<div id="top"><!-- 页面头部 -->
	<div id="row1"><!-- 第一行 -->
		<div id="row11">date and time</div>
		<div id="row12">会员管理信息系统</div>
		<div id="row13">尚未登录！</div>
	</div>
	<div id="row2"><!-- 第二行 -->
		<ul>
			<!--本公共视图以页内框架的形式被其它功能页面引用，需要设置超链接 target="_blank"-->
			<li><a href="../index.html" target="_blank">站点主页</a></li>
			<li><a href="../mLogin.html" target="_blank">会员登录</a></li>
			<li><a href="../mRegister.html" target="_blank">会员注册</a></li>
			<li><a href="../index.html" target="_blank">会员登出</a></li>
		</ul>
	</div>
</div>

2.打开css文件夹，编辑文件header.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
*{
    box-sizing: border-box; 
    overflow: hidden;
    padding:0;margin:0;
    text-decoration: none;   /* 取消超链接默认的下划线 */
}
#top{  /* 网站头部 */
    margin: 0 auto; border: none;
    background-color: #CC6;
    display: flex;
    flex-direction: column;
    align-items:stretch;  /* 默认值，表示自动拉伸 */
    width: 60%;  /* 不必设置高度，弹性容器高度由它包含的项目决定 */
}
#top #row1{
    background-color:rgb(234, 243, 226);
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#row1 #row12{
    font-size: 2em;
    line-height: 2.2em;   /* 使得字体上下有一定的空白 */
    font-family: "方正舒体";
}
#row1 #row13{
    color: #FF0000;
}
#top #row2{   /* 菜单 */
    font-size: 1.5em;
    line-height: 2em;
}
#row2 ul{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;  /* 取消项目列表默认的符号 */
}
#row2 ul li a:hover{  /*伪类样式*/
    color: #FF0000; 
}

3.回到主目录，编辑文件index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!--
	会员管理系统主页 index.html
	要点1：通过<iframe>标签引入分部视图 header.html和 footer.html
	默认情况下，iframe元素具有固有宽度（300px）、高度（150px)和边框。
	因此，引入分部视图时，需要指定宽度为 100%和实际的高度，还要移除默认的边框。
	要点2：对分部视图  header.html和 footer.html，分别建立了外部样式，而主页使用内部样式，以避免主页样式过多。
-->
<meta charset='utf-8' />
<title>会员管理信息系统</title>
<iframe id="headFrame" src="publicView/header.html"></iframe>
<div id="main">   <!-- 主页主体内容 -->
	<div id="left">  <!--实验项目列表-->
		<div id="sy">实验项目</div>
		<ul>
			<li><a href="document/sy1.html" target="kj">1.Web项目开发基础及含开发环境</a></li>
			<li><a href="document/sy2.html" target="kj">2.使用HTML5标签组织页面内容</a></li>
			<li><a href="document/sy3.html" target="kj">3.使用CSS3样式修饰页面元素</a></li>
			<li><a href="document/sy4.html" target="kj">4.网页布局</a></li>
			<li><a href="document/sy5.html" target="kj">5.使用客户端脚本实现页面的交互效果或动态效果</a></li>
			<li><a href="document/sy6.html" target="kj">6.基于Node环境的Vue3项目开发</a></li>
			<li><a href="document/sy7.html" target="kj">7.Vue3 UI组件库Element Plus</a></li>
			<li><a href="document/sy8.html" target="kj">8.Web项目前后端分离开发</a></li>
		</ul>
	</div>
	<div id="right"> <!-- 显示详细内容 -->
		<iframe id="mainFrame" name="kj" src="index0.html"></iframe>
	</div>
</div>
<iframe id="footFrame" src="publicView/footer.html"></iframe>
<style>
    *{
		box-sizing: border-box;   /* 消除由于使用padding属性而引起的默认膨胀效果 */
		overflow: hidden;       /* 隐藏超出容器的内容 */
		padding:0;margin:0;    /* 内外填充属性值清 0 */
		text-decoration: none;   /* 取消超链接默认的下划线 */
    }
	#headFrame{  /* 使用 iframe标签引入页面 header.html */
		width: 100%;   /* 关键样式：默认情况下，iframe元素具有固有宽度（300px） */
		border: none;  /* 关键样式：移除边框 */
		height: 12%;  /* iframe元素默认高度为 150像素。如果不设置，则 headFrame与 main之间有空白 */
	}

	#main{
		margin: 1px auto;
		width: 60%;
        display: flex;
        background: url(../images/bg.jpg) repeat-x;
	}
	#main #left{
		width:30%;
		border: 1px solid darkgrey;
	}
	#left #sy{
		margin:20px 0 20px 0;
		font-size: 1.5em;
		text-align: center;
	}
	#left li{
		font-size: 1.3em;
		line-height: 2em;
		margin-left: 10px;
	}
	#main #right{
		width:70%;
	}
	#right #mainFrame{
		width:100%;
		height: 100%;
		overflow: hidden;
	}

	#footFrame{   /* 使用 iframe标签引入页面 footer.html */
		width: 100%;
		border: none;
	}
</style>

4.在主目录，编辑文件mLogin.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<meta charset="UTF-8">
<title>会员登录</title>

<iframe src="publicView/header.html" id="headFrame"></iframe>
<div id="main">  <!-- 页面主体内容 -->
    <form action="#" method="post">  <!--自处理表单-->
        <table>
            <caption>会员登录</caption>
            <tr>
                <td>会员名称：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>会员密码：</td>
                <td><input type="password"></td>
            </tr>
            <tr>
                <td><input type="button" value="确定"/></td>
                <td><input type="button" value="取消"/></td>
            </tr>
        </table>
    </form>
</div>
<iframe src="publicView/footer.html" id="footFrame"></iframe>

<style>
    #headFrame{  /* 使用iframe标签引入页面 header.html */
        width: 100%; 
        border: none;  
        height: 12%; 
    }

    #main{
        width:60%;
        margin: 0px auto;
        display: flex;  /* 弹性容器 */
        justify-content: center; /* 水平居中 */
        border: #999999 1px solid;
    }
    table caption{
        margin-top: 20px;
        font-size: 2em;
        color: red
    }
    table tr{
        font-size: 1.3em;
        line-height: 2em;
    }
    input,select{	/* 文本框等输入控件和下拉列表字体 */
        font-size: 0.9em;
    }

    #footFrame{  /* 使用iframe标签引入页面 footer.html */
        width: 100%;
        border: none;
    }
</style>

5. 编辑主目录中mRegister.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!--
	会员注册页面
	1、页面元素的主要层级关系：main>form>table>input
-->
<meta charset="UTF-8">
<title>会员注册</title>

<iframe src="publicView/header.html" id="headFrame"></iframe>
<div id="main">
	<form>
		<table>
			<caption>会员注册</caption>
			<tr>
				<td>会员名称：</td>
				<td><input type="text" size="30"></td>
			</tr>
			<tr>
				<td>会员密码：</td>
				<td><input type="password" size="30"></td>
			</tr>
			<tr>
				<td>性别：</td>
				<td><input type="radio" checked name="sex">男&nbsp;&nbsp;
					<input type="radio" name="sex">女</td>
			</tr>
			<tr>
				<td>兴趣爱好：</td>
				<td>
					<input type="checkbox">文艺&nbsp;
					<input type="checkbox">体育&nbsp;
					<input type="checkbox">游戏
				</td>
			</tr>
			<tr>
				<td>所在城市：</td>
				<td>
					<select>
						<option selected>北京</option>
						<option>上海</option>
						<option>武汉</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>上传照片：</td>
				<td><input type="file"></td>
			</tr>
			<tr>
				<td>个人简历：</td>
				<td><textarea id="jl">这是一个使用textarea标签制作的多行文本框，用于写个人简历之类的东东。</textarea></td>
			</tr>
			<tr>
				<td>
					<input type="button" value="确定"/>
					<input type="button" value="取消" style="margin-left: 5px"/>
				</td>
			</tr>
		</table>
	</form>
</div>
<iframe src="publicView/footer.html" id="footFrame"></iframe>

<style>
	#headFrame{  /* 使用iframe标签引入页面 header.html */
		width: 100%;
		border: none;
		height: 12%;
	}

	#main{		 /* 页面主体内容 */
		width:60%;
		margin: 0px auto;
		display: flex;  /* 弹性容器 */
		justify-content: center; /* 水平居中 */
		border: #999999 1px solid;
	}
	table caption{
		margin-top: 20px;
		font-size:2em;
		color:red
	}
	table tr{
		font-size: 1.3em;
		line-height: 2em;
	}
	input,select{	/* 文本框等输入控件和下拉列表字体 */
		font-size: 0.9em;
	}
	#jl{   /* 简历字段 */
		font-size: 0.9em;
		width:80%;
		text-indent:1em; /* 首行缩进2个字符 */
		resize: both;  /* 可以调节大小 */
	}

	#footFrame{  /* 使用iframe标签引入页面 footer.html */
		width: 100%;
		border: none;
	}
</style>