写一个登录注册页面(x新手练习
本帖最后由 这是昵称的昵称 于 2020-8-28 15:51 编辑页面样式：
最近在学习htmlcss和jquery。因为学校里写作业经常要用到登录注册页面，然后最近学习，学习的时候不练手就容易忘记，就写了一个登录注册页面的模板来试试手。看上去还是可以的
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script>
$(function () {
$("#es").click(function () {
$("#asd").css("background-color","green");
$(".login").css("background-color","skyblue");
});
$("#nor").click(function () {
$("#asd").css("background-color","skyblue");
});
});
</script>
<style>
* {
padding: 0;
margin: 0
}
a {
text-decoration: none;
}
li {
list-style: none;
}
body {
background: skyblue;
}
.bgDiv {
width: 547px;
height: 403px;
overflow: hidden;
}
.login {
width: 500px;
height: 300px;
background: #fff;
margin-top: 34px;
margin-left: 50px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border-radius: 50px;
}
.username,
.pwd
{padding-top:40px;
text-align: center;
width: 60px;
height: 60px;
border-bottom: 1px solid #efefef;
margin: 0 28px;
/*line-height:60px;*/
}
.userInp,
.pwdInp {
width: 320px;
height: 25px;
margin-top: 18px;
border: none;
outline: none;
margin-left: 20px;
}
.btn,
.rgs {
width: 100px;
height: 40px;
background: #4892ff;
border: 1px solid #326dcc;
color: #fff;
font-size: 16px;
margin-left: auto;
}
</style>
</head>
<body id="asd">
<div>
<button id="es">切换颜色</button>
<button id="nor">还原</button>
</div>
<divstyle=" text-align: center;margin-top: 200px;">
<div class="bgDiv">
<div class="login">
<div class="username">
<input class="userInp" type="text" placeholder="请输入用户名"/>
</div>
<div class="pwd">
<input class="pwdInp" type="password" placeholder="请输入密码"/>
</div>
<button class="btn">登录</button><button class="rgs">注册</button>
</div>
</div>
</div>
</body>
</html>
大哥，你对美化是不是有点误解啊 大哥，你对美化是不是有点误解啊 本帖最后由 qzhing 于 2020-7-24 15:27 编辑
错了错了，不灌水了 华桥 发表于 2020-7-24 15:08
大哥，你对美化是不是有点误解啊
每个人的审美不同，他估计就没有审美 加油吧。哈哈哈哈 继续努力,还有很大的空间 不用PS切片怎么美化，只能算是登录界面 我想知道Python怎么做一个网站，我学了基础的 文本框和按钮也得统一圆角嘛，20px差不多了你给50太大，hover可以加上。一般来说css写外面html引用 整洁又方便修改。