login頁面實現,ps切片,瀏覽器兼容
上次已經設計好了login頁面了，這次就主要講login頁面的div+css的實現。這里主要涉及到兩個問題。
1,怎么切片？
2,怎么合理的構造頁面，才能足夠的兼容和代碼清晰。
先講切片：（切片我不知道大家是怎么切的，有的人好像是直接整張的切，不管理前景和背景的，我這里主要是講分開切，這樣有利於html構造和有更好的兼容性，並且更容易與js動畫。）
ps:在動手之前先分析清晰，在腦海里有個藍圖，這樣動手就容易的多。先分析，得到一個大概思路
再先看網站的目標結果圖：
1-1，分析下上次的圖：
這樣會得到這樣的html結構。
1 <body> 2 <!-- start content--> 3 <div id="content"> 4 <div class="layout"><!-- 為了能更居中，加了一個定位層 --> 5 <div class="cleft"></div> 6 7 <!--start center --> 8 <div id="center"> 9 <!--start ctop--> 10 <div class="ctop"> 11 <!--這里是logo及標題--> 12 </div><!-- end ctop--> 13 14 <div id="ccenter"><!--start ccenter--> 15 <!-- 這里是主內容區 --> 16 </div><!--end ccenter --> 17 18 <div class="cbottom"></div> 19 </div><!-- end center--> 20 <div class="cright"><div> 21 </div> 22 </div><!-- end content--> 23 </body>
1-2,切片
1-2-1,背景切片：由於背景是一個漸變，所以只要一個：寬度為1px,高度為：768px圖片，當然也可以有 css濾鏡實現漸變。
具體做法：隱藏所有圖層，只留下背景層-->新建一個圖層-->在背景層的正上方-->選中新建的背景層，蓋章（ctrl+shife+alt+e）,這樣做的好處，取消圖層樣式的影響，把圖層樣式柵格成圖層，而不是樣式，如果你直接用背景層的話，把圖片切成好小以后，他的樣式沒有隨之變小，還是原來的樣式，這樣的話，得到圖片效果就不理想。
例：
畫一個距形，陰影5px，10px，現在需要縮小，再切出來，直接出切出來，和蓋章后切出來得到的結果。對比下：
蓋章的結果就是將所有可見圖層，復制到選中的圖層-->保存（ctrl+shift+alt+s）-->寬1px，高不變。
蓋章后：
保存頁面
放在skin目錄下，命名為bg.gif，保存完成后，就可以將蓋章的得到的圖層給刪除掉。
1-2-2：再確定中間背景以及大小：
先切高中間背景：方法：隱藏其它圖層只留下高光-->切片
存儲為png-24,命名為：cbn.png
1-2-3:切login框架：先新建圖層，蓋章-->再按照基准線來切，保存為png格式
如圖：這里是采用的豎切（因為漸變是從上到下的，這樣可以把圖片達到最小）
分別命名為：clef,center,cright
1-2-4：切logo及title, 隱藏其它圖層，蓋章，再隱藏除蓋章以外的所有圖層，
分別命名為：logo.png,title.png
如果看不清界限，可以打開背景層，借助背景切片，切好后，再隱藏背景層，再保存。
1-2-5：兩個圖標的切法：
新建一個ps文件
將兩個圖層，拖到新建的文件中，再切，這樣可以保存兩個圖標一樣大小。
文本框，和得到焦點文本框；按鈕和得到焦點按鈕的切法，也是一樣，如圖
分別保存user.png.key.png
文本框，按鈕，切片省，按上面的方法再自己想想
看下得到的圖片：
2,構建html頁面，上面已經出來，框架這里只要按照分析的寫html和css即可。
代碼如下：
html:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>XXX管理系統--登錄</title> 6 <link type="text/css" rel="stylesheet" href="css/reset.css"/> 7 <link type="text/css" rel="stylesheet" href="css/login.css"/> 8 </head> 9 10 <body> 11 <!-- start content--> 12 <div id="content"> 13 <div class="layout"><!-- 為了能更居中，加了一個定位層 --> 14 <div class="cleft"></div> 15 16 <!--start center --> 17 <div id="center"> 18 <!--start ctop--> 19 <div class="ctop"> 20 <!--這里是logo及標題--> 21 <ul> 22 <li class="logo"><img alt="logo" src="img/icon/logo.png" width="138px;" height="138px"/><div> 23 <li class="title"><img alt="title" src="img/icon/title.png" width="359px" height="94px"/></li> 24 </ul> 25 </div><!-- end ctop--> 26 27 <div id="ccenter"><!--start ccenter--> 28 <!-- 這里是主內容區 --> 29 <ul class="userUL"> 30 <li><img title="username" src="img/icon/user.png" width="64px" height="64px"/></li> 31 <li class="text"><input type="text" size="18" maxlength="20" class="userInput"></li> 32 </ul> 33 <ul class="passwordUL"> 34 <li><img title="password" src="img/icon/key.png" width="64px" height="64px"/></li> 35 <li class="text"><input type="password" size="18" maxlength="20" class="userInput"></li> 36 </ul> 37 <ul class="codeUL"> 38 <li class="codelabel">驗證碼：</li> 39 <li class="codeText"><input type="text" size="6" maxlength="4" class="codeInput"></li> 40 <li class="codepic"><img title="codepic" src="img/skin/code.png" width="154px" height="47px"/></li> 41 </ul> 42 <div class="submitBtn"><span><a href="#">登 錄</a></span></div> 43 </div><!--end ccenter --> 44 45 <div class="cbottom"></div> 46 </div><!-- end center--> 47 <div class="cright"><div> 48 </div> 49 </div><!-- end content--> 50 </body> 51 52 </html>
css:
1 @CHARSET "UTF-8"; 2 body{width:100%;height:100%;min-height:768px;margin:0px auto;text-align: center; 3 background:#3694cf url("../img/skin/bg.gif") repeat-x center center; 4 }/*text-align,margin:為了讓主體內容居中;顏色為漸變的最下面的值。背景沒x軸平鋪*/ 5 6 #content{text-align:left;margin:0px auto;width:800px;height:100%;min-height:768px; 7 /*border:1px solid red;*/ 8 background:url("../img/skin/cbg.png") no-repeat center top; 9 }/*width:800px,在切片時分析得到。*/ 10 11 #content .layout{padding-top:15%;}/*定位內容靠下面*/ 12 13 /*以下三個，得到login框 ，width,height為圖片的寬高。#center的寬為內容寬：值為：800-(51+47)=702px,這里留了2px的縫隙*/ 14 #content .cleft{float:left;width:51px;height:560px; 15 background: url("../img/skin/cleft.png") no-repeat left center; 16 } 17 #center{float:left;width:700px;height:560px; 18 background: url("../img/skin/center.png") repeat-x center center; 19 } 20 #content .cright{float:left;width:47px;height:560px; 21 background: url("../img/skin/cright.png") no-repeat right center; 22 } 23 24 /*設置寬度,和中間總寬度一樣*/ 25 #center .ctop,#ccenter,#center .cbottom{float:left;width:700px;height:auto;/*border:1px solid red;*/} 26 27 /*調整logo,title位置*/ 28 #center .ctop {padding-bottom:30px;} 29 #center .ctop ul li{float:left;padding-left:20px; } 30 #center .ctop .logo{padding-left:70px;padding-top:10px;} 31 #center .ctop .title{padding-top:40px;} 32 33 /*調整文件框位置*/ 34 #ccenter ul{clear:both;padding-left:120px;padding-top:15px;} 35 #ccenter ul li{float:left;} 36 #ccenter .text{padding-top:14px;padding-left:20px;width:359px;height:53px; 37 background: url("../img/skin/text.png") no-repeat center center; 38 } 39 #ccenter .text:hover{width:359px;height:53px;background: url("../img/skin/text-hover.png") no-repeat center center;} 40 #ccenter ul li input{height:35px;padding-top:5px;/*padding-left:10px;*/outline:none;border:none; 41 font-size:35px;font-weight:bold;color:#cfe1ec; 42 background: none; 43 } 44 /*文本框密碼框*/ 45 #ccenter .codelabel{color:#cfe1ec;font-size:30px;font-weight: bold;position: relative;top:15px;left:-40px;} 46 #ccenter .codeText{position: relative;left:-55px;padding-top:14px;padding-left:20px;width:194px;height:53px; 47 background: url("../img/skin/validateText.png") no-repeat center center; 48 } 49 /*驗證碼*/ 50 #ccenter .codeText:hover{width:194px;height:53px;background: url("../img/skin/validateText-hover.png") no-repeat center center;} 51 #ccenter .codepic{position: relative;top:10px;left:-55px;} 52 53 /*提交按鈕*/ 54 #ccenter .submitBtn{width:700px;float:left;padding-left:55%;padding-top:30px;} 55 56 #ccenter span{width:183px;height:65px;background: url("../img/skin/btn.png") no-repeat center center;display: block; 57 position:relative;left:-80px;top:-25px; 58 } 59 #ccenter span:hover{width:183px;height:65px;background: url("../img/skin/btn-hover.png") no-repeat center center;display: block; 60 position:relative;left:-80px;top:-25px; 61 } 62 #ccenter .submitBtn a{position:relative;top:12px;left:33px;font-size: 35px;font-weight: bold;text-decoration: none;color:#cfe1ec;display: block;} 63 #ccenter .submitBtn a:hover{font-size: 35px;font-weight: bold;text-decoration: none;color:#ffffff;display: block;}
ps:我這里只兼容到ie8以上，ff,chrome,opear,
這里說一下，個人對瀏覽器的兼容的一些總結：
2-1,每個瀏覽器對每個標簽都有一些默認的樣式，所以在寫css之前要把這所有要用到的標簽樣式歸0，其實網上已經有很多這樣的css，搜：“重置css”,會有很多，將得到的css，存為一個reset.css。在調用自己的css之前導入，reset.css.
2-2,頁面布局在不同的瀏覽器發生移位，很大的原因是css布局不夠嚴密，比如說：一個大的div里面有一個和他一樣大的div，這個是沒問題的，但是，你給你里面的div,添加border屬性，或者，添加padding屬性，里面的div就會大於外面的div,這樣的結果就是。div變的不可以控制，你也不知道，結果會是什么樣子，而不同的瀏覽器遇到這樣的情況，解析也就不一樣，最終於的結果就是會發生移位。
建議：在設計頁面的時候，嚴格知道每一塊內容的大小，在ps中設計的時候，就要考慮大小來設計，實現的時候按照設計來實現，基本不會有什么問題。
2-3,還有就是有的屬性瀏覽器不認識，所以盡量用簡單的能實現效果的css.
2-4,做到上面三點，基本上就能達到兼容，最后剩下，只要將針對特定屬性，在特定的瀏覽器下面進行css hack的調試了，css hack不是萬能的，能少用就不要多用。不要發什么不兼容都指望css hack，不然這樣寫出來的代碼難懂，難維護，更談不上代碼之美。