<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>登录管理</title>
<meta name="description" content="登录界面">
<meta name="keywords" content="登录界面">
<link href="" rel="stylesheet">
<style>
body,p,div,ul,li,h1,h2,h3,h4,h5,h6{
margin:0;
padding: 0;
}
body{
background: #E9E9E3;
}
#login{
width: 400px;
height: 250px;
background: #FFF;
margin:200px auto;
position: relative;
}
#login h1{
text-align:center;
position:absolute;
left:120px;
top:-40px;
font-size:21px;
}
#login form p{
text-align: center;
}
#user{
background:url(images/user.png) rgba(0,0,0,.1) no-repeat;
width: 200px;
height: 30px;
border:solid #ccc 1px;
border-radius: 3px;
padding-left: 32px;
margin-top: 50px;
margin-bottom: 30px;
}
#pwd{
background: url(images/pwd.png) rgba(0,0,0,.1) no-repeat;
width: 200px;
height: 30px;
border:solid #ccc 1px;
border-radius: 3px;
padding-left: 32px;
margin-bottom: 30px;
}
#submit{
width: 232px;
height: 30px;
background: rgba(0,0,0,.1);
border:solid #ccc 1px;
border-radius: 3px;
}
#submit:hover{
cursor: pointer;
background:#D8D8D8;
}
</style>
</head>
<body>
<h1>登录管理</h1>
<form action="" method="post">
<p><input type="text" name="user" id="user" placeholder="用户名"></p>
<p><input type="password" name="passw0rd" id="pwd" placeholder="密码"></p>
<p><input type="submit" id="submit" value="登录"></p>
</form>
<div style="text-align:center;">
</div>
</body>
</html>
学习注释
1、<meta charset="utf-8">
如果你的网页里面出现了中文，在头部没有这一句 的话，将会导致中文乱码
2、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
X-UA-Compatible是IE8的一个专有<meta>属性，它告诉IE8采用何种IE版本去渲染网页。文件兼容性用于定义让IE如何编译你的网页。此文件解释文件兼容性
告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。chrome=1则可以激活Chrome Frame.
<meta>
参数解析：
1）name项：常用的选项有Keywords(关键字) ，description(网站内容描述)，author(作者)，robots(机器人向导)等。
2）http-equiv项：可用于代替name项，常用的选项有Expires(期限)，Pragma(cache模式)，Refresh(刷新)，Set-Cookie(cookie设定)，Window-target(显示窗口的设定)，content-Type(显示字符集的设定)等。
3）content项：根据name项或http-equiv项的定义来决定此项填写什么样的字符串。(必备行)
<link href="" rel="stylesheet">
CSS样式一共3中使用方法
——内联式样式表
行样式<div style="color:#000;"></div>
只能操作1个标签，细节灵活
——嵌入式样式表
<head>
<style>
div{color:#000;}
</style>
</head>
——引用式样式表
<head>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<style>
body,p,div,ul,li,h1,h2,h3,h4,h5,h6
{margin:0;
padding: 0;}
body,p,div,ul,li,h1,h2,h3,h4,h5,h6 ????
边缘？
填料??
#login{
width: 400px;
height: 250px;
background: #FFF;
margin:200px auto;
position: relative;
}
定义:登录界面大小格式
#login h1{
text-align:center;
position:absolute;
left:120px;
top:-40px;
font-size:21px;}
定义：标题格式
#login form p{
text-align: center;}
定义：段落格式
#user{
background:url(images/user.png) rgba(0,0,0,.1) no-repeat;
width: 200px;
height: 30px;
border:solid #ccc 1px;
border-radius: 3px;
padding-left: 32px;
margin-top: 50px;
margin-bottom: 30px;
}
定义：user（用户）格式
#pwd{
background: url(images/pwd.png) rgba(0,0,0,.1) no-repeat;
width: 200px;
height: 30px;
border:solid #ccc 1px;
border-radius: 3px;
padding-left: 32px;
margin-bottom: 30px;
}
定义：pwd（密码）格式
#submit{
width: 232px;
height: 30px;
background: rgba(0,0,0,.1);
border:solid #ccc 1px;
border-radius: 3px;
}
定义：submit（提交）格式
#submit:hover{
cursor: pointer;
background:#D8D8D8;
}
定义：submit:hover（提交徘徊）格式
<body>
<div id="login">
<h1>登录管理</h1>
<form action="" method="post">
<p><input type="text" name="user" id="user" placeholder="用户名"></p>
<p><input type="password" name="passw0rd" id="pwd" placeholder="密码"></p>
<p><input type="submit" id="submit" value="登录"></p>
</form>
</div>
<div style="text-align:center;">
</div>
</body>
3646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
