HTML内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登陆</title>
<link rel="stylesheet" href="css/login.css" type="text/css" />
</head>
<body>
<div class="login">
<div>
<form method="post" action="#">
<p>账 密 登 录</p>
<hr />
<strong>账号 </strong>
<input name="userName" type="text" /><br />
<strong>密码 </strong>
<input name="password" type="password" /><br />
<input type="submit" value="确定" />
</form>
</div>
<br />
<span>--------------------- 其它方式 ---------------------</span>
<ul>
<li>
<img src="img/qq.png" /><br /> QQ
</li>
<li>
<img src="img/wx.png" /><br /> 微信
</li>
<li>
<img src="img/weibo.png" /><br /> 博客
</li>
</ul>
</div>
</body>
</html>
CSS样式：
body{
background: url(../img/bg.png)no-repeat;
}
input{
border-radius: 5px;
width: 230px;
height:25px ;
border-color: #EEEEEE;
margin-left: 10px;
}
input[value=确定]{
border-radius: 5px;
width: 325px;
height:35px ;
margin-left: 20px;
background-color: #F85959;
color: white;
border: none;
font-size: 16px;
margin-top: 10px;
}
.login{
width: 380px;
height: 200px;
border-radius: 5px;
background-color: #FFFFFF;
margin-top: 10% ;
margin-left: 35% ;
/*position: absolute;
left: 30%;
top: 30%;*/
text-align: center;
padding-top: 20px;
line-height: 40px;
}
.login p{
margin: 0px;
font-size:30px;
font-weight:900;
color: #FF4500;
padding-bottom: 5px;
}
img{
width: 55px;
height: 55px;
border-radius:50% ;
}
ul li{
list-style-type: none;
width: 100px;
height: 60px;
float: left;
text-align: center;
font-size: 10px;
line-height: 20px;
}
**
**
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
