html+css网页登录练习2
程序员文章站
2024-02-26 18:40:34
...
今天做了第二个练习，还是有些生疏，不过比昨天好了一点。margin和padding用的不好，还要仔细学学！
参考地址：https://blog.csdn.net/Biexiansheng/article/details/70240203
<html>
<head>
<title>我的网页登录练习2</title>
<style type="text/css">
body{
margin:0 auto;
padding:0;
}
.beijing{
width:1000px;
height:1000px;
background-color:yellow;
margin:0 auto;
}
.zhongjian{
padding:150px 0px;
width:600px;
height:600px;
margin:0 auto;
text-align:center;
}
.zhongjian h1{
text-align:center;
font-size:50px;
font-weight:30px;
color:blue;
border-radius:40px;
border:1px solid white;
width:520px;
height:74px;
background-color:pink;
margin:10 auto 50 auto;/*这里要注意一下*/
}
form input{
width:300px;
height:50px;
border-radius:30px;
text-align:center;
border:0;
padding:20px 5px;
display:block;/*这里要注意一下*/
margin:10 auto 10 auto;/*上 右 下 左*//*这里要注意一下*/
font-size:30px;
font-family:"楷体";
}
form button{
width:94px;
height:46px;
border:0px;
background-color:grad;
border-radius:20px;
font-size:15px;
font-family:"黑体";
}
</style>
</head>
<body>
<div class="beijing">
<div class="zhongjian">
<h1>柠檬学院</h1>
<form><!--这里要注意一下-->
<input type="text" name="username" placeholder="请输入账号"><br />
<input type="password" name="mima" placeholder="请输入密码"><br />
<button type="submit">登 录</button>
<button type="submit">找回密码</button>
</form>
</div>
</div>
</body>
</html>
效果图如下：