1.最简版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="article">
<div class="server-name">awifi</div>
<div class="signin-container">
<div class="signin-logo"></div>
<form method="post" action="" accept-charset="utf-8">
<ul>
<li>
<lable for="name">Username</lable>
<input type="text" id="name" name="name" value maxlength="255" autofocus="autofocus">
</li>
<li>
<label for="password">Password</label>
<input type="text" id="password" name="password" value maxlength="255" >
</li>
<li>
<label for="autologin">
<input type="checkbox" id="autologin" name="autologin" value="1" checked="checked"> "Remember me for 30 days"
</label>
</li>
<li>
<button type="submit" id="enter" name="enter" value="Sign in">Sign in</button>
</li>
</ul>
</form>
</div>
<div class="signin-links">
<a target="_blank" class="grey link-alt" href="#">Help</a>
•
<a target="_blank" class="grey link-alt" href="#">Support</a>
</div>
</div>
<div class="footer"></div>
</body>
</html>
效果图：
+++++++++++++++++++++++++++++++
在一个 <a> 标签内包含一个 target 属性，
浏览器将会载入和显示用这个标签的 href 属性命名的、
名称与这个目标吻合的框架或者窗口中的文档。
<a target="value">
属性值
值 描述
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档2。第二版：
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="static/css/login-theme.css">
</head>
<body>
<div class="article">
<div class="server-name">awifi</div>
<div class="signin-container">
<div class="signin-logo"></div>
<form method="post" action="" accept-charset="utf-8">
<ul>
<li>
<label for="name">Username</label>
<input type="text" id="name" name="name" value maxlength="255" autofocus="autofocus">
</li>
<li>
<label for="password">Password</label>
<input type="password" id="password" name="password" value maxlength="255" autofocus="autofocus">
</li>
<li>
<label for="autologin">
<input type="checkbox" id="autologin" name="autologin" value="1" checked="checked"> Remember me for 30 days
</label>
</li>
<li>
<button type="submit" id="enter" name="enter" value="Sign in">Sign in</button>
</li>
</ul>
</form>
</div>
<div class="signin-links">
<a target="_blank" class="grey link-alt" href="#">Help</a>
•
<a target="_blank" class="grey link-alt" href="#">Support</a>
</div>
</div>
<div class="footer">
© 2001–2017, <a class="grey link-alt" target="_blank" href="#">zk</a>
</div>
</body>
</html>注意点：
使用：
<link rel="stylesheet" type="text/css" href="static/css/login-theme.css">
就可以调用自己写的css文件了
还有：
<a> 标签中的target=_blank是什么意思?
解答：
表示该连接在新窗口中打开
另拓：
_self相同框架
_top整页
_blank新建一个窗口
_parent父窗口
其它的就是自定义了，可以指向已有的窗口名称
login-theme.css
body,html{/*这样下面就不会出现拖拽的横条了。*/
margin: 0;
padding: 0;
border: 0;
}
.server-name {
color: #768d99;
float: right;
white-space: nowrap;
overflow: hidden;
}
ul {
list-style:none;/*none,就是什么也没有*/
/*
list-style-type 设置列表项标记的类型。
list-style-position 设置在何处放置列表项标记。
list-style-image 使用图像来替换列表项的标记。
inherit 规定应该从父元素继承 list-style 属性的值。
*/
}
.article {
padding:10px 10px 0px 10px;/*从上开始，顺指针转。上右下左*/
}
body{
background-color: #ebeef0;
color:#0084ff;
/*color是字体的颜色,background-color是背景的颜色*/
}
.article,form{
vertical-align:baseline;
/*
vertical-align 属性设置元素的垂直对齐方式。
baseline是默认值。元素放置在父元素的基线上。
*/
}
.signin-logo {
margin: 0 auto;
margin-bottom: 21px;/*元素的下外边距*/
width: 114px;
height: 30px;
background: url(../img/zabbix.svg) no-repeat 0 -864px;
/*
<background-color>:
|| <background-image>：
|| <background-repeat>：
|| <background-attachment>
|| <background-position>]
background可以指定背景颜色、
图像位置、
如何重复背景图像、
背景图片大小、
指定背景图像的定位区域、
指定背景图像的绘画区域、
设置背景图像是否固定或者随着页面的其余部分滚动、
指定要使用的一个或多个背景图像。
*/
/*svg还不会用，我只知道不断的更改px的大小。*/
}
.signin-container{
background-color:#fff;
width:280px;
margin:0 auto;
/*margin:0 auto=margin:0 auto 0 auto;
margin：0 auto 更标准一些。margin-left和margin-right值为auto，页面居中。
只是margin-left：auto 页面左对齐，只是margin-right：auto 页面右对齐。
margin-top和margin-bottom对设置auto，没有这个效果！
*/
padding:42px 42px 39px 42px;
/*盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)和外边距(margin)。*/
border:1px solid #dfe4e7;
}
ul,li{
padding: 16px 0 0 0;
margin: 0px;
border: 0px;
}
input{
margin:0;
padding:0;
border:1px solid;
}
.signin-container input[type="text"] ,.signin-container input[type="password"]{
width:100%;
padding:4px 4px;
margin:0px;
min-height: 24px;
box-sizing:border-box;
/*新属性box-sizing，解决div宽度设置width:100%后再设置padding或margin超出父元素的问题*/
/*否则会溢出。坑*/
}
.signin-container label {
display: inline-block;
margin: 0 0 3px 0;
}
.signin-container button {
font-size: 1em;
margin: 7px 0;
min-height: 35px;/*设置段落的最小高度：*/
line-height: 35px;
width: 100%;
cursor: pointer;
/*cursor 属性规定要显示的光标的类型（形状）。
pointer 光标呈现为指示链接的指针（一只手）*/
border: 1px solid #0275b8;
background-color: #0275b8;
}
button:hover{/*我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。*/
color: #fff;/*字体颜色改变了*/
background-color: #02659f;
border-color: #02659f;
}
.signin-links {
width: 100%;
text-align: center;
margin: 11px 0 0 0;
color: #768d99;
}
.grey,a.grey{
color: #768d99;
}
/*请使用 :
visited 选择器对指向已访问页面的链接设置样式，
:hover 选择器用于设置鼠标指针浮动到链接上时的样式，
:active 选择器用于设置点击链接时的样式。
*/
.link-alt {
cursor: pointer;
}
a:hover{
color:#02659f;
}
.footer {
position: absolute;
bottom: 0;/*这里是距离底部的距离。*/
/*bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。
注释：如果 "position" 属性的值为 "static"，那么设置 "bottom" 属性不会产生任何效果。*/
width: 100%;
height: 30px;
text-align: center;
color: #768d99;
margin: 0;
padding: 0;
border: 0;
/*position 属性规定元素的定位类型。
值 描述
absolute 生成绝对定位的元素相对于static 定位以外的第一个父元素进行定位。
元素的位置通过"left","top","right"以及"bottom"属性进行规定。
fixed 生成绝对定位的元素相对于浏览器窗口进行定位。
元素的位置通过 "left", "top","right"以及"bottom" 属性进行规定。
relative 生成相对定位的元素相对于其正常位置进行定位。
因此,"left:20"会向元素的LEFT位置添加 20 像素
static 默认值.没有定位,元素出现在正常的流中（忽略top,bottom,left,right或者z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。
*/
}最终效果图合zabbix的差不多。当然里子就不如原版的啦
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
