摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css"&
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/css1.css"> </head> <body> <div class="main"> <div id="logo"><span class="slogo"><img src="images/logo.png"></span></div> <div id="box"> <form> <div> <input type="text" name="username" placeholder="请输入用户名"> </div> <div> <input type="password" name="pwd" placeholder="请输入密码"> </div> <div> <button>登 录</button> </div> <div> <span class="return"><a href="#">不想登录？点我返回首页</a></span> </div> </form> </div> </div> </body> </html>
*{
margin: 0px;
padding: 0px;
}
body{
/*background-image: url("../images/bg.jpg");
background-size: 100%;
background-repeat-y: no-repeat;
height: 100%;*/
background: url("../images/bg.jpg") no-repeat center;
background-size: cover;
background-attachment: fixed;
}
.main{
box-shadow: 0px 16px 30px #94A2B9 inset;
width: 310px;
height: 320px;
margin: 100px auto;
background: linear-gradient(rgba(3,57,165,0.17) ,rgba(206,193,188,0.97) );
border-radius: 10px;
}
#logo{
width: 270px;
height: 80px;
position: absolute;
margin-left: 22px;
margin-top: 15px;
}
img{
width: 270px;
height: 80px;
}
#box{
width: 270px;
height: 170px;
position: absolute;
margin-left: 22px;
margin-top: 100px;
}
form div{
width: 250px;
height: 45px;
margin: 7px 15px;
}
input{
width: 215px;
height: 36px;
margin-left: 12px;
margin-top: 3px;
padding-left: 12px;
border-radius: 5px;
border: none;
}
button{
width: 200px;
height: 35px;
font-family: "楷体";
font-size: 25px;
margin: 5px 25px;
border: none;
box-shadow: 0px 6px 30px #BCC3C9 inset;
border-radius: 5px;
outline: none; /*去掉button点击效果蓝边框*/
}
.return{
line-height: 45px;
padding-left: 9px;
}
a{
text-decoration: none;
color: #000;
font-family: "宋体";
}
a:hover{
color: blue;
text-decoration: underline;
}这是一个使用div+css布局实现的一个后台登录页面，前两天学习了css的引入样式（内联样式、内部样式、外部样式）以及几种常用选择器（标签、id、class、属性、派生），还学习了CSS的盒模型，使用div来布局，还学习了边框样式，就去使用div布局实现了一个这个小案例，在实践的过程中学习到了很多新知识。之前因为别的事情耽误了一些课程，希望自己再接再励，把之前欠下的补起来。
这是运行结果（设计的不好看，可能需要看一下设计方面的书……）：
批改老师：灭绝师太批改时间：2018-12-05 09:25:40
老师总结：完成的不错，细节方面细细调整一下就很好了，后面的学习还有更精彩的效果！
