純HTML+CSS靜態百度登入介面製作
阿新 • • 發佈：2019-02-07
本次採用的是純HTML+CSS製作出的靜態顯示效果,時間匆匆,做的比較簡單,真正的登入框是通過點選右下角的二維碼和電腦小標圖可以進行二者得切換,HTML+CSS+JS版本的登入框下次再發給大家......
執行結果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度登入框</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body
{
font-size: 12px;
}
a
{
text-decoration: none;
color: #2647CB;
}
a:hover
{
text-decoration: underline;
color: red;
}
.wrap
{
width: 390px;
height: 450px;
margin: 50px auto;
border: 1px solid #8A8989;
position: relative;
}
.main
{
width: 350px;
height: 400px;
margin: 0 auto;
}
.header
{
width: 100%;
height: 50px;
line-height: 50px;
background-image: url(images/foot.png);
background-color: rgb(247,247,247);
background-repeat: no-repeat;
}
.header h3
{
display: inline-block;
line-height: 50px;
margin-left: 50px;
}
.header span
{
display: inline-block;
float: right;
margin: auto 15px;
font-size: 30px;
}
.inputDiv
{
display: block;
width: 350px;
height: 40px;
margin: 10px auto;
}
.phoneIn
{
display: inline-block;
float: right;
font-size: 14px;
background-image: url(images/phone.png);
background-repeat: no-repeat;
margin: 30px 0px 10px 0px;
}
.smBtn
{
background: #2066C5;
color: white;
font-size: 18px;
font-weight: bold;
height: 50px;
border-radius: 4px;
}
.smBtn:hover
{
background: #4067EE;
}
.pull-right
{
display: inline-block;
float: right;
}
.other
{
width: 350px;
padding-top: 50px;
margin: 0 auto;
}
.toggleDiv
{
position: absolute;
right: 0;
bottom: 0;
z-index: 1000;
}
.weima
{
text-align: center;
padding-top: 50px;
width: 390px;
height: 400px;
}
.weima p
{
line-height: 50px;
}
</style>
</head>
<body>
<!-- 賬號密碼登入 -->
<div class="wrap">
<div class="header">
<h3>登入百度賬號</h3>
<span>X</span>
</div>
<div class="main">
<a href="" class="phoneIn">簡訊快捷登入</a>
<form action="">
<input type="text" class="inputDiv">
<input type="password" class="inputDiv">
<p class="inputDiv">
<input type="checkbox" value="checked" checked="checked"><label for="">下次自動登入</label>
<a href="" class="pull-right" >登入遇到問題</a>
</p>
<input type="submit" value="登入" class="inputDiv smBtn">
<a href="" class="pull-right" >立即註冊</a>
</form>
<div class="other">
<p>可以使用以下方式登入</p>
<a href=""><img src="images/qq.png" alt=""></a>
<a href=""><img src="images/wb.png" alt=""></a>
</div>
</div>
<div class="toggleDiv">
<img src="images/small2wm.png" alt="">
</div>
</div>
<!-- 二維碼登入 -->
<div class="wrap">
<div class="header">
<h3>登入百度賬號</h3>
<span>X</span>
</div>
<div class="weima">
<p>手機掃描,安全登入</p>
<img src="images/2weima.png" alt="">
<p>請使用手機百度app掃描登入</p>
</div>
<div class="toggleDiv">
<img src="images/cpt.png" alt="">
</div>
</div>
</body>
</html>