单选框和复选框在网页表单中应用十分广泛，但是浏览器默认自带的单选框和复选框样式不仅不统一，而且大多都比较简单丑陋。本文给大家介绍了一些基于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 设计工作室的页面。看图上的文字我们就知道，Kickpush希望展示自己与众不同的个性。这个配色方案的选择就很有目的性，将Kickpush的个性快速直观地表达出来了。
色彩有助于讲好一个故事，Bloom的主页就是个很好的例子。在整个设计中，他们使用的是同样的电子蓝。相同的配色与其他视觉元素一起，帮助用户从页眉滚动到页脚。如果所有不同的部分都有不同的主色，那么故事的完整性就会被打破了。
对于Adobe的营销云登录页面，效果也是差不多的。整个设计是一个很大的版面，每个部分都有自己的配色方案，从最顶部的浅蓝色一直到最底部的深紫色。我们可以看到，整个配色不仅仅是纯的UI颜色，照片选用的色调也与每一种背景色相配。
因为这个设计是一个很长的页面，颜色有助于讲述每个部分的故事。
有时，颜色是专门用来给设计增添趣味性的。为了更有效的使用色彩，有时大胆的颜色并不一定要在设计的前面和中心。
例如，Designmodo自己的Qards着陆页面使用了各种各样的小色块，从而使得登陆页看起来更令人愉快。
强化品牌，我认为这是色彩最有力的作用了，当然了，我不是指上文中Kickpush 或是Bloom那种使用大块背景色的方式，而是批判性的、策略性的使用颜色。
我们很多人都见证了Asana的改版，在新版本中加入了不少颜色。在网站的某些部分，颜色被大量地使用，而在其他部分则不是那么多，这是为了在总体上实现平衡。Asana选用的颜色多变而充满活力，搭配的也非常好。现在，Asana的品牌色彩由亮粉色，橙色和紫色组成，充满活力。可以说，颜色策略似乎是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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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.lanlanwork.com