WEB前端——TWO（注册表，仿小米商城）

@DKX

已于 2024-02-01 14:36:45 修改

阅读量392

点赞数 7

文章标签：前端

于 2024-01-09 23:07:37 首次发布

本文链接：https://blog.csdn.net/qq_68600196/article/details/135491529

版权

作业①：

创建如下注册表

代码呈现：

<!DOCTYPE html>
<html>
	<head>
		<title>注册表单</title>
	</head>
	<body>
		<form>
			<table>
				<tr bgcolor="C0C0C0"">
				    <td align=" center" colspan="2">用户注册</td>
				</tr>
				<tr bgcolor="E6E6E6">
					<td align="right">用户名</td>
					<td><input type="text" name="UserName" maxlength="20" size="15" /></td>
				</tr>
				<tr bgcolor="E6E6E6">
					<td align="right">密码</td>
					<td><input type="password" name="UserPass" maxlength="20" size="15" /></td>
				</tr>
				<tr bgcolor="E6E6E6">
					<td align="right">性别</td>
					<td>
						<input type="radio" name="sex" value="男" checked> 男
						<input type="radio" name="sex" value="女"> 女
					</td>
				</tr>
				<tr bgcolor="E6E6E6">
					<td align="right">爱好</td>
					<td>
						<input type="checkbox" name="like" value="写作"> 写作
						<input type="checkbox" name="like" value="听音乐"> 听音乐
						<input type="checkbox" name="like" value="体育"> 体育
					</td>
				</tr>
				<tr bgcolor="E6E6E6">
					<td align="right">省份</td>
					<td>
						<select name="province">
							<option value="shaanxi" selected>陕西省</option>
							<option value="shanxi">山西省</option>
						</select>
					</td>
				</tr>
				<tr bgcolor="E6E6E6">
					<td align="right">自我介绍</td>
					<td><textarea name="intro" cols="25" rows="5">这个家伙什么也没留下</textarea></td>
				</tr>
				<tr bgcolor="E6E6E6">
					<td bgcolor="C0C0C0" colspan="2" align="center">
						<input type="submit" name="send" value="提交">
						<input type="reset" name="reset" value="重置">
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

结果呈现：

（表格图）

（信息提交图）

作业②：

创建类似于仿小米商城页面（手机部分），如下图：

代码呈现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米商城</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.container {
			position: relative;
			background-color: rgba(105, 101, 101, .6);
			display: inline-block;
		}

		.Miphone-list li {
			margin: 10px;
			padding: 10px;
			display: flex;
			align-items: center;
		}

		.Miphone-list li img {
			width: "40px";
			height: "40px";
		}

		.container:hover>ul {
			display: inline-block;
		}

		ul {
			list-style: none;
			position: absolute;
			left: 70px;
			top: 0px;
			width: 250px;
			display: none;
		}

		li {
			margin-bottom: 15px;
		}

		#Miphone {
			width: 70px;
			display: inline-block;
		}

		#Miphone:hover {
			background-color: #ff6a00;
		}

		.Miphone-list li:hover>div {
			color: #ff6a00;
		}
	</style>
	<body>
		<div class="container">
			<div id="Miphone">
				<h4>手机</h4>
			</div>
			<ul class="Miphone-list">
				<li>
					<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5c57d3a5e8a2fde79bcffce9d5344c80.png?thumb=1&w=80&h=80&f=webp&q=90"
						alt="Xiaomi Mix系列">
					<div>Xiaomi Mix系列</div>
				</li>
				<li>
					<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d989ce63c679d0e9e8cf64397cef588a.png?thumb=1&w=80&h=80&f=webp&q=90"
						alt="Xiaomi 数字系列">
					<div>Xiaomi 数字系列</div>
				</li>
				<li>
					<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4ed8c4ca59357db902916b5b9dfb8016.png?thumb=1&w=80&h=80&f=webp&q=90"
						alt="Xiaomi Civi系列">
					<div>Xiaomi Civi系列</div>
				</li>
				<li>
					<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/faec0354fdd95311ed8ae9a5e4e4df0e.png?thumb=1&w=80&h=80&f=webp&q=90"
						alt="Redmi K系列">
					<div>Redmi K系列</div>
				</li>
				<li>
					<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2a6dfdc51ff25583042e86d9ae2697b3.png?thumb=1&w=80&h=80&f=webp&q=90"
						alt="Redmi Note系列">
					<div>Redmi Note系列</div>
				</li>
				<li>
					<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c15a3d1b4e8bf2af17e6b5ad5559cfcb.png?thumb=1&w=80&h=80&f=webp&q=90"
						alt="Redmi 数字系列">
					<div>Redmi 数字系列</div>
				</li>
			</ul>
		</div>
	</body>
</html>

结果演示：