案例---利用CSS对注册页面实现修饰

最新推荐文章于 2024-09-03 14:47:13 发布

jiehaoxiang

最新推荐文章于 2024-09-03 14:47:13 发布

阅读量1.6k

点赞数 3

分类专栏： # java web教材练习题文章标签： javaweb

本文链接：https://blog.csdn.net/qq_40956679/article/details/82830820

版权

java web教材练习题专栏收录该内容

16 篇文章 4 订阅

订阅专栏

设计如图1所示的注册页面，该页面没有修饰，不够美观，采用CSS修饰页面，重新设计页面，如图2所示。

图一：

一、原页面代码：ch02_8_1_register.html

<!--程序 ch02_8_1_register.html-->
<!DOCTYPE html>
<html>
	<head><meta charset="UTF-8"><title>注册页面</title></head>
	<body>
		<form action="">
			<table border="0"align="center"width="600">
				<tr><td colspan="3"align="center"height="40">填写注册信息</td></tr>
				<tr><td align="right">用户名：*</td>
					<td><input type="text" name="userName"/></td>
					<td>用户名由字母开头，后跟字母、数字或下划线！</td>
				</tr>
				<tr><td align="right">密码：*</td>
					<td><input type="password"name="userPwd"</td>
					<td>设置登入密码，至少6位！</td>
				</tr>
				<tr><td align="right">确认密码：*</td>
					<td><input type="password"name="userPwd1"/></td>
					<td>请再一次输入你的密码！</td>
				</tr>
				<tr><td align="right">性别：*</td>
					<td><input type="radio"name="userSex"value="男"checked/>男
						<input type="radio"name="userSex"value="女"/>女</td>
						<td>请选择你的性别！</td>
				</tr>
				<tr><td align="right">邮箱地址：*</td>
					<td><input type="text"name="userEmail"/></td>
					<td>请填写您的常用邮箱，可以用此邮箱找回密码！</td>
				</tr>
				<tr><td align="right"valign="top">基本情况：*</td>
					<td colspan="2">
					<textarea name="userBasicInfo"rows="5"cols="50"></textarea></td>
				</tr>
				<tr><td colspan="3"align="center"height="40">
					<input type="submit"value="确认"/>&nbsp;
					<input type="reset"value="取消"/>
				</td>
				</tr>
			</table>
	</body>
</html>

二、设计CSS样式表文档ch02_8_Css.css

<!--程序ch02_8_Css.css-->
<style type="text/css">
	#title{color: #FF7B0B;font-size: 20px;font-weight: bod;}
	#i{width: 350px;height: 15px;color: bule;font-size: 12px;}
	table{text-align: left;}
	#t{text-align: right;}
</style>>

三、利用CSS对页面实现修饰

利用CSS样式表所定义内容，对程序ch02_8_1_register.html修改，形成新代码文档ch02_8_2_registerCss.html。

首先，通过import导入，修改这部分的代码如下：

<head><meta charset="UTF-8"><title>注册页面</title>
	<style type="text/css">@import url(ch02_8_Css.css);</style>
</head>

然后，修改页面的<body></body>之间的代码，其部分代码如下：

<tr><td colspan="3"align="center"height="40" id="title">填写注册信息</td></tr>
<tr><td align="right" id="t">用户名：*</td>
	<td><input type="text" name="userName"/></td>
	<td id="t">用户名由字母开头，后跟字母、数字或下划线！</td>
</tr>

所以呢？没感觉有啥。。。