Image

父亲节banner

好久没写,我又来啦!

六月的事了,父亲节的时候想要表达一下对老父亲的敬意,亲自画了一张banner。

fathersday

 

这位帅气的男士就是年轻时候的老爸,那时候穷,衣服还一个个儿的补丁。

被举起来的粉色裙子的可爱小姑娘,就是本尊小时候啦。每次老爸从外面回来,我一听到声音,就屁颠屁颠地奔过去,老爸大手一托,将我高高举起,可乐可乐了。

还有内椅子、桌子、桌上的饭菜,都精准地还原了当年家里的摆设布局,地上那些有的没的只是用来表现当时家里的凌乱。

看到左下角的打气筒没,老爸骑个小破自行车送我上幼儿园,有次坐车后座篮儿里睡着了,脚拇指被车给绞出了血。还有一次清明节去扫墓,下着雨,天气贼冷贼冷的,我的小棉鞋湿了,怕挨骂,不敢说,坐在车后座,亲戚突然问,你的鞋去哪了?我一看,一只鞋真不见了,脚已经冻木了,鞋掉了没察觉到,挨骂什么的就不说了,都过去了。关于自行车的故事一摞一摞的。

右上角的蜘蛛网,印象太深刻了,家里好多好多蜘蛛网。

解说完毕,呕心沥血之作,请勿盗图。

 

javascript级联菜单(日历)

上次考DOM,考到级联菜单,迷迷糊糊,晕晕乎乎,不知从何下手。今天冷静下来,理了理思路。

要求:

  1. “年”或“月”发生变化且为有效值时,“日”下拉选择框显示相应的项。
  2.  “年”下拉选择框为初始状态时, “月”、“日”下拉选择框一定为初始状态。
  3. “月”下拉选择框为初始状态时, “日”下拉选择框一定为初始状态。

calender

思路:

1.  当前选框选项有变化的时候,操作下一个选框。当选择年份的时候,填充月份,选择月份的时候,根据所选月份填充日期。当年份为初始化状态,将月份和日期设置为初始化状态,月份为初始化状态时,将日期也设置为初始化状态。

2. 每年的月份数相同,但每个月的天数不同,将不同天数保存在数组中,方便相应月份调用。

3. 闰年2月与平年2月天数不同,分开判断。

上代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calendar</title>
</head>
<body style="text-align:center">
    <select name="year" id="year">
        <option value="0">--</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
    </select> 年
    <select name="month" id="month">
        <option value="0">--</option>
    </select> 月
    <select name="date" id="date">
        <option value="0">--</option>
    </select> 日
    
    <script>
        window.onload = initSelect;
        
        function initSelect(){
            var yearSel = document.getElementById('year');
            var monthSel = document.getElementById('month');
            
            initYear(); //设置年份默认选中第一个选项
            initMonth(); //设置月份默认选中第一个选项
            initDate(); //设置日期默认选中第一个选项
            yearSel.onchange = yearFun; //当年份被选择的时候调整月份
            monthSel.onchange = monthFun; //当月份被选择的时候调整日期
            
        }
        
        function yearFun(){
            if( this.options.selectedIndex === 0 ){ //如果选中第一个,把月,日设置为也选中第一个
                initMonth();
                initDate();
            }else{ //如果选中年份,填充月份
                popMonth();
            }
        }
        
        function monthFun(){
            var dateArr = [31,28,31,30,31,30,31,31,30,31,30,31]; //储存不同月份天数的数组
            var thisValue = parseInt(this.options[this.options.selectedIndex].value); //获取当前选中的选项的值并转为数字
            
            if( this.options.selectedIndex === 0 ){ //如果选中第一个选项,初始化日期
                initDate();
            }else{ //如果选中其他选项,根据选项加载不同日期
                document.getElementById('date').options.length = 1;
                var isLeap = checkLeap(); //要使用函数返回值,可以保存为变量,或直接使用
                if ( isLeap ){
                    dateArr[1] = 29;
                }else{
                    dateArr[1] = 28;
                }
                for( var i = 0; i < dateArr[thisValue-1]; i++ ){ //根据选中选项的value值查找date数组中对应的天数值,循环出来
                    document.getElementById('date').options[i+1] = new Option( i+1 ); //因为第一个选项是横线,所以要+1,从第二个开始
                };
            }
        }
        
        function popMonth(){
            initDate(); //填充月份的时候初始化日期
            for( var i = 0; i < 12; i++ ){
                document.getElementById('month').options[i+1] = new Option(i+1,i+1); //填充月份,设置内容和值
            }
        }
        
        function checkLeap(){ //判断选中年份是否为闰年
            var yearSel = document.getElementById('year');
            var thisYearValue = parseInt(yearSel.options[yearSel.options.selectedIndex].value); //获取当前选中年份的值并转为数字
            if( (thisYearValue % 4  === 0 && thisYearValue % 100 !== 0) || thisYearValue % 400 === 0 ){ //闰年:能被4整除的同时不能被100整除,或者能被400整除,只要满足两者之一就是闰年
                return true;
            }
            return false;
        }
        
        function initYear(){
            document.getElementById('year').options.selectedIndex = 0; //设置年份选中第一个选项
        }
        
        function initMonth(){
            document.getElementById('month').options.selectedIndex = 0; //设置月份选中第一个选项
            document.getElementById('month').options.length = 1; //只保留第一个选项
        }
        
        function initDate(){
            document.getElementById('date').options.selectedIndex = 0; //设置日期选中第一个选项
            document.getElementById('date').options.length = 1; //只保留第一个选项
        }
    </script>
</body>
</html>

查看DEMO

1. select.options.selectedIndex 可以获取到被选中选项的index值。

2. new Option( ), 创建新的option

3. 函数的返回值可以保存为变量:

function myFunction()
{
var x=5;
return x;
}

可以保存为变量:

var myVar=myFunction();
console.log(myVar);

也可以直接使用:

document.getElementById("demo").innerHTML=myFunction();

关于响应式设计

响应式网页设计responsive web design(RWD)的流行已经有挺长一段时间了,过去的2012年,响应式设计已深入人心,2013年仍是网页设计的一大热门并且是将来的一种趋势。当用移动设备浏览网页看到的是普通电脑缩小版的网页并且无法使用阅读器时,多数人通常的做法是直接离开。关于响应式设计研究的文章不尽其数,比如前端观察的响应式网页设计这篇文章,是我认识响应式设计的第一篇文章,介绍得比较全面。Web designer wall 三步实现响应式设计教你快速入门。

由于工作需要,自己也做了一些响应式的web app,公司的开发模式属于快速开发,于是2012年中旬开始认识响应式设计的我目前对它的研究并不深,只是在工作中碰到不少问题,面对这些问题,google是个不错的选择,不知是否搜索技巧有问题,总觉得找的答案并不恰恰就是我想要的,于是决定把一些问题和解决方案及从别人那里学到的有用的小经验分享出来,希望能获得更大的进步。

实现响应式的网页,我主要依赖于css3的Media Queries, 虽说一些人痛恨Media Queries, 也有人提出,响应式设计不应该只是Media Queries(还有图片处理技术<img srcset>和<picture>),但不得不承认,这几乎是我展开工作的全部。

一般响应式网页设计会有一个基础html框架: header, navigation, content, aside, footer. 作为响应式设计,其核心是根据屏幕尺寸保留网页主要内容(content),相应隐藏其他非重要内容,以保证网站内容的可读性(个人意见)。而一个web app,设计感更浓重,图片更多更大,其响应的难度要远远大于一个博客式的website。

1.字体。

web app要求内容的趣味性,设计师通常会使用一些与设计风格相匹配的字形(而这些字体通常不是google web font),如果目标用户非移动用户,这个可以用图片来解决(css sprite),但如果需要一个responsive的web app,这是个非常糟糕的选择。css sprite对其背景定位和大小尺寸需要相当准确,无法适应对尺寸要求极度宽松的响应式,并且多而大的图片对加载速度影响很大。因此,建议使用google web font(上面有很多漂亮的字形,限英文)或系统默认字体。当然也有嵌入字体只说,但如果是中文,可要考虑字库大小哦~

对于字号,应至少设置为14px,通常网页上的12px在移动设备上浏览还是有些吃力的。

2.图片。

对于背景图的设计,应尽量使用可以平铺的小图案,或者规律的渐变,这些渐变可以用css3来实现,也可以使用那些即使被切掉也无关紧要的图片,以减少屏幕尺寸变换时对图片的频繁切换。

3.导航。

导航在引导用户浏览网站或者app中起着非常重要的作用,除了导航数量少,字数简短的情况下,一般导航在电脑版切换到移动版时,需要更适合的UI。这里教你如何创建合适的响应式导航。

4.移动应用的特性:touch。

不同于website, web app 在手机上的需求更高,例如浏览一个图片slider,网页上通常通过点击左右键来切换图片,而在手机上,左右滑动的手势更符合用户习惯,因此可以选择一些响应式的jquery插件,例如FlexSlider

5.禁止缩放。

<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ name=”viewport”>

width                      – viewport的宽度

height                     – viewport的高度

initial-scale          – 初始的缩放比例

minimum-scale  – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable       – 用户是否可以手动缩放

6.IOS中Safari允许全屏浏览。

<meta content=”yes” name=”apple-mobile-web-app-capable”>

7.IOS中Safari顶端状态条样式

<meta content=”black” name=”apple-mobile-web-app-status-bar-style”>

content=”black”即设置为黑色。

8.忽略将数字变为电话号码

<meta content=”telephone=no” name=”format-detection”>

9.IOS中Safari设置保存到桌面图标

<link rel=”apple-touch-icon” href=”custom_icon.png”>

添加到主屏幕UI:图标参考:

图标会自动添加高亮效果,如果不需要,可以在plist中明确指定UIPrerenderedIcon的键值去掉

57像素的普屏的iPhone图标,图标圆角的半径为10像素

114像素Retina屏的iPhone图标,图标圆角的半径为20像素

512像素的用于iTunes/App Store的图标,在实际显示是会被缩放到175像素进行显示(但提交是不可以提交175像素)

72像素的普屏iPad图标,图标圆角的半径为13像素

144像素Retina屏iPad图标,图标圆角的半径为26像素

50像素iPad的Spotlight搜索图标的最终视觉大小是48像素,原因是iOS会对图标的每个边去掉1个像素,添加阴影效果

100像素Retina屏的Spotlight搜索图标的最终视觉大小是96像素,原因同上,这次是每边减2个像素

10.关闭Input键盘默认首字母大写

autocapitalize=”off”

例如: <input type=”text” value=“” name=”” autocapitalize=”off” />

根据需要设置,因为有一些输入框还是需要首字母大写的,如姓名。

11.去除Android平台中对邮箱地址的识别

<meta content=”email=no” name=”format-detection” />

12.-webkit-box-sizing

在 移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元 素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像 素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊 的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。

13.禁止iphone字体大小调整

html { -webkit-text-size-adjust: none; }

14.图片在retina高清屏下的显示

为了保证图片在retina下的高清显示,需要准备一张原始图和一个比原图大一倍的图。

 image{ background-image:url( image_url );/*用于普通屏幕*/
/* ———— Retina ———— */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
only screen and (min–moz-device-pixel-ratio: 2),        /* Firefox 16 之前 */
only screen and (-webkit-min-device-pixel-ratio: 2),    /* Webkit */
only screen and (min-resolution: 240dpi),                    /* 标准 */
only screen and (min-resolution: 2dppx)                      /* 标准 */
{
image{
background-image:url( image_url );
background-size: 50% 50%;
}
}
另外,无图片(no images)是开发的趋势,圆形,三角,渐变,阴影,如果是移动应用开发,请把它们变成css代码,因为它的灵活性足够适应不同尺寸的屏幕并且图像质量不会下降。

纯CSS实现摆动的挂钟

纯CSS实现的挂钟。只是做了秒针的转动,时针和分针都是静止的。做动画展示用,不要当真。: D

钟摆使用常用曲线速度(linear,ease,ease-in,ease-out,ease-in-out)都不太自然,于是用css的贝塞尔曲线(cubic-bezier)来调整。

贝塞尔曲线工具:http://cubic-bezier.com/

 

See the Pen pure css pendulum clock by kitty wei (@kittywei) on CodePen.

Brackets-一个懂web设计的开源现代编辑神器

从第26版测试版开始,一直用Brackets至今,根本停不下来,龟速的DW就再也没打开过!当更新到1.0正式时,激动的心情简直难以言表。说Brackets是神器一点都不为过,它是多么懂web设计,懂前端啊!

捡几点经典实用的特色说。

1. 轻量,界面简洁。左边文件树,右边编辑面板。

brackets

2. 可以更换主题,即改变界面颜色字体,不喜欢白花花的底色?换!

brackets

3. 英文的?!必须改成中文。 Debug->Switch Language

brackets

4. HTML内快速编辑css(光标定位在要添加css的标签、类名、ID名上并Ctrl/Cmd+E)

5. 图片,颜色预览。鼠标移动到图片名,颜色代码上。光标定位在颜色代码上并Ctrl/Cmd+E可调用颜色面板选色噢。

6. 实时预览。Ctrl/Cmd + Alt + P打开实时预览功能,页面自动在chrome浏览器打开,文件有修改浏览器自动刷新,再也不用F5刷新页面啦!欢呼!!

7. 丰富的扩展插件。必装插件推荐:

  • Emmet:快速编辑器,让你编码健步如飞。
  • Code Folding:代码折叠,Brackets本身没有代码折叠功能,因此装一插件。
  • Beautify:格式化代码,让你的代码看起来美美的。
  • CSS Class Code hint: 输入class或id时会出现css里面的class/id。
  • Brackets Key Remapper: 修改快捷键

8. Extract for Brackets。

最高大上的功能来啦!!此神器可以预览PSD,点击图层,然后输入css属性,看到没有,图层的样式自动跑出来啦,有木有有木有?!width、height、left、top、color、background-color、opacity应有尽有,还能测量两个元素之间的距离,再也不用到PS里手工测量和偷瞄CSS Hat的代码啦!如果是文字图层,还可以点击copy text,文字就到粘贴板上啦。如果是普通图层,填写background或img的时候,还会自动切图到你的文件夹耶!要不要这么霸气呀?!

虽然目前只是预览版的,不能像copy text那样直接复制css,但是之后应该会加上的吧^_^网页版的是可以直接复制css的噢。好激动嘿嘿!

只是好像有个问题,有时图层会丢失。网页版的却很稳定,期待以后的改进吧Y(^_^)Y

 

你还在为DW的缓慢行动而烦恼吗?你还在编辑器和PS之间切换而晕头转向吗?你还在为拷贝文字点到手酸吗?那还等什么,赶紧拿起手边的电话订购吧,订购电话5151511,不要犹豫,不要彷徨,就是现在,先到先得!额。。。等。。。人家免费的好吧!去官网下载就好:http://brackets.io/

css设置下拉列表select的padding值

话说这原生select标签,在每个浏览器中自是各有各的面相,也只接受少数css属性的打扮,Safari里的select最为顽固,坚持素颜绝不动摇。可是艺术感超强的设计师们可不会将就,于是,聪明的程序员哥哥们开发了各种各样的select美化插件,许多杰作操作简单,灵活多变,美轮美奂,膜拜中。。。

近来遇到的一个问题是,需求只是要给select加上边内补白,就是padding啦,FF、Chrome、IE都很给力,而Safari里根本不起作用啦!如果装个美化插件,感觉有点像是拿大炮打蚊子,还得麻烦程序员哥哥去读插件的使用文档,出了问题要我提头去见(夸张),原生select多简单哪!

text-indent可以使select里的文本缩进,也能实现左边内补白的效果。可是右边被切掉了啊啊啊。。。如图:select

世界如此美妙,我却如此暴躁,这样不好,不好。

于是决定先应用padding,再对webkit浏览器做一个简单的hack。将-webkit-appearance属性设置为none,清除掉select的默认样式,再用css模拟一个select的样式,于是,想要多少padding值随我折腾,看代码:

Windows的FF、Chrome、IE、Safari,Mac的FF、Chrome,Safari以及iPhone4和android chrome(忘记机型)都没问题,别看说得这么啰嗦,其实只有1点,就是hack,如大神有高招,请给我留言。

PS:妹纸我弄这,是不是太闲了!

齐全的浏览器hack方法

browserhacks出来有一段时间了哇!网址:http://browserhacks.com/

所有冷门的,热门的,偏门的,正门的,前门的,后门的…应有尽有!

虽然平常编码规范,并且抛弃IE6,7,因此较少需要hack(得瑟一下…),但是遇到一些极品问题,hack还是需要滴!

作者说得好哇,hack并不总是完美的解决方案,但是在修复一些奇怪的bug还是很有用滴!

 

响应式图片切换加载方式

作为一个PS保存图片时,在图片质量和大小之间周旋良久的前端小妹,实在不能忍受响应式页面需要同时加载桌面版和手机版所需的图片或资源。那么多图片,得要拖慢多少时间?得要耗费多少流量?!好吧,我承认我总是要么很迷糊要么很爱钻牛角尖。。。

加载图片要么img标签,要么写在css背景图片里。

如果桌面版需要加载这三张大图(实际宽940px,高400px,下图已缩小做展示用):

img01 img02 img03

而手机上需要换成另外三张(宽300px,高200px):

img02_mobile img03_mobile img01_mobile

 

一,html加载图片

Demo:   http://kittywei.com/apps/img_loading/index_mediaquery_02.html

用media query将图片显示和隐藏(display)。

电脑浏览器打开页面,桌面版图片显示,手机版图片隐藏。手机浏览器打开,桌面版图片隐藏,手机版图片显示。于是,无论电脑、手机,把所有图片都下载下来勒>.<

1

 

二,css加载图片

将三张大图当作背景加到css文件,在用media query将小图同样以背景图的方式在手机上显示出来(background)。

Demo:   http://kittywei.com/apps/img_loading/index_mediaquery.html

电脑:

2

手机:

3

妈妈再也不用担心我手机上把电脑用的图也加载出来啦!

 

三,如果这些图片真的不能做背景用呢?一定要做成img呢?JS条件判断一下!

如果你用modernizr.js就太好了!耶!鼓掌欢迎!这家伙真让人省心省力。。

Demo:http://apps5.asiaappdeveloper.com/test/media_query/index_js.html

它给html加上的浏览器所支持属性的class名,任你潇洒地修改样式。

Chome:

4

IE8:

5

电脑图片加载:

6

手机图片加载:7

于是,即使是img,也不用display none block 啦!

 

之所以写这篇小文,是因为曾以为只要是写在css中的背景图片,无论是media query之外还是以内,全部都会被同时加载>.<  业界大牛请勿鄙视之。

 

Quote

响应式设计移动优先原则(mobile first)

起初,响应式设计以桌面版为重点,并自适应小屏幕尺寸,如缩小图片,隐藏不必要内容。而最近一种创新的移动优先的响应式设计方式开始悄然流行。

相比从大的、臃肿的桌面版开始设计并不断缩小、丢弃内容以适应小屏幕设备,从移动优先显得更有意义。移动优先有个很重要的优势,就是你可以将注意力集中在网页的核心内容,也就是内容优先,无需将精力分散在侧边栏那些不是必不可少的元素上。

“At first, responsive design was applied to existing desktop-centric websites to allow the layout to adapt to smaller screen sizes. But more recently it has been combined with another innovative approach called mobile first.

Rather then starting with the big, bloated desktop site and then scaling down for smaller devices, it makes more sense to start with the constraints of the small screen and then scale up for larger viewports. Using this approach, your layout grid, your large images and your media queries are applied on top of the pre-existing small-screen design. It’s taking progressive enhancement to the next level.

One of the great advantages of the mobile-first approach is that it forces you to really focus on the core content of your page. It might be more accurate to think of this as a content-first approach. You don’t have the luxury of sidebars or multiple columns to fill up with content that’s just nice to have rather than essential.”