学习笔记（2）

最新推荐文章于 2024-08-13 09:11:34 发布

望穿流霞

最新推荐文章于 2024-08-13 09:11:34 发布

阅读量123

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_43281481/article/details/119088422

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

登录界面Login.htm

<html>
<head>
<title>登录</title>
<style>
form{width:400px;
	height: 250px;
	padding: 120px 100px;
	margin:25px auto;
        font-size: 18px;
	background-color: #E1E9EF;
	border-radius: 10px;
        border:1px solid black;
		}
.needinput{
    height: 40px;
    width: 300px;
	padding: 0 35px;
	border: none;
	background: #F8F9F9;
	font-size: 15px;
	box-shadow: 0px 1px 1px rgba(255,255,255,0.7),inset 0px 2px 5px #aaaaaa;
    color: #17202A;
	border-radius: 5px;
		}
input[type="submit"]{
	width: 110px;
	height: 40px;
	text-align: center;
	border-radius: 5px;
	font:16px "黑体";
	background-color: #C0C6CB;
	}
.smtxt{font-size:14px;}
a{text-decoration: none;}
a:hover{text-decoration:underline;}
</style>
</head>
<body>
<form>
<p>用户名<br />
<input type="text" class="needinput" placeholder="请输入用户名" /></p>
<p>密码<br/>
<input type="password" class="needinput" placeholder="请输入密码" /></p>
<p><input id="remember" type="checkbox" /><label for="remember" class="smtxt">记住密码</label></p>
<p><input type="submit" value="登录" /></p>
<p class="smtxt">还没有账户?<a href="register.htm">注册</a></p>
</form>
</body>
<html>

效果如下

在这里插入图片描述

注册页面Register.htm

<html>
<head>
<title>注册</title>
<style>
fieldset{width:400px;
	height: 480px;
	padding: 60px 100px;
	margin:25px auto;
    font-size: 18px;
	background-color: #E1E9EF;
	border-radius: 10px;
    border:none; 	}
legend{
font:24px 楷体;
padding:5px 15px;
background-color: #E1E9EF;
border-radius: 10px; }
.needinput{
    height: 40px;
    width: 300px;
	padding: 0 35px;
	border: none;
	background: #F8F9F9;
	font-size: 15px;
	box-shadow: 0px 1px 1px rgba(255,255,255,0.7),inset 0px 2px 5px #aaaaaa;
    color: #17202A;
	border-radius: 5px; }
input[type="submit"]{
	width: 110px;
	height: 40px;
	text-align: center;
	border-radius: 5px;
	font:16px "黑体";
	background-color: #C0C6CB;
    margin:45px auto 20px;
	display:block;   }
.smtxt{ font-size:14px; text-align:center; }
a{ text-decoration: none; }
a:hover{ text-decoration:underline; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>注册新用户</legend>
<p>用户名<br />
<input type="text" class="needinput" placeholder="请输入用户名" /></p>
<p>密码<br/>
<input type="password" class="needinput" placeholder="请输入密码" /></p>
<p>重新输入密码<br/>
<input type="password" class="needinput" placeholder="重新输入密码">
<p>性别：&nbsp;<input type="radio" name="gender" id="man"><label for="man">男 </label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label></p>
<p>是否了解本站：&nbsp;<input type="checkbox" id="well"><label for="well">很了解 </label>
<input type="checkbox" id="normal"><label for="normal">一般 </label> <input type="checkbox" id="no"><label for="no">不了解 </label></p>
<p><input type="submit" value="注册" /></p>
<p class="smtxt">已有账户?<a href="login.htm">登录</a></p>
</fieldset>
</form>
</body>
<html>