前几天心血来潮，做了一个登录界面，发现虽然是简单的一个登录，容纳的知识点倒是不少呢。
先来看下简单的效果：
那就来简单说下，都设计了哪些知识点呢？
首先：居中；这里我使用的是绝对位置的负距离实现居中，也就是说position为absolute，而left和top都为50%，而margin-left和margin-top都为width和height的一半的值的相反数
- #back_login{
- 400px;
- height: 500px;
- background-color: #ffffff;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -250px;
- margin-left: -200px;
- border: 1px solid #0088cc;
- border-radius:20px;
- -webkit-border-radius:20px;
- -moz-border-radius:20px;
- }
这是比较经常用到的方法，但是有个问题存在，也就是说你的width和height最好是固定长度和距离的，如果都是未知的话，就要用js进行运算了，如果只是为了居中的话实在是有些划不来，然后我们再来回忆下还有哪些方法呢？
有两种方法是有些类似的<center></center>这个方法想必大家都不会陌生，而它在某种程度上和text-align:center是有些类似的，它对它内部的所有元素都会进行居中操作，而如果内部元素多的话则需要进行一一设置。
其实最开始的时候，我是经常会用的，就是我最初开始居中的时候常用的方法：margin：o auto；而不幸的是，在相当长的一段时间内，我一度无法使用它，直到最后才发现原因，在自动生成的jsp中总是
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
而如果将这个声明修改为：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
而可以完美的实现居中效果了，这个最大的好处是可以，将外部元素width：100%；而内部元素设置固定宽度来居中啊，也就是这个效果啊
当然除了水平居中还有垂直居中，而通常我会用line-height和padding来分别实现文本和块级元素的垂直居中效果
然后，就是圆角问题；
如果说css3可以兼容的话，那无疑会是程序猿们的福音，但是事实往往是残酷的，也就让圆角成了一个问题，而记忆中我对圆角的实现办法也是千奇百怪的，记得最初是用的是图片，出效果后还自己美了好久，现在想想委实有些惭愧，再后来就学会了border-radius，也就同时开始面对css3的兼容问题了，记得最初的个人解决办法是
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
强制使用ie最新内核，也就是外观仍然是ie，而如果安装了针对ie8以下的浏览器的相应插件（Google Chrome Frame）的话，则内核则已经改为chrome，当然这是有一些局限性的，而在前一阵与一个朋友的交流中，得知了一个还不错的兼容方式（PIE.JS），试用后感觉确实还不错的，对于css3的一部分效果还是有效果的。
再来，是placeholder和分割线效果，在前面的博客中都已经介绍过了，在这里就不多说了。只是来介绍几个细节问题，
- #loginName{background:url(img/login_id.png) 96% 3px no-repeat;}
分别为图片地址、左距离、上距离、重复与否，这是其一，再有一点：
- onmouseover=this.focus();this.select();
这两点通常是连续的，鼠标划过时，获得输入焦点，并且全选已输入的内容，这也是应该注意的地方，如果说再有比较重要的话，应该是：
- var primaryValue=document.getElementById(param).defaultValue;
defaultValue属性是一个非常方便的dom属性，应用还是比较频繁的，也应该多加记忆。
暂时想起来的话就是这些了，先记忆下，最近需要写年终总结了，发现工作这一年来实际上学的确实不少啊，再加上平日里自己的学习，忙碌是忙碌了点，总算是没再让自己的时光白白流逝，心里更多的还是欣慰，蛮开心的...
http://blog.csdn.net/marsmile_tbo/article/details/42090425