写一个小页面
summary : CSS盒子模型，浮动定位，外部样式表（内部样式表）
背景（body）, 第二背景（box-login）,内部表单（box-right(form)）,确认按钮（Abutton），底部页脚（div）
总结：共计只需要使用5个<div>就可以做出来这个简单的登录页了！！！（。＾▽＾）|哇塞，简单耶..............确实。
这是制作的代码部分-------------------------：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<style type="text/css" >
body{
background-color: #FFFFFF;
background-image: url("矢量素材/背景图片1.png");
background-repeat: no-repeat;
background-size: cover;
}
</style>
<link href="textStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div align="center"><!--在居中位置的，一个大部分里面包括其他小部分-->
<div class="box-login">
<!--在登录框中靠右的部分由一个标题和一个表单，两个单元格构成登陆页面-->
<div class="box-right">
<p> 山东商务职业学院 | SHANDONG BUSINESS INSTITUTE </p>
<h4>Login in | 登录</h4>
<form>
<tr>
<p>用户名/username</p>
<td><input type="text" id="username"/></td>
</tr>
<tr>
<p>密码/password</p>
<td><input type="password" id="password"/></td>
</tr>
<div>
<input type="button" class="Abutton" value="确认登录">
</div>
</form>
</div>
</div>
</div>
<!-- END #content -->
<div align="center">
<p>
<font size="1px" color="#73769C" >
<br>Copyright @ 山东商务职业学院版权所有
</font>
</p>
</div>
</body>
</html>
划分----------------------------------------------------------------------------------------------------------------------------：
1.第一个，包裹整个的<div> align设置为居中，同时使用标签选择器 body(内部样式表 ) :
body{
background-color: #FFFFFF;
background-image: url("矢量素材/背景图片1.png");
background-repeat: no-repeat;
background-size: cover; // 设置背景图片全覆盖浏览器的视图页面哦
}
2.第二个，添加盒子模型box-login;
<div class="box-login">其中CSS文件中的类选择器设置为：
.box-login{
width: 1000px;
height: 600px;
background-image: url("矢量素材/次页面图.png");
background-size: cover;
margin: auto;//设置边距自适应
overflow: hidden;超出部分隐藏
}
同时在html文件中输入form表单：
<form>
<tr>
<p>用户名/username</p>
<td><input type="text" id="username"/></td>
</tr>
<tr>
<p>密码/password</p>
<td><input type="password" id="password"/></td>
</tr>
<div>
<input type="button" class="Abutton" value="确认登录">
</div>
</form>
3.第三个，设置盒子模型中box-right即为表单划分区域
/* 绝对定位是将元素依据最近的已经定位的父元素进行定位，
若父元素没有定位，那么将依据body根元素（就是浏览器窗口，进行定位）*/
.box-right{
position: absolute; //使用绝对定位absolute
width: 400px;
height: 300px;
left: 660px;
top: 190px;
}
4.第四个，设置确认按钮
<div>
<input type="button" class="Abutton" value="确认登录">
</div>
其中CSS设置文件类选择器Abutton.
.Abutton{
margin-top: 20px;
width:150px;
height:30px;
color: #DFE0EC;
border:0;
background: #596199;
border-radius:10px;
}
5.第五个，最后设置页脚来装饰一下就皆大欢喜了
<div align="center">
<p>
<font size=1px color="#73769C">
<br />Copyright @ 山东商务职业学院版权所有
<br />地址：山东省烟台市高新区海兴路15号
备案号：鲁ICP备09053622号
</font>
</p>
</div>
总结部分：使用五个div标签划分后，这个简单的登陆页面就已经制作好了，
当然也可以尝试一种更好的形式，就是利用placeholder属性；
大概写法：<input type="text" name="username" style="width:200px ; height:25px; color:#5f695d" placeholder=" 账号 Username"/>
输入后状态---------------------------------------------------------------------------------------------------------------------------：
关于placeholder属性，这个真的好难控制啊（哭）
placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。
##placeholder 是html5新加入的哦，代入作业H4的CSS可是不会支持的（摊手┑(￣Д ￣)┍）
大概就是以上的样子，提示作用的字样出现在输入框中
文件中p,h4都是经过标签选择器设置过的哦。
以下是CSS外部样式表部分~kira(很想打出来个五角星，但是我发现我不能...?☆哇，出来了，kira★~)：
/* CSS Document */
p{
font: normal normal 8px/8px "微软雅黑";
color: #73769C;
align-content: space-between;
}
h4{
font: normal bold 14px/30px "微软雅黑";
color: #334EA2;
}
.text-special{
font: normal 18px/30px "Wingdings";
}
/* 按钮设计*/
.Abutton{
margin-top: 20px;
width:150px;
height:30px;
color: #DFE0EC;
font-class:one;
border:0;
background: #596199;
border-radius:10px;}
.box-login{
width: 1000px;
height: 600px;
background-image: url("矢量素材/次页面图.png");
background-size: cover;
margin: auto;
overflow: hidden;
}
.box-left{
width: 500px;
height:600px;
}
.box-right{
position: absolute;
width: 400px;
height: 300px;
left: 660px;
top: 190px;
}
.bt-input{
width: 150px;
height: 30px;
background: #BABCDD;
font-size: 18px;
font-family: "微软雅黑";
color: #415A96;
}
结束啦结束啦，收工去打动森了。
CSS的text属性的利用。其中设置文本色彩，文本对齐形式，装饰文本，控制文本缩进，以及控制文本行间距
对于文本色彩的属性值设置由：预定义颜色值，十六进制，RGB代码（似乎设置透明背景或者半透明色彩可以参考rgbs属性设置）
预定义颜色值：red , blue ,Cornflower blue
十六进制：#EAAEDA
RGB代码：rgb(255，0，0）,rgbs( 235 , 240 ,232 ,0.7)其中0.7的设置是不透明度70%，这个还是挺好用的
text-decoration : underline(下划线)，overline（上划线），none(无装饰)，line-throught(删除线)
