设置用户登录注册界面(html+css)

最新推荐文章于 2024-05-31 11:20:07 发布

lhf@@yxg

最新推荐文章于 2024-05-31 11:20:07 发布

阅读量1.3k

点赞数 3

文章标签： css html js

本文链接：https://blog.csdn.net/weixin_49143405/article/details/120733600

版权

一,创建css文件,写css

/* 修饰输入框 */
.a{
	width: 300px;/* 宽度 */
	height: 30px;/* 高度 */
	font-size: 20px;/* 字号 */
	padding: 15px;/* 内边距padding */
}
/* 修饰文字说明 */
.b{
	text-indent: 20px;/* 首行缩进 */
	font-size: 8px;/* 字号 */
	color: gray;/* 颜色 */
}
/* 修饰我已阅读 */
#note{
	padding-left: 20px;/* 内边距-左边距 */
}
/* 修饰注入按钮 */
input[type='submit']{
	text-align: center;/* 居中 */
	width: 330px;/* 宽度 */
	height: 50px;/* 高度 */
	font-size: 20px;/* 字号 */
	background-color: orangered;/* 背景色 */
	border-color: orangered;/* 边框颜色 */
	color: white;/* 字的颜色 */
}
/* 修饰用户注册 */
h3{
	margin-left: 130px;/* 左边距 */
}

二,创建HTML文件,引入css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 用户注册</title>
		
		<!-- 在HTML网页中引入css代码 -->
		<link rel="stylesheet" href="2.css" />
	</head>
	<body>
		<!--只有form标签才能提交数据:必须用form+必须有submit+必须设置name属性
			method属性用来设置数据提交方式(get/post,默认是get)
			action属性用来设置数据将要交给哪个java程序来处理
		-->
		<form method="post" action="#">
			<h3>用户注册</h3>
			<table>
				<tr>
					<td>
						<input class="a" type="text" placeholder="用户名" name="user"/>
					</td>
				</tr>
				<tr>
					<td class="b" > 支持中文、字母、数字、“-”、“_”的组合，4-20个字符 </td>
				</tr>
				<tr>
					<td>
						<input class="a"  type="password" placeholder="设置密码" name="pwd"/>
					</td>
				</tr>
				<tr>
					<td class="b" > 建议使用数字、字母和符号两种以上的组合，6-20个字符 </td>
				</tr>
				<tr>
					<td>
						<input class="a"  type="password" placeholder="确认密码" name="repwd"/>
					</td>
				</tr>
				<tr>
					<td class="b" > 两次密码输入不一致 </td>
				</tr>
				<tr>
					<td>
						<input class="a"  type="text" placeholder="验证手机" name="phone"/> 
						或
						<a href="#">验证邮箱</a>
					</td>
				</tr>
				<tr>
					<td id="note">
						<input type="checkbox" /> 
						我已阅读并同意
						<a href="#">京淘用户注册协议</a>
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="立即注册"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

三,JS

1,概述
全称是javascript,是java脚本语言.用来增强网页的交互性.
JS是基于对象和事件驱动的脚本语言
基于对象: js和java一样,可以创建对象并使用对象.
事件驱动: js代码必须想办法触发才会执行,常见事件: 单击/双击/鼠标划入划出…
脚本语言: js的运行必须在浏览器里
JS特点: 直译式,弱类型的语言. 跨平台(浏览器),一定的安全性
2,入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js</title>
		<!-- JS出现的位置: 行内JS + 内部JS + 外部JS -->
		
		<!-- 在网页中添加js代码 -->
		<script>
			alert('您路过了div元素')
		</script>
	</head>
	<body>
		<!-- 单击div时弹出提示 -->
		<div onclick="alert('您路过了div元素')">我是div</div>
		
		<!-- 双击a时弹出提示 -->
		<a ondblclick="alert('您路过了div元素')">我是a</a>
		
		<!-- 鼠标划入span1时弹出提示 -->
		<span onmouseenter="alert('您路过了div元素')">我是span1</span>
		
		<!-- 鼠标划出span2时弹出提示 -->
		<span onmouseout="alert('您路过了div元素')">我是span2</span>
		
	</body>
</html>

lhf@@yxg

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
设置用户登录注册界面(html+css)

一,创建css文件,写css/* 修饰输入框 */.a{ width: 300px;/* 宽度 */ height: 30px;/* 高度 */ font-size: 20px;/* 字号 */ padding: 15px;/* 内边距padding */}/* 修饰文字说明 */.b{ text-indent: 20px;/* 首行缩进 */ font-size: 8px;/* 字号 */ color: gray;/* 颜色 */}/* 修饰我已阅读 */#note{
复制链接

扫一扫