單選框和復選框在網頁表單中應用十分廣泛，但是瀏覽器默認自帶的單選框和復選框樣式不僅不統一，而且大多都比較簡單丑陋。本文給大家介紹了一些基于CSS3的個性化單選框和復選框，一些選中動畫是基于jQuery的，你可以挑選喜歡的單選框和復選框應用到自己的網頁中去，非常方便。
1、jQuery超級個性化的單線框和復選框
今天要分享的也是一個非常個性化的單選框和復選框插件，顏色你可以自己定義。
2、CSS3漂亮的自定義Checkbox復選框 9款迷人樣式
今天我們來分享一款9款樣式迷人的CSS3漂亮的自定義checkbox復選框。這幾款復選框樣式很豐富，使用起來也比較方便。
3、CSS3自定義美化復選框Checkbox組合
今天我們要來分享一組非常漂亮的CSS3自定義復選框checkbox，每一個checkbox都有其各自的特點。有幾款checkbox在選中的情況下還會出現動畫效果，非常不錯的CSS3自定義美化checkbox組合。
4、jQuery實現美化版的單選框和復選框
今天這款是利用jQuery實現的美化版單選框和復選框，樣式風格非常簡潔清爽，是一款很不錯的jQuery按鈕插件。
5、純CSS3 3D按鈕 按鈕酷似牛奶般剔透
CSS3按鈕一般都可以設計的非常漂亮，利用投影、漸變等CSS3屬性可以把按鈕渲染的十分動感。今天分享的這款CSS3按鈕外觀非常特別，它看上去酷似晶瑩剔透的牛奶，而且在點擊按鈕時出現3D效果的動畫，按鈕按下時，按鈕會輕輕的彈動一下，非常逼真。
6、HTML5/CSS3開關按鈕 立體3D按鈕
今天介紹的這款HTML5/CSS3開關切換按鈕是利用純CSS3的，代碼非常簡單，3D效果也還可以。
7、CSS3自定義發光Radiobox單選框
今天我們要來分享一款CSS3實現的自定義發光radiobox單選框插件，該radiobox選中時也有滑塊的動畫。
8、CSS3實現自定義Checkbox動畫
今天我們要再來分享一款CSS3自定義checkbox，而且這款checkbox還帶有動畫效果，當你選中checkbox的時候，會以動畫的方式打上一個大大的勾。
以上就是8個非常個性化的CSS3單/復選框，希望對你有所幫助。
本文鏈接：http://www.codeceo.com/article/10-personal-css3-radiobox-checkbox.html
最近身邊的一些小伙伴，總會遇見B端設計工作，對于這種偏后臺設計的B端設計，總會有大量的表單設計需要做，結合以前自己也有過不少表單設計的工作，在這里給大家分享一下自己對于PC端表單設計的研究，聊一聊表單在PC端中的運用。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
include指令標記用于把JSP文件，HTML網文文件等文件靜態嵌入當前JSP網頁中，語法如下:
靜態嵌入就是“先包含后處理”在編譯階段完成對文件嵌入，即先將當前JSP頁面與被嵌入文件合并成一個新的JSP頁面
eg：
動態嵌入就是“先處理后包含”在運行階段完成對文件嵌入，即在把JSP頁面轉譯為JAVA文件時，并不合并兩個頁面。
eg：
運行結果：
總結：靜態嵌入中嵌入頁面與原頁面合并了，動態嵌入則還沒有。
動態嵌入與靜態嵌入相比較，動態嵌入執行速度稍慢，但是靈活性較高。
一.include指令標記
[html] view plain copy
[html] view plain copy
運行結果如下：
[html] view plain copy
二.include動作標記：
動作標記是將JSP等文件動態嵌入當前JSP網頁中，語法如下：
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
收集了一些比較常用的JavaScript函數。
1、字符串長度截取函數
function cutstr(str,len){
var temp,icount = 0,patrn = /[^x00-\xff]/,strre=" ";
for(var i= 0;i<str.length;i++) {
if (icount<len-1){
temp =str.substr(i,1);
if (patrn.exec(temp)==null){
icount =icount+1
}else {
icount =icount+2
}
strre+=temp
} else {
break;
}
}
returen strre+"...";
}
2、替換全部
String.prototype.replaceAll = function(s1,s2) {
return this.replace(new RegExp(s1,"gm"),s2);
}
3、清除空格
function trim = function() {
var reExtraSpace = /^\s*(.*?)\s+$/;
return this.replace(reExtraSpace,"$1");
}
4、清除左空格/右空格
function ltrim(s){
return s.replace(/^(\s*| *)/,"");
}
function rtrim(s) {
return s.replace(/(\s*| *)$/,"");
}
5、判斷是否以某個字符串開頭
String.prototype.startWith = function(s) {
return this.indexOf(s)==0;
}
6、判斷是否以某個字符串結束
String.prototype.endWith = function(s) {
var d = this.length - s.length;
return (d >= 0 && this.lastIndexOf(s)==d);
}
7、轉義HTML標簽
function HtmlEncode(text) {
return text.replace(/&/g,'&').replace(/\"/g,' " ').replace(/</g,'<').replace(/>/g,'>');
}
8、時間日期格式轉換
Date.prototype.Format = function(formatStr){
var str = formatStr;
var week =['日','一','二','三','四','五','六']；
str = str.replace(/yyyy|YYYY/,this.getFullYear());
str = str.replace(/yy|YY,(this.getYear()%100)>9?(this.getYear()%100).toString():'0'+(this.getYear()%100));
str = str.replace(/MM/,(this.getMonth()+1)>9?(this.getMonth()+1).toString():'0'+this.getMonth()+1));
str = str.replace(/w|W/g,week[(this.getDay()];
str = str.replace(/dd|DD/,(this.getDate()>9?this.getDate().toString():'0'+this.getDate());
str = str.replace(/d|D/g,this.getDate());
str = str.replace(/hh|HH/,this.getHours()>9?(this.getHours().toString():'0'+this.getHours());
str = str.replace(/h|H/g,this.getHours());
str = str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0'+this.getMinutes());
str = str.replace(/m/g,this.getMinutes());
str = str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0'+this.getgetSeconds());
str = str.replace(/s|S/g,this.getSeconds());
return str;
}
9、判斷是否為數字類型
function isDigit (value){
var patrn = /^[0-9]*$/;
if (patrn.exec(value) == null || value=="" ) {
return false;
} else {
return true;
}
}
10、設置cookie
function setCookie(name,value,Hours){
var d =new Date();
var offset =8;
var utc = d.getTime()+(d.getTimezoneOffset()*60000);
var nd = utc+(3600000*offset);
var exp = new Date(nd);
exp.setTime(exp.getTime()+Hours*60*60*1000);
document.cookie = name+"="+escape(value)+";domain=360doc.com;"
}
獲取cookie值
function getCookie(name){
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if (arr!=null){
return unescape(arr[2]);
}else {
return null;
}
}
11、加入收藏夾
function AddFavorite(sURL,sTitle) {
try{
window.external.addFavorite(sURL,sTitle);
}catch(e){
try{
window.sidebar.addPanel(sTitle,sURL,"");
}catch(e){
alert("加入收藏夾失敗，請使用Ctrl+D進行添加");
}
}
}
12、設為首頁
function setHomepage(){
if(document.all){
document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage('http://w3cboy.com')
}else if (window.sidebar){
if(window.netscape){
try{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")
}catch(e){
alert("該操作被瀏覽器拒絕，如果想啟用該功能，請在地址欄內輸入about:config，然后將
項 signed.applets.codebase_principal_support 值該為true");
}
}
var prefs = Components.classes['@mozilla.org/preferences- service;1'].getService(Components.interfaces.nsIPrefBranch);
prefs.setCharPref('browser.startup.homepage', 'http://w3cboy.com');
}
}
13、加載樣式文件
function LoadStyle(url) {
try {
document.createStyleSheet(url);
}
catch(e) {
var cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
cssLink.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(cssLink);
}
}
14、返回腳本內容
function evalscript(s) {
if(s.indexOf('<script') == -1) return s;
var p = /<script[^\>]*?>([^\x00]*?)<\/script>/ig;
var arr = [];
while(arr = p.exec(s)) {
var p1 = /<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i;
var arr1 = [];
arr1 = p1.exec(arr[0]);
if(arr1) {
appendscript(arr1[1], '', arr1[2], arr1[3]);
} else {
p1 = /<script(.*?)>([^\x00]+?)<\/script>/i;
arr1 = p1.exec(arr[0]);
appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1);
}
}
return s;
}
15、清除腳本內容
function stripscript(s) {
return s.replace(/<script.*?>.*?<\/script>/ig, '');
}
16、動態加載腳本文件
function appendscript(src, text, reload, charset) {
var id = hash(src + text);
if(!reload && in_array(id, evalscripts)) return;
if(reload && $(id)) { $(id).parentNode.removeChild($(id));
}
evalscripts.push(id);
var scriptNode = document.createElement("script");
scriptNode.type = "text/javascript";
scriptNode.id = id;
scriptNode.charset = charset ? charset : (BROWSER.firefox ? document.characterSet : document.charset);
try {
if(src) {
scriptNode.src = src;
scriptNode.onloadDone = false;
scriptNode.onload = function () {
scriptNode.onloadDone = true;
JSLOADED[src] = 1;
};
scriptNode.onreadystatechange = function () {
if((scriptNode.readyState == 'loaded' || scriptNode.readyState == 'complete') && !scriptNode.onloadDone) {
scriptNode.onloadDone = true; JSLOADED[src] = 1;
}
};
} else if(text){
scriptNode.text = text;
}
document.getElementsByTagName('head')[0].appendChild(scriptNode);
} catch(e) {}
}
17、返回按ID檢索的元素對象
function $(id) {
return !id ? null : document.getElementById(id);
}
18、跨瀏覽器綁定事件
function addEventSamp(obj,evt,fn){
if(!oTarget){
return;
} if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}else{
oTarget["on" + sEvtType] = fn;
}
}
19、跨瀏覽器刪除事件
function delEvt(obj,evt,fn){ if(!obj){
return;
} if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(oTarget.attachEvent){
obj.attachEvent("on" + evt,fn);
}else{
obj["on" + evt] = fn;
}
}
20、元素添加on方法
Element.prototype.on = Element.prototype.addEventListener;
NodeList.prototype.on = function (event, fn) {、
[]['forEach'].call(this, function (el) {
el.on(event, fn);
});
return this;
};
在生活中，不管是瀏覽網頁還是使用APP，我們都能看到色彩是其中重要的設計元素。每一年我們都能看到很多“流行趨勢預測”之類的文章，而這些流行趨勢里無一不包含色彩。
隨著時間的推移，設計師們在色彩的使用上更加大膽，更加有策略。有時，色彩用來突出某個元素，有時用來講好一個故事，有時用來強化品牌的輸出。今天我們就來舉幾個例子。
幾年前有一個很流行的趨勢是采用大膽的背景，現在還是能看到很多例子。在一個好的設計里，豐富多彩的背景能夠讓某一區域成功吸引注意力。不管你認為流行趨勢是什么，不可否認的是，好的背景色能讓一個部分脫穎而出。
下面這個設計來自Root工作室，使用黃色背景來突出切斯特動物園的案例研究。黃色背景設定了這個案例研究的基調。當然了，并不是所有的案例都使用像切斯特動物園黃色這樣鮮艷的顏色，因為這個案例的設計是極簡風格，并沒有需要特別突出的內容，所以鮮艷背景恰到好處。
接下來這個例子是Mambo Mambo，它使用色彩來突出組合的不同部分。有些部分是霓虹黃色，有些是深藍，有些甚至是黑色。在截圖中，我們可以看到，霓虹黃色與綠色搭配，藍色和膚色搭配，看起來非常和諧。
在整個頁面中，正是這些背景色的使用使不同部分都變得獨特而有趣。同時呢，也起到了品牌宣傳的效果。
顏色運用得當可以更好地突出想要突出的部分。讓我們從優步手語登錄頁面開始，橙色的漸變背景肯定會吸引用戶的注意力。這是一個很棒的設計策略，因為這個頁面的目的就是教人們基本的手語，很大程度上是依賴視覺線索實現的。
接下來是Kickpush 設計工作室的頁面?？磮D上的文字我們就知道，Kickpush希望展示自己與眾不同的個性。這個配色方案的選擇就很有目的性，將Kickpush的個性快速直觀地表達出來了。
色彩有助于講好一個故事，Bloom的主頁就是個很好的例子。在整個設計中，他們使用的是同樣的電子藍。相同的配色與其他視覺元素一起，幫助用戶從頁眉滾動到頁腳。如果所有不同的部分都有不同的主色，那么故事的完整性就會被打破了。
對于Adobe的營銷云登錄頁面，效果也是差不多的。整個設計是一個很大的版面，每個部分都有自己的配色方案，從最頂部的淺藍色一直到最底部的深紫色。我們可以看到，整個配色不僅僅是純的UI顏色，照片選用的色調也與每一種背景色相配。
因為這個設計是一個很長的頁面，顏色有助于講述每個部分的故事。
有時，顏色是專門用來給設計增添趣味性的。為了更有效的使用色彩，有時大膽的顏色并不一定要在設計的前面和中心。
例如，Designmodo自己的Qards著陸頁面使用了各種各樣的小色塊，從而使得登陸頁看起來更令人愉快。
強化品牌，我認為這是色彩最有力的作用了，當然了，我不是指上文中Kickpush 或是Bloom那種使用大塊背景色的方式，而是批判性的、策略性的使用顏色。
我們很多人都見證了Asana的改版，在新版本中加入了不少顏色。在網站的某些部分，顏色被大量地使用，而在其他部分則不是那么多，這是為了在總體上實現平衡。Asana選用的顏色多變而充滿活力，搭配的也非常好?，F在，Asana的品牌色彩由亮粉色，橙色和紫色組成，充滿活力?？梢哉f，顏色策略似乎是Asana品牌定位的關鍵。
Stripe公司的策略也差不多，使用相鄰顏色之間的漸變，比如藍色和綠色，這可能是這種顏色使用的一個大趨勢。品牌整體上是藍色，同時也包含綠色、粉色、紫色和橙色。這么多顏色共同配合，增強了Stripe公司的品牌影響力。
最后一個例子是Goulburn山谷的網站。他們的品牌使用了一些不同尋常的顏色，不過整個設計看起來不錯。
登錄頁面中使用的顏色和照片中的截圖是一樣的：綠色略帶橙色。由于照片中色彩的協調，整個著陸頁都很流暢。
總結
無論是Asana，用顏色創造更好的品牌；還是Kickpush，使用明亮的紅色背景突出內容，讓用戶意識到它的與眾不同，我們看到了顏色在網站中的戰略性意義。
最重要的是，顏色有助于塑造個性，尤其是品牌形象。當網頁設計趨勢發生變化時，網頁設計中色彩的使用只會變得越來越好。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.背景介紹
我們為什么要選擇合適的網頁設計單位
隨著Web的發展，對新的解決方案的需求也會繼續增大，對網頁的要求更高。
網頁設計單位是涉及到我們布局的效果，使用不同的單位會對最終的demo，會有影響。
現在都是要求響應式設計，需要適配各種設備，電腦，手機，平板。如果單位不合適，可能在這個設備顯示良好，那個設備就會打亂布局。
所以需要我們選擇合適的單位來進行開發，設計。
2.知識剖析
1、px
px就是pixel的縮寫，意為像素。px就是設備或者圖片最小的一個點，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點，垂直方向是768個像素點。
是我們網頁設計常用的單位，也是基本單位。通過px可以設置固定的布局或者元素大小，缺點是沒有彈性。
特點是1. em的值并不是固定的； 2. em會繼承父級元素的字體大小。
2、em
參考物是父元素的font-size，具有繼承的特點。如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。
特點是1. em的值并不是固定的； 2. em會繼承父級元素的字體大小。
3、rem
rem是相對于根元素html，這樣就意味著，我們只需要在根元素確定一個參考值，可以設計HTML為大小為10px，到時設置1.2rem就是12px.以此類推。
優點是，只需要設置根目錄的大小就可以把整個頁面的成比例的調好。
4、%
一般來說就是相對于父元素的，
1、對于普通定位元素就是我們理解的父元素 2、對于position: absolute;的元素是相對于已定位的父元素 3、對于position: fixed;的元素是相對于ViewPort（可視窗口），
5、vw
css3新單位，view width的簡寫，是指可視窗口的寬度。假如寬度是1200px的話。那10vw就是120px
舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。
6、vh
css3新單位，view height的簡寫，是指可視窗口的高度。假如高度是1200px的話。那10vh就是120px
舉個例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。
7、vm
css3新單位，相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vm 舉個例子：瀏覽器高度900px，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px。
兼容性太差 ，現在基本上沒人用，我試了一下Chrome就用不了。
3.常見問題
假如使用em來設置文字大小要注意什么？
4.解決方案
注意父元素的字體大小，因為em是根據父元素的大小來設置的。比如同樣是1.5em，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px.
特別是在多重div嵌套里面更要注意。
5.擴展思考
css還有哪些長度單位？
in:寸
cm:厘米
mm:毫米
t:point，大約1/72寸
pc:pica，大約6pt，1/6寸
6.更多問題
1.pc pt ch一般用在什么場景?
這些我們網頁設計基本上用不到，在排版上會有用處。
2.如何使 1rem=10px
在設置HTML{font-size：62.5%；}即可
3.如果父元素沒有指定高度，那么子元素的百分比的高度是多少？
會按照子元素的實際高度，設置百分比已經沒有效果了。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
關于UI界面的切圖命名規范，U妹覺得關鍵是在于團隊能夠有一個統一的規則，所以這里只介紹一種通用的命名規則，當然大家也可以根據自己的實際情況去制定，這里只提供一種方法與思路，僅供參考。
規范的命名方式可以提高開發人員的的開發效率和整個開發團隊的友好合作。U妹覺得要盡可能用最少的字符而又能完整的表達標識符的含義。
一、切圖命名英文縮寫的3個原則
1.較短的單詞可以通過去掉“元音”形成縮寫
2.較長的單詞可去單詞的頭部幾個字母形成縮寫
3.還有一些約定成俗的英文單詞縮寫
二、命名規則
模塊_類別_功能_狀態.png
U妹舉個例子：nav_button_search_default.png
釋義為：導航_按鈕_搜索_默認.png
啟動界面
啟動圖片 default.png
啟動logo default.png
如：default.png\defoult@2x.png\default-568@2x.png
登錄界面
登錄背景 login_bg.png
登錄logo login_logo.png
輸入框 login_input.png
輸入框選中狀態 login_input_pre.png
登錄按鈕 login_btn.png
登錄按鈕選中狀態 login_btn_pre.png
導航欄按鈕 (nav) 命名
nav_功能描述.png
如：nav_menu.png\nav_menu_pre.png（同按鈕選中前后兩種狀態命名 ）
按鈕命名（btn可重復使用按鈕)
一般 normal btn_xxx_normal.png
點擊 highlight btn_xxx_highlight.png
不能點擊 disabled btn_xxx_disable.png
按下 pressed btn_xxx_pressed.png
選中 selected btn_xxx_selected.png 做為復數選擇出現機會不高
btn_功能屬性或色彩均可.png
如：btn_blue.png\btn_blue.9.png 藍色按鈕
其他命名
圖標 icon_xxx.png
圖片 pic_xxx.png或是img_xxx.png
照片 pho_xxx.png
左側導航 命名 leftbar_功能描述.png
如：leftbar_info.png\leftbar_info_pre.png 個人中心
底部選項卡按鈕（TabBar）
命名 Tab_功能描述.png
如：tab_set.Png\nav_set_pre.png 設置
主頁命名
命名 home_功能屬性＋描述.png
如：home_menu_recommended.png 熱門推薦
ps：描述可用英文或拼間開頭字母組合等
列表頁命名規則
命名 List_功能屬性＋描述.png
如：list_menu_collect.png 列表頁收藏按鈕
UI文件命名規范常用詞
常用狀態
正常 normat
按下 pressed
選中 selected
禁用 disabled
已訪問 visited
懸停 hover
控件＆部件
控件：較獨立的可操作界面元素
部件：描述屬于某控件一部分
按鈕（可點） Btn
圖標 Icon不可點、非點擊主體、圖案部件
標記 Sign 列表
List 菜單 Menu
視圖 View
面板 Panel
薄板 Sheet
底部彈出菜單 欄 Bar
狀態欄 StatusBar
導航欄 NaviBar
標簽欄 TabBar
工具欄 ToolBar
切換開關 Switch
滑動器 Slider
單選框 Radio
復選框 CheckBox
背景 Bg
蒙版、遮罩 Mask
收藏 collect
評論 comment
廣告 ad
時間 time
音頻 audio
視頻 viedio
不喜歡 dilike
用戶 user
首頁 hone
排名 ranked
搜索 search
標志 logo
進度條 progress bar
默認圖片 def_
分隔圖片 seg_
選擇 sel_
關閉 close
返回 back
編輯 eidt
內容 content
左 中 右 left center right
提示信息 msg
個人資料 porfile
彈出 pop
刪除 delete
下載 download
登錄 login
注冊 regsiter
標題title
注釋 note
鏈接 link
圖片 image（img)
刷新 refresh
常用補充描述
頂部 Top
中間 Middle
底部 Bottom
第一 First
第二 Second
最后 Last
頁頭 Header
頁腳 Footer
藍藍設計的小編 http://www.syprn.cn