积跬步，聚小流-------一个登录中的知识点
前幾天心血來潮，做了一個登錄界面，發(fā)現(xiàn)盡管是簡單的一個登錄。容納的知識點倒是不少呢。
先來看下簡單的效果：
那就來簡單說下。都設(shè)計了哪些知識點呢？
首先：居中；這里我使用的是絕對位置的負(fù)距離實現(xiàn)居中。也就是說position為absolute，而left和top都為50%，而margin-left和margin-top都為width和height的一半的值的相反數(shù)
#back_login{width: 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;}這是比較經(jīng)經(jīng)常使用到的方法。可是有個問題存在，也就是說你的width和height最好是固定長度和距離的，假設(shè)都是未知的話，就要用js進(jìn)行運算了，假設(shè)僅僅是為了居中的話實在是有些劃不來。然后我們再來回顧下還有哪些方法呢？有兩種方法是有些類似的<center></center>這種方法想必大家都不會陌生。而它在某種程度上和text-align:center是有些類似的，它對它內(nèi)部的全部元素都會進(jìn)行居中操作，而假設(shè)內(nèi)部元素多的話則須要進(jìn)行一一設(shè)置。
事實上最開始的時候，我是經(jīng)常會用的。就是我最初開始居中的時候經(jīng)常使用的方法：margin：o auto。而不幸的是，在相當(dāng)長的一段時間內(nèi)。我一度無法使用它，直到最后才發(fā)現(xiàn)原因，在自己主動生成的jsp中總是
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">而假設(shè)將這個聲明改動為：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">而能夠完美的實現(xiàn)居中效果了，這個最大的優(yōu)點是能夠，將外部元素width：100%。而內(nèi)部元素設(shè)置固定寬度來居中啊。也就是這個效果啊
當(dāng)然除了水平居中還有垂直居中，而通常我會用line-height和padding來分別實現(xiàn)文本和塊級元素的垂直居中效果
然后，就是圓角問題；
假設(shè)說css3能夠兼容的話，那無疑會是程序員們的福音，可是事實往往是殘酷的，也就讓圓角成了一個問題，而記憶中我對圓角的實現(xiàn)辦法也是千奇百怪的。記得最初是用的是圖片。出效果后還自己美了好久，如今想想委實有些羞愧，再后來就學(xué)會了border-radius。也就同一時候開始面對css3的兼容問題了，記得最初的個人解決的方法是
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">強(qiáng)制使用ie最新內(nèi)核，也就是外觀仍然是ie，而假設(shè)安裝了針對ie8下面的瀏覽器的對應(yīng)插件（Google Chrome Frame）的話。則內(nèi)核則已經(jīng)改為chrome，當(dāng)然這是有一些局限性的，而在前一陣與一個朋友的交流中。得知了一個還不錯的兼容方式（PIE.JS），試用后感覺確實還不錯的。對于css3的一部分效果還是有效果的。
再來。是placeholder和切割線效果，在前面的博客中都已經(jīng)介紹過了，在這里就不多說了。
僅僅是來介紹幾個細(xì)節(jié)問題，
#loginName{background:url(img/login_id.png) 96% 3px no-repeat;}分別為圖片地址、左距離、上距離、反復(fù)與否，這是其一，再有一點：
οnmοuseοver=this.focus();this.select();這兩點一般是連續(xù)的。鼠標(biāo)劃過時，獲得輸入焦點。而且全選已輸入的內(nèi)容，這也是應(yīng)該注意的地方。假設(shè)說再有比較重要的話，應(yīng)該是：
var primaryValue=document.getElementById(param).defaultValue;defaultValue屬性是一個很方便的dom屬性，應(yīng)用還是比較頻繁的。也應(yīng)該多加記憶。
臨時想起來的話就是這些了，先記憶下，近期須要寫年終總結(jié)了，發(fā)現(xiàn)工作這一年來實際上學(xué)的確實不少啊，再加上平日里自己的學(xué)習(xí)。忙碌是忙碌了點。總算是沒再讓自己的時光白白流逝，心里很多其它的還是欣慰，蠻開心的...
總結(jié)
以上是生活随笔為你收集整理的积跬步，聚小流-------一个登录中的知识点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： “数据门”事件频发如何避免人为因素导致数
- 下一篇： Django restframwork实