WEB前端练习（二）

最新推荐文章于 2024-07-29 15:46:22 发布

fox_kang

最新推荐文章于 2024-07-29 15:46:22 发布

阅读量36

点赞数 1

分类专栏： HTML学习之路文章标签：前端 html css

本文链接：https://blog.csdn.net/fox_kang/article/details/131033104

版权

HTML学习之路专栏收录该内容

5 篇文章 0 订阅

订阅专栏

练习：

用HTML实现以下页面设计

实现代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.color{
				background-color: gainsboro;
			}
			
			.top_and_last{
				background-color:  darkgray;
			}

		    /*tr > td > h2{
				height: 0px;
			} */
			
			h2{
				padding: 0px; /* -- 内边距 */
				margin: 0px; /* -- 外边距 */
			}
		</style>
	</head>
	<body>
		<table width="350" border="1" cellspacing="1" cellpadding="1">
			<form action="#" method="get" entype="text/plain">
			<tr class="top_and_last">
				<td colspan="2" align="center">
					<h2 height="30">用户注册</h2>
				</td>
			</tr>
			
			<tr class="color">
				<td align="right" >用户名</td>
				<td><input type="text" name="username"></td>
			</tr>
			
			<tr class="color">
				<td align="right">密码</td>
				<td><input type="possword" name="possword" ></td>
			</tr>
			
			<tr class="color">
				<td align="right">性别</td>
				<td>
				<input type="radio" name="sex" value="男">男
				<input type="radio" name="sex" value="女">女
				<input type="radio" name="sex" value="跨性别者">跨性别者
				</td>
			</tr>
			
			<tr class="color">
				<td align="right">爱好</td>
				<td>
					<input type="checkbox" name="aihao" value="interest_1">写作
					<input type="checkbox" name="aihao" value="interest_2">听音乐
					<input type="checkbox" name="aihao" value="interest_3">体育 
				</td>
			</tr>
			
			<tr class="color">
				<td align="right">省份</td>
				<td>
					<select name="省份名称">
					<option value="陕西省" selected>陕西省</option>
					<option value="山西省">山西省</option>
					<option value="江西省">江西省</option>
					</select>
				</td>
			</tr>
			
			<tr class="color">
				<td>自我介绍</td>
				<td>
					<textarea name="自我介绍" id="" cols="40" rows="8">
						
					</textarea>
				</td>
			</tr>
			
			<tr class="top_and_last">
				<td colspan="2" align="center">
					<input type="submit"/>
					&nbsp;
					<input type="reset"/>
				</td>
			</tr>
			
			</form>
		</table>
	</body>
</html>

效果展示：