web登录界面

最新推荐文章于 2022-04-30 17:49:33 发布

原创最新推荐文章于 2022-04-30 17:49:33 发布 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #前端 #html

前端专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用HTML5和CSS技术来创建一个吸引人的、响应式的Web登录界面。通过实例代码和步骤解析，展示了如何利用HTML5的新特性实现表单验证，以及CSS实现界面布局和美化，包括栅格系统、动画效果和响应式设计，以确保在不同设备上呈现出良好的用户体验。

<!doctype html>
<html>
<head>
            
    <meta charset="utf-8">
    <title>文本框</title>
    <link href="work.css" type="text/css" rel="stylesheet">
</head>

<body>
    <p class="h"><b><a href="/css/" target="_blank">注册</a></b></p>
    <p class="hh"><b><a href="/css/" target="_blank">忘记密码?</a></b></p>
    <a href="#" class="button">登录</a>
<div class="mr-cont">
    <form>
        <!--使用label标签绑定单行文本框，实现单击图片时文本框也能获取焦点-->
        <label><input type="text" placeholder="请输入账号" class="txt"></label>
        <!--密码输入框-->
        <label><input type="password" placeholder="请输入6位密码" class="password"></label>
    </form>
</div>

</body>
<style>
    a:link {color:#000000;}      /* 未访问链接*/
    a:visited {color:#00FF00;}  /* 已访问链接 */
    a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
    a:active {color:#0000FF;}  /* 鼠标点击时 */
    </style>
</html>

@charset "utf-8";
/* CSS Document */
/*页面整体布局*/
.mr-cont{
	width:  500px;
    height: 539px;
	margin: 0px 600px;
	background: url(bg.png) no-repeat left top;   /*添加背景图片*/
    background-position:center;
    position:relative;
    z-index: 1;
}
/*表单整体位置*/
form{
	padding: 140px 400px;
}
label{
	color: green;
	display: block;
	padding-top: 10px;
	position: relative;
}
/*设置单行文本框和密码框的样式*/
label input{
	height: 25px;
	width: 200px;
	position: absolute;
    background-color: red;
}
label img{
	height: 28px;
}

.txt{
	display: block;
	margin: 10px;
    margin-left:-250px;
	width: 200px;
	height: 20px;
	background: url("user.png") no-repeat;
    background-size: 23px;
	text-indent: 28px;
}

.password{
	display: block;
	margin-left: -250px;
	margin-top:40px;
	width: 200px;
	height: 20px;
	background: url("pass.png") no-repeat;
    background-size: 23px;
	text-indent: 28px;
	
}

.h{
    position:absolute;
    width: 1600px;
    margin: 310px 810px ;
    z-index: 2;
}
.hh{position:absolute;
    width: 1600px;
    margin: 310px 850px ;
    z-index: 2;

}
.button {
    border-radius:5px;
    position:absolute;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 300px 700px;
    cursor: pointer;
    z-index: 2;
}