一个简单的登陆界面

来源：互联网发布：澳门导航软件编辑：程序博客网时间：2024/05/19 16:06

用html+css做了一个登陆界面
效果图：
这里写图片描述
html代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" href="main.css"></head><body><form action="checked,jsp" method="get">    <p><span>U</span>SERNAME</p>    <input type="text" name="username" placeholder="输入用户名" required>    <p><span>P</span>ASSWORD</p>    <input type="password" name="psw" placeholder="输入密码" required>    <p id="rec"><input class="receive" type="submit" name="submit" value="登入"><input class="receive" type="reset"><input class="receive" type="button" name="reighter" value="注册"> </p></form></body></html>

css代码：

html {background-color: #e6e9e9;background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);-webkit-font-smoothing: antialiased;}*{margin: 0px;padding: 0px;}body {margin: 0 auto;padding: 2em 2em 4em;max-width: 800px;height: 900px;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;color: #545454;background-color: #ffffff;background-image: url(1.jpg);background-repeat: no-repeat;}p {color:rgb(93, 190, 206);margin: 5px 0px 0px 0px;}form {background-color:rgba(62, 62, 62, 0.75);width: 180px;height: 160px;padding: 5px 10px;float: right;border-radius: 8px;box-shadow: 20px 20px 20px #888888;}span {font-size: 28px;}input {width: 13em;height: 1.2em;padding: 2px;}.receive {width:3.7em;height: 1.5em;margin-right: 10px;background-color: rgb(88, 88, 88);color: white;border: 0px;}#rec {background-color: rgb(88, 88, 88);margin-top: 10px;padding: 1px;border-radius: 5px;}

0 0