- 1ZooKeeper集群和Fafka集群
- 2各搜索引擎爬虫UA大全2020最新版_百度ua
- 3干货！分享 10 个用于并行和分布式机器学习任务的Python框架_现有的分布式机器学习框架
- 4mysql基础面经之二：索引、分区_mysql 分区索引
- 5微信小程序wxss相关介绍、全局配置和tabbar知识以及发送网络数据请求(post,get)_微信小程序 navigation-bar通信(1)
- 609数据表对象_数据对象表
- 715.考研指导网站的设计与实现|基于SSM+ Mysql+Java设计与实现(可运行源码+数据库+设计文档+lw)
- 8Java8强大的新特性 —— “Stream API”_java stream api
- 9Docker安装ES_docker 安装es
- 10鸿蒙HarmonyOS应用开发者认证 题库+答案案_鸿蒙开发者认证题库filetype: doc
HTML登录界面_html前端登录界面
赞
踩
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
<style>
* {
margin: 0 auto;
padding: 0px;
}
body {
background-image: url(img/tp/tm-img-08.jpg);
/* 让这张图片他变成动态的 */
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
.wrap {
border: 1px rgb(210, 54, 54);
width: 400px;
height: 400px;
background-image: url(img/tp/tm-img-03.jpg);
}
.header-ar {
width: 100%;
height: 400px;
border: 1px;
position: relative;
line-height: 50px;
}
h1 {
text-align: center;
font-family: 楷体;
}
.zhanghao {
position: relative;
left: 15%;
font-size: 20px;
top: 2%;
}
.shojihao-type1 {
position: relative;
left: 15%;
font-size: 20px;
top: 2%;
width: 200px;
}
.shojihao-type1:hover {
background-color: rgb(217, 207, 227);
}
.minma-2 {
position: relative;
left: 15%;
font-size: 20px;
top: 2%;
}
.shojihao-type2 {
position: relative;
left: 15%;
font-size: 20px;
top: 2%;
width: 200px;
}
.shojihao-type2:hover {
background-color: rgb(217, 207, 227);
}
.wjmm {
font-size: 15px;
position: relative;
left: 15%;
top: 3%;
}
a {
text-decoration: none;
padding: 0%;
}
.zhuc {
position: relative;
left: 0%;
font-size: 20px;
top: 2%;
}
.denglu {
position: relative;
left: 8%;
font-size: 20px;
top: 2%;
}
.xiahuaxian {
position: relative;
top: 30%;
float: left;
width: 36%;
}
.xiahuaxian1 {
position: relative;
top: 18%;
float: right;
width: 36%;
}
.gengduo-denglu {
position: relative;
top: 24%;
right: 20%;
}
.denglu-xianghei {
text-align: center;
border: 1px;
position: relative;
width: 40%;
top: 24%;
left: 0%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header-ar">
<h1>登录界面</h1>
<span class="zhanghao">账号</span>
<input class="shojihao-type1" type="text" placeholder="输入手机号"><br>
<span class="minma-2">密码</span>
<input class="shojihao-type2" type="password" placeholder="输入密码">
<span class="wjmm"><a href="">忘记密码?</a ></span><br />
<button class="zhuc">注册</button>
<button class="denglu">登录</button>
<hr class="xiahuaxian">
<span class="gengduo-denglu">更多登录</span>
<hr class="xiahuaxian1">
<div class="denglu-xianghei">
<a href="">< img src="qq.png" alt="" width="20px" height="20px"></a >
<a href="">< img src="微信.png" alt="" width="20px" height="20px"></a >
<a href="">< img src="邮箱.png" alt="" width="20px" height="20px"></a >
</div>
</div>
</div>
</body>
</html>
