html+css设置百度登陆框day6[作业]

来源：互联网发布：淘宝有ego女装官网吗? 编辑：程序博客网时间：2024/06/05 19:18

根据网上一个相似代码进行编写：

====================================================

html内容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>baidu</title>
<link href="../css/day6.css" type="text/css" rel="stylesheet">

</head>
<body>
<div id="gray"></div>
<div class="popup" id="popup">
<div class="top_nav" id='top_nav'>
<div align="center">
<i></i>
<span>登录百度账号</span>
<a class="guanbi"></a>
</div>
</div>
<div class="min">
<div class="tc_login">
<div class="right">
<form method="POST" name="form_login" target="_top">
<div align="center">
<a href="">短信快捷登录</a>
<i class="icon-mobile-phone"></i>
<input type="text" name="name" id="name" required="required" placeholder="用户名" autocomplete="off" class="input_yh">
<input type="password" name="pass" id="pass" required="required" placeholder="密码" autocomplete="off" class="input_mm">
</div>
<dd>
<div align="center"><a href="">登录遇到问题</a></div>
</dd>
<div align="center">
<input type="submit" class="button" title="Sign In" value="登录">
</div>
</form>
<dd>
<div align="center"><a href="#">立即注册</a></div>
</dd>
<hr align="center" />
<div>可以使用以下方式登陆</div>
</div>
</div>
</div>
</div>
</body>
</html>

==========================================================================

css文档内容：

*{
padding:0px;
margin:0px;
}
body{
min-width:880px;
background-color:#fafafa;
font:12px/1.5 arial,sans-serif;
}
body,ul,h1{margin:0px;}
ul{list-style-type:none;}
img{display:block;}/*变成块集元素*/
a{text-decoration:none;}

/*--弹窗样式--*/

#gray{
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
position:fixed;
top:0px;
}
.popup{
width:432px;
height:auto;
background-color:#fff;
position:absolute;
z-index:100;
border:1px solid #ebeaea;
left:370px;
top:96px;
/*display:none;*/
}
.popup .top_nav{
width:432px;
height:46px;
background-image: url(../img/popup_top_bj.jpg);
border-bottom:1px solid #ebeaea;
position:relative;
cursor:move;
}
.popup .top_nav i{
width:35px;
height:35px;
background:url(../img/tubiao.png) -314px -5px;
position:absolute;
top:6px;
left:8px;
display:block;
}
.popup .top_nav span{
font:18px/18px 'microsoft yahei';
color:#707070;
display:block;
position:absolute;
top:13px;
left:50px;
}

.popup .top_nav a.guanbi {
background:url(../img/popup_guanbi.png) repeat 0px 0px;
width:35px;
height: 35px;
display: block;
position:absolute;
top:8px;
right:10px;
cursor:pointer;
}
.popup .top_nav a.guanbi:hover {
background: url(../img/popup_guanbi.png) repeat 0px -35px;
}
.popup .min{
width:532px;
height:auto;
padding:10px;
}
.tc_login{
width:410px;
height:380px;
background-color:#fff;
}
.tc_login .right{
margin-left: 60px;
width:290px;
height:380px;
float:left;
padding-right:10px;
}
.tc_login .left h4{
width:200px;
height:20px;
margin:20px 0 20px 0;
font-size:15px;
color:#666;
text-align:center;
}
.tc_login .left img{
width:150px;
margin:0 auto;
display:block;
border:1px solid #E3E3E3;
padding:4px;
}
.tc_login .left dd{
width:200px;
height:30px;
font:13px/18px 'microsoft yahei';
color:#666;
margin:20px 0 10px 0;
text-align:center;
display:block;
}
.tc_login .right i{
font-size:20px;
color:#090;
float:right;
margin:15px 0 0px 0;
}
.tc_login .right a{
font:13px/18px 'microsoft yahei';
color:#666;
float:right;
margin:16px 0 0px 6px;
}
.tc_login .right a:hover{
color:#06F;
text-decoration: underline;
}
.tc_login .right input{
border: 1px solid #ccc;
border-radius: 2px;
color: #000;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
height: 40px;
padding:0 0 0 34px;
margin:10px 0px 0px 10px;
transition: background 0.3s ease-in-out;
width: 220px;
float:right;
}
.tc_login .right input:focus {
outline: none;
border-color: royalblue;
box-shadow: 0 0 0px royalblue;
}
.tc_login .right .input_yh{background:url(../img/tc_login_yonghu.jpg) no-repeat left top;}
.tc_login .right .input_mm{background:url(../img/tc_login_mima.jpg) no-repeat left top;}
.tc_login .right .input_yh:focus{background:url(../img/tc_login_yonghu2.jpg) no-repeat left top;}
.tc_login .right .input_mm:focus{background:url(../img/tc_login_mima2.jpg) no-repeat left top;}
.tc_login .right .button{
-webkit-appearance: none;
background:royalblue;
border: none;
border-radius: 2px;
color: #fff;
cursor: pointer;
height: 50px;
font-family: 'Open Sans', sans-serif;
font-size: 1.2em;
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
transition: background 0.3s ease-in-out;
width: 255px;
padding:0 50px 0 50px;
font-weight: bold;
}
.tc_login .right .button:hover {

background: #019A0D;
}
.tc_login .right dd{width:100%;height:30px;}
.tc_login .right dd a{font:12px/18px 'microsoft yahei';color:#06F;}
.tc_login .right dd a:hover{font:13px/18px 'microsoft yahei';color:#06F;text-decoration: underline;}
.tc_login .right hr{height:1px;border:none;border-top:1px dashed #E4E4E4;clear:both;margin:240px 0 5px 0px;}

===========================================================

效果图：

0 0