JavaWeb实验 HTML基础应用

巫师不要去魔法部乱说

已于 2024-03-25 09:45:08 修改

阅读量1.1k

点赞数 37

文章标签： html 前端 javascript

于 2024-03-05 09:30:00 首次发布

本文链接：https://blog.csdn.net/Jiangxia13/article/details/136431886

版权

本文介绍了如何利用HTML和CSS创建一个包含单元格合并的课程表，并展示了一个登录界面的设计，包括文本输入、密码输入和按钮，旨在帮助读者掌握网页基础应用和设计技巧。

摘要由CSDN通过智能技术生成

实验目的

掌握HTML基础应用；
掌握网页常见标签的使用方法；
掌握网页的排版和设计基础方法。

实验内容

【1】利用HTML创建一个课程表。如下图所示（也可以根据自己实际课程创建，但是必须体现单元格合并）：

<!DOCTYPE html>
<html>
<head>
<style>
td{border:2px solid pink}
</style>
<meta charset="UTF-8">
<title>GDPU生物信息学21级课表</title>
</head>
<body>
	<table style="border:2px solid pink;border-collapse:collapse" cellpadding=20>
		<caption>课表</caption>
	<tr>
		<td >时间段</td > <td >周一</td> <td >周二</td > <td >周三</td> <td >周四</td> <td >周五</td>
	<tr>
	
	<tr>
		<td >1</td> <td  rowspan=2>生物统计学（理论）</td> <td rowspan=2>JavaWed程序设计（理论）</td> <td  rowspan=2>计算机网络（理论）</td> <td  rowspan=2>生物信息学（理论）</td> <td  rowspan=2>数据挖掘（理论）</td>
	</tr>	
	
	<tr>
		<td ">2</td>
	</tr>
	
	<tr>
		<td >3</td> <td > </td> <td rowspan=2>操作系统（实验）</td> <td rowspan=2>计算机网络（实验）</td> <td  rowspan=2>生物信息学（实验）</td> <td > </td>
	</tr>
	
	<tr>
		<td >4</td> <td > </td> <td> </td>
	</tr>
	
	<tr>
		<td >5</td> <td  rowspan=2>操作系统（理论）</td> <td rowspan=2>生物统计学（实验）</td> <td rowspan=4>生理学（实验）</td> <td "> </td> <td rowspan=2>数据挖掘（实验）</td>
	</tr>
	
	<tr>
		<td >6</td> <td "> </td>
	</tr>
	
	<tr>
		<td >7</td> <td> </td> <td > </td> <td > </td> <td > </td>
	</tr>
	
	<tr>
		<td >8</td> <td > </td> <td > </td> <td > </td> <td > </td>
	</tr>
	
	
</body>
</html>

【2】利用HTML创建一个登录界面。如下图所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原神，启动</title>
<style>
body {
	background: url('./wallhaven-p97e9e.jpg');
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
}

form {
	position: relative;
	padding: 20px;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	transform: scale(10);
}

</style>
</head>
<body>
	<form align="center">
		账号<input type="text">
		<br>
		<br>
		密码<input type="password">
		<br>
		<br>
		<input type="button" value="原神，启动！" > 
	</form>
</body>
</html>