2017.4.20登录页面

来源：互联网发布：vip影视盒子源码编辑：程序博客网时间：2024/05/17 22:36

仿照百度账号登录界面制作了一个简易版的登录界面。还存在不足，关于位置的调控还学要进一步巩固学习。

页面登录实际设置了是在整个浏览器正中央显示，因为截图关系没能体现出来。

下面是代码如下：

HTML文档

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度登录</title>
</head>
<link href="deng.css" type="text/css" rel="stylesheet"/>
<body>

<div id="container">

<div id="d1">
登陆百度账号
</div>
<div id="d2">

<p><b><a href="https://passport.baidu.com/v2/?reg&u=https%3A//login.bce.baidu.com/%3Fredirect%3Dhttp%3A//beian.bce.baidu.com&tpl=bceplat">短信快捷登录</a>
</b></p>

</div>
<div id="d3">
<form>
<input type="text" name="user" style="width:350px;height:35px;margin-left:25px;"/ >
<br/>
<form>
<input type="password" name="password" style="width:350px;height:35px;margin-left:25px;margin-top:10px"/>

</div>
<div id="d4">
<form>
<input type="checkbox" name="vehicle" value="下次自动登录" checked="checked" style="margin-top:5%;" />
下次自动登录
</form>

</div>
<div id="d5">
<form>
<input type="button" value="登录"style="width:350px;height:35px;font-family:微软雅黑;color:white;background-color:#028CFD;margin-top:3%;margin-left:18px;"/>
<p><b><a href="https://login.bce.baidu.com/?redirect=http://beian.bce.baidu.com">立即注册</a>
<span><a href="https://passport.baidu.com/?getpassindex&tt=1492703396924&gid=28A36A1-D283-4013-BDA1-827C02A39BF5&tpl=bceplat&u=https%3A%2F%2Flogin.bce.baidu.com%2Fpostlogin%3F_1492703103385%26redirect%3Dhttp%253A%252F%252Fbeian.bce.baidu.com">忘记密码</a></span>
</b></p>
</div>
<p>
<pre>
温馨提示：
与百度搜索、百度贴吧、百度云盘、百度知道、百度文库等产品通用。
</pre>
</p>
</div>

</body>
</html>

设置了短信快捷登录，立即注册以及忘记密码直接链接到百度的这三项服务页面。

CSS文档

@charset "utf-8";
/* CSS Document */
a:link {text-decoration:none;} /* 未被访问的链接 */
a:visited {text-decoration:none;} /* 已被访问的链接 */
a:hover {text-decoration:underline;} /* 鼠标指针移动到链接上 */
a:active {text-decoration:underline;} /* 正在被点击的链接 */

#container
{
width:400px;
height:450px;
margin-left:auto;
margin-right:auto;
border:solid 1px #999;

}

#d1
{
font-family:微软雅黑;
font-size:20px;
text-align:center;
margin-top:10px;
width:auto;
height:40px;

}
#d2
{ margin-top:30px;
margin-left:80px;
font-size:14px;
width:300px;
height:auto;

text-align:right;

}
#d2 p
{
font-family:微软雅黑;
font-size:12px;

}
#d3{

}
#d4{
font-size:15px;
font-family:微软雅黑;
}
#d5
{margin:10px;
}

#d5 p{
font-family:微软雅黑;
font-size:12px;
margin-left:10%;
}
span
{
padding-left:60%;
}

0 0