前端:登录界面
今天是暑期实习第二天,闲着没事做了个登录界面,就写在这里记录一下吧????<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewpo
·
今天是暑期实习第二天,闲着没事做了个登录界面,就写在这里记录一下吧😄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<!-- 添加内部样式begin -->
<style>
form {
border: 1px #ccc solid;
border-radius: 8px;
box-shadow: 2px 3px 20px #ccc;
width: 260px;
margin: auto;/* 当宽度固定可居中 */
padding: 0 20px;
}
.row{
border: 0px red solid;
margin-bottom: 15px;
}
.btn,h3{
margin: 30px 0;
}
/* 属性选择器 */
input[type='submit']{
width: 100%;
background-color: blue;
color: white;
border: 0;
padding: 5px 0;
border-radius: 20px;
}
label{
width: 66px;
display: inline-block;/* 内连块元素,宽度一定 */
text-align: right;
}
.txt{
padding: 5px;
border: solid 1px #ccc;
border-radius: 5px;
}
</style>
<!-- 添加内部样式end -->
<!-- 添加外部样式end -->
<!-- <link rel="stylesheet" href="css/style.css">-->
<!-- 添加外部样式end -->
</head>
<body>
<form action="">
<h3>用户登录:</h3>
<!-- 表单控件 -->
<!-- 布局元素div -->
<div class="row">
<!-- label内联元素,宽度自动 -->
<label for="name">用户名:</label>
<input class="txt" type="text" id="name" name="name" placeholder="请输入用户名">
</div>
<div class="row">
<label for="pass">密码:</label>
<input class="txt" type="password" id="pass" name="pass" placeholder="请输入密码">
</div>
<div class="row btn" >
<input type="submit" value="登录">
</div>
</form>
</body>
</html>
最终效果:
注:本文原创,转载请注明出处
更多推荐
已为社区贡献1条内容
所有评论(0)