css如何做qq登录界面 |css 自定义图片纹理

/* 设置页面布局样式 */
body {
background: #fdfdfd;
}
.container {
width: 320px;
height: 420px;
margin: 10% auto;
border: 1px solid #ccc;
border-radius: 5px;
background: white;
box-shadow: rgba(0,0,0,.1) 0 0 8px;
overflow: hidden;
}
/* 设置头部登录样式 */
.header {
width: 100%;
height: 70px;
background: #f5f5f5;
text-align: center;
border-bottom: 1px solid #ddd;
}
.header h1 {
font-size: 24px;
color: #3d3d3d;
margin-top: 20px;
}
/* 设置表单样式 */
.form-wrap {
width: 70%;
margin: 80px auto 0;
}
.form-wrap label {
display: none;
}
.input-item {
position: relative;
margin-bottom: 15px;
}
.icon {
position: absolute;
font-size: 18px;
color: #ccc;
top: 14px;
left: 10px;
}
.input-item input {
width: 100%;
height: 40px;
padding-left: 40px;
border: 1px solid #ddd;
font-size: 16px;
outline: none;
}
.input-item input:focus {
border-color: #39b1ea;
}
/* 设置底部登录按钮样式 */
.btn {
width: 60%;
height: 50px;
line-height: 50px;
margin: 0 auto;
margin-top: 30px;
text-align: center;
color: white;
background: #39b1ea;
border-radius: 3px;
cursor: pointer;
}
.btn:hover {
background: #0075c9;
}

　　以上是关于如何使用CSS制作QQ登录界面的代码，这个方法不仅在制作QQ登录界面上有重要应用价值，而且运用在登录页面的设计上也是非常实用的。对于初学者来说，这个项目还有一些细节问题需要掌握，例如：如何设置图标的位置、样式和hover状态等等，希望大家在学习的过程中多花些时间去琢磨，最终达到了熟练掌握的水平。