独特登陆界面
登陆界面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登陆界面</title>
<style type="text/css">
body{
background:paleturquoise;
background-size: cover;/*覆盖 ,把背景扩展到足够大,使背景完全覆盖*/
}
.left{
width:900px;height: 950px;float:left;
}
.right{
width:900px;height:950px;float:left;
}
.table{
text-align: center;padding: 100px 100px 0px 100px;
}
.table p{
font-family:"\534E\6587\884C\6977";
font-size:80px;
}
.form{
width:900px;height:500px;
}
.usename{
width:900px;height:20px;font-family: "\82F9\679C\4E3D\7EC6\5B8B";color: white;font-weight: bold;
}
.p1{
font-family:"\82F9\679C\4E3D\7EC6\5B8B";text-align: left;color: white;font-weight: bold;
}
input[type=text],input[type=password]{
margin: 0px;
padding: 0 10px;
width: 98%;
height: 50px;
color: ;
background: white;
border: 0px solid;
border-color: #c4c4c4 #d1d1d1 #d4d4d4;
border-radius: 10px;
}
input[type=button]{
margin: 0px;
padding: 0 10px;
width: 150px;
height: 50px;
color: white;
background: darkred;
border: 0px solid;
border-color: #c4c4c4 #d1d1d1 #d4d4d4;
border-radius: 10px;
font-family:"\82F9\679C\4E3D\7EC6\5B8B";color: white;font-weight: bold;
font-size: 20px;
}
.p2{
font-family:"\82F9\679C\4E3D\7EC6\5B8B";text-align: left;color: white;font-weight: bold;
}
.button{
}
</style>
</head>
<body>
<div class="left">
<img src="img/s02.jpg" width="900px" height="950px">
</div>
<div class="right">
<div class="table">
<p>
LOGIN
</p>
</div>
<div class="form">
<div class="usename">
<p class="p1">Usename</p>
</div>
<div>
<input type="text" placeholder="请输入用户名"size="20" /><br />
</div>
<div class="usename">
<p class="p2">Password</p>
</div>
<div>
<input type="password" placeholder="密码" maxlength="6" /><br />
</div>
<div class="usename">
<input type="checkbox" name="gender" style="float:left">remember usename
</div>
<div class="button">
<input type="button" value="LOGIN IN" />
</div>
</div>
</div>
</body>
</html>
现阶段学习水平主要在能够熟练掌握标签里的属性,可根据需要搭建出想要的网站布局,CSS修饰的更加简介可观,下一阶段的学习任务是主要学习
1. JS 能够使得网页更加炫酷,实现动态效果
2.PHP 使得网页能够连接数据库,发送信息,接收信息。
3.MySQL数据库,实现完整的动态网页,动态数据发送,
学习计划,十月底完成上述三项学习指标。。就是干