企业级的B/S项目应用，是肯定离不开数据库的。出于后台数据库的安全及保密需要，开发出来的软件只能让有权限的人登录。用户登录窗口中，最常用的就是输入用户名和密码，点击“登录”按钮后即可向后台服务器提交这两项数据。后台程序经过数据库检索，如果这两项数据都匹配，则通过登录然后打开项目主界面，否则给出错误提示并拒绝登录。
因此，输出的页面内容中至少应该包含以下3个方面的信息：用户名编辑框、密码编辑框、登录按钮。
昨天的文章仅仅只是写好了头部的代码。在html中，凡是需要向浏览者输出并显示的信息，都必须写在body标签中。通过字义就可以知道，包含在该标签中的内容被称为身体元素。
本篇文章用到的完整示例代码如下图：
html示例代码
相对而言，这已经是一个比较完整的html代码。现对以上内容逐条进行解析如下：
代码总体结构
第1行的<!DOCTYPE html>是用来声明解析类型的，它告诉浏览器这个页面是使用html编写的，因此必须放在所有代码的第一行。DOCTYPE可以大写，也可以小写；
第2到22行是真正的html页面代码，所有的代码内容都被包含在<html></html>这对标签中，因此，html也被称为根标签。由于它是成对出现的，还被称为双标签：<html>为开始标签、</html>为结束标签（结束标签前面多了个/），被双标签包裹起来的内容也叫标签元素。在开始标签中可以设置属性，如这里的第2行就给html设置了lang属性，属性值为zh-cn，表示这个页面中的html元素默认语言为中文；
第3-11行是用head标签包裹起来的头部元素，第12-21行是用body标签包裹起来的身体元素，它们都是html下面的子元素，是构成html最重要的两大组成部分。
页面内容代码解析
关于头部元素，上篇文章已经讲的很详细了，现在来重点分析身体元素中的代码：
（1）第一个div元素
就是代码中的13-16行。
div是一个没有任何语义的双标签，相当于一个容器，在这个双标签里可以放置任何内容。此示例代码中，就放置了两个p元素。
在这个div的开始标签中，分别设置了三个属性：id、class和style，这三个属性都是全局性质的，也就是所有标签都有的属性。其中：
id属性用于设定指定标签元素的唯一标识符（在同一个页面内，不可与其他元素的id重复），有了这个标识符之后，将大大方便其他程序对该元素进行操作；
class属性用来给标签元素进行归类，同一个页面内的多个标签可以使用相同的class名称，它一般用于对指定标签设置css样式。如本例中，class的属性值为easyui-dialog，表示这个div容器将以easyui中的对话框样式进行显示。该样式都是事先定义好的，并保存在easyui.css文件中，示例代码的第9行已对此文件进行了引用，因此这里直接指定css的样式名称即可；
style属性和class属性的作用有点类似，也是用于设置标签元素的css样式，只不过这种是属于行内样式的写法，一般用于对样式的微调。如本例中，将div的padding（内边距）上下设置为10px、左右设置为20px，以避免容器内的两个输入框和边界靠的太紧。
在这个div中，放置了2个p元素，每个p元素里面又分别放置了一个input元素。其中，input属于表单元素，用于生成输入框。之所以在每个input外面又包裹了一个p，同样是为了避免两个输入框靠的太紧。因为p表示的是段落，段落之间会自动留有较大的间距。需要说明的是，其实这里不用p标签、直接在input中设置css样式也可以达到同样的效果，之所以这样做，无非是希望大家在入门的过程中可以适当接触到更多一点的常用知识。
这里有个关键：分别给两个input输入框设置了id属性，便于在后面的javascript程序代码中对输入的内容进行验证操作！
（2）第二个div元素
就是代码中的17-19行。
这里除了给该div设置了一个id属性外，还设置了另外一个style属性：text-align。该属性有三个常用的可选值：left、right、center，分别表示靠左、靠右和居中对齐。该属性在这里的作用是，可以使按钮居中。
在该div中，放置了一个button标签按钮，以方便用户点击登录。
（3）script元素
就是代码中的第20行。
该行代码通过script标签用来加载控制用户操作的javascript程序文件。可能有的初学者会说，外部的js文件不是要在head中引入的吗？其实，js文件放在head、body中的任何位置都是可以的，关键是看执行时机，因为页面代码都是自上而下执行的。
除了这种外部文件加载的方式外，javascript程序代码也可以直接写在script双标签中。为了使程序代码更具条理和清晰，本示例就采用了外部文件加载的方式。这里的js程序文件名称可以自定，但必须以js为扩展名。script虽然也是双标签，但由于这里直接通过src指定了程序文件，因此，这个双标签之间可以不用写任何内容；即使要写的话，也应该是js程序代码。
由于js程序代码目前尚未讲到，截图中的代码已经该行注释掉。
试运行
将html文件拖拽到浏览器中运行，效果如下：
运行效果图
通过这个很小的实例可以发现，整个过程中并没有设置窗口的颜色，更没用到任何非常复杂的css样式代码，甚至连窗口上的关闭图标都没准备，却直接就实现了这样漂亮的窗口效果。而且，这个窗口可以拖拽移动的哦！
如何实现的？这就是在head中所引用的easyui插件的力量！如果用原生代码来写这样的窗口效果，除了需要相当的技术功底外，用到的代码肯定也是一大堆。但我们现在使用了easyui这样的工具后，即使是新手一样可以快速实现这样的效果。所以，对于新手来说，尤其是对于没有大量时间来系统学习相关知识的职场人来说，善用工具将使您的开发效率增长N倍。
当然，这个窗口还有很多不足，最严重的问题是登录按钮仍然游离于窗口之外，这个留待下一篇文章继续完善。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-tool/t50843.shtml
