究极小白的第一篇csdn博客

模仿暴雪游戏登录界面

首先去掉默认的margin和pading和下划线，代码如下：
*{
text-decoration: none;
margin: 0;
padding: 0;
}

第二步加上背景，代码如下：
body{
background-image: url(img/login-background.jpg);
background-size: cover;
}

第三步设置一个div将class设置为main然后设置其宽高以及与网页顶部的距离，代码如下：
.main{
width: 500px;
margin: auto;
margin-top: 100px;
}

第四步插入暴雪游戏logo图片以及设置其大小，代码如下：
.main img{
width: 200px;
height: 80px;
display: block;
margin: auto;
}

第五步插入电子邮箱框以及密码框，代码如下:

第六步设置其边框，背景颜色，文字颜色，宽高，代码如下：
.input1{
margin-top: 15px;
width: 300px;
height: 30px;
border: solid 1px #51565C;
background-color: black;
}

第七步用a标签做登录按钮，代码如下：

登录

（样式代码如下） .login{ display: block; width: 300px; height: 40px; line-height: 40px; background-color: #095386; color: white; border-radius: 3px; margin-top: 25px; }

第八步做其他方式登录按钮与上一步类似，代码如下：

使用网易通行证登录

（样式代码如下）
.relogin{
margin-top: 15px;
display: block;
width: 300px;
height: 40px;
line-height: 40px;
background-color: #F70E0E;
border-radius: 3px;
color: white;
}

最后一步做三个文字超链接以及设置他们的颜色，代码如下：

免费创建暴雪游戏通行证

无法登录？

安全令重新同步

（样式代码如下） .zi{ display: block; color: #01AAFF; margin-top: 20px; }

让我们看看最后的效果图吧

是不是很不错

好了到这模仿暴雪登录界面就结束了