- 博客(413)
- 资源 (11)
- 收藏
- 关注
RSS订阅转载 js复制当前url地址解决浏览器兼容
1.网上搜索的js复制链接代码，好像只能支持ie浏览器，其他浏览器不支持， 案例： var url=12; if(window.clipboardData){ window.clipboardData.setData("Text",url);
2014-07-08 16:08:02
4795
转载 判断IE版本并给出提示升级浏览器
判断IE版本并给出提示升级浏览器 http-equiv="Content-Type" content="text/html; charset=utf-8"> type="text/css"> #ie6-warning{ background:rgb(255,255,225) url("背景图片地址") no-repe
2014-06-24 08:54:23
2001
转载 css设置最小高度 然后自适应
看代码先：min-height:400px; //（解决ie8.9.ff.chrome）*+height:100%; //（解决ie7）_height:400px; //（解决ie6） ie6超出自动溢出代码都有注释，只为了大家能看的更清晰更明白，因为有写同学不太了解hack的处理方式。下面是无注释版，复制就能用的：min-height:400px;*+height:
2014-06-09 11:23:07
1042
转载 取消chrome浏览器下input和textarea的默认样式
最近一个细节引起了我的注意，chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框，而且textarea还可以任意拖动放大，这是不能容忍的，影响美观不说，有时候拖动textarea还会使页面布局错乱，所以决定重置这些样式。这是大前端调整的样式，样式统一就是好看，o(∩_∩)o 哈哈····看代码：取消chrome下input和textarea的聚焦
2014-06-09 11:11:19
921
转载 CSS常用浮出层的写法
浮出层是web页面中经常用到的功能，带有小小尖角的浮出层则更为生动，所以今天带给大家的是有角的浮出层，一起看看吧！点此查看实例展示是的，我们即将实现的就是以上功能，是不是很生动？贴上HTML： class="poptip"> class="poptip-arrow poptip-arrow-top">>◆>>◆>> class="poptip
2014-06-09 11:01:35
925
转载 jQuery实现返回顶部功能
整理两个实现功能，一个是右下角的返回顶部，一个是右侧的返回顶部，分别如图 第一种实现一、JSP或HTML(主体结构)在body中添加[html] view plaincopybody id="top"> p id="back-to-top">a href="#top">span
2014-05-14 16:46:54
589
转载 十大响应式Web设计框架
对于设计师而言，网站设计中的任意一环节都不容忽视。时下，借助网上的一些资源，只需简单的几个步骤你就可创建出更具吸引力的设计，包括菜单、背景、动画、眉头、body等设计。响应式Web设计不仅能够适用于任何屏幕尺寸，还为用户带来更完美的体验，本文将分享十款最佳的响应式Web设计，助你大大简化工作流程。Gumby FrameworkGumby 2是建立在Sas
2014-05-14 08:51:34
1790
转载 Web 前端开发者必知的9 个 CSS 属性
CSS可以改进网站的设计并且开拓网站设计更多的可能性，可以令你的网页更具吸引力。对于前端开发者、网站设计师来说，掌握并熟练应用CSS是一项必不可少的技能。下面列出了一些非常实用的css3属性和使用技巧，希望能够为你的开发、设计工作带来一些帮助。1. 圆角效果如今的Web设计在不断跟进最新的开发技术，纷纷采用html5来开发多样性的Web应用。html5的优势之一，就是之前必
2014-05-13 09:15:56
945
转载 有了placeholder.js，写文本框占位符太简单了
/*这是低端浏览器下placeholder的字体颜色*/placeholder{ color: #bfbfbf;}/*这是firefox下placeholder的字体颜色*/::-moz-placeholder { color: #bfbfbf;}/*这是webkit下placeholder的字体颜色*/::-webkit-input-placeho
2014-05-05 17:41:23
4867
转载 25款最佳响应式前端开发框架
1. Skeljs轻量，仅包含了一个JS文件（大小有18kb），可以处理任何类型的复杂布局，简化了响应式布局的构建。2. UI Kit基于Less开发，是一款轻量级、模块化的前端框架，可快速构建强大的web前端界面,且提供了全面的HTML、CSS及JS组件，使用简单、定制方便。3. GetWebplate一款优秀的前端框架，可使开发者
2014-04-28 17:52:35
1797
转载 CSS内联元素勿随意换行
CSS内联元素勿随意换行 在写HTML代码的时候，很多人喜欢用换行来使代码排列整齐。比如： 超链接 超链接 超链接 这样写确实会提高代码的阅读性，但是要注意：如果是内联元素，你用回车换行，会被浏览器认为这是一个空格。会产生一个空格的宽度。在某些时候，对于精确定位是有影响的。例如：
2014-04-03 16:02:22
2178
转载 Placeholder for IE （input框中有提示文字 输入正式文字时，提示文字消失）
无标题文档//placeholder IE8var _placeholderSupport = function() { var t = document.createElement("input"); t.type = "text"; return (typeof t.placeholder !== "undefined");}();wi
2014-03-26 17:42:02
4660
转载 浅谈网页细节设计——字符，层次，光影，留白
大家都知道”细节决定成败”这句名言不仅在其他行业非常重要，而在页面设计当中更是颠扑不破的真理。需求的眼睛和感觉总是非常敏锐的，对于一个页面没有得到需求方的认可，但是他们又说不出什么理由，这个时候就是细节问题了。一个页面的细节到位才能充分体现出页面的品质。一个优秀的作品与卓越的作品相比差距就在于细节的把控。那我们具体该如果做好细节呢？ 下面简单介绍一下。字符字
2014-03-26 16:50:49
1300
转载 IE7下的select框高度设定
一：问题提出这个是一个广为人知的bug了。在IE7下面无法设定select的高度：select {height:40px;}上面的设定能够在chrome跟firefox下面有效，如下图： 在IE7下面的效果就是IE浏览器默认的高度： 应该怎样去思考这个问题？我努力尝试网上各种各样的方法，有javascript模拟的，有css模拟的。
2014-03-26 15:37:08
3428
转载 js模拟滚动条
无标题文档/*主窗*/#Scroll{width:200px;height:400px;background:#f8f8f8}/*左边内容区*/#ScroLeft{float:left;height:100%;width:190px;overflow:hidden}/*滚动条背景*/#ScroRight{position:relative;float:right;hei
2014-03-21 16:22:04
705
转载 DD_belatedPNG解决IE6下PNG不透明问题
尽管大前端决定不再对IE6进行神马支持了，但这种需求还在，就整一个吧！一下是转载知更鸟的内容，实用就好。众所周知IE6不支持透明的PNG图片,而PNG图片在Web设计方面表现力上，具有其它图形格式所达不到的效果，IE6这一致命缺陷极大地限制了Web设计的创意发挥。虽然解决IE6的透明PNG的方法也很多,从使用IE特有的滤镜或是expression,再到javascript+透明 GIF替
2014-03-10 14:23:27
525
转载 交互设计之“返回原地”
在一个列表页上点击某个项，进入详情页，再从详情页返回列表页，应该是回到顶端还是回到原地？返回到列表时，列表不应刷新、页面不应回到顶端，应该是返回原地，回到刚才离开的那个位置。对于PC的网页，这个问题并不典型，因为，新链接是在原窗口打开还是在新窗口中打开，这都还没个定论，如果是在新窗口中打开，也就不存在返回列表页的情况了。现在移动设备上，尤其是手机这么小的屏幕上，无节制的打开新窗口肯定不
2014-03-10 10:45:17
2231
转载 移动版专题设计的那些事
响应式设计是否适合于专题设计tuntundeng：如今越来越多的移动设备出现在我们身边，作为设计师对网站专题的设计进入到一个新阶段，需要考虑更多的用户访问环境，输入设备，分辨率等不同因素。响应式网页是目前热门的解决方案，好比一双男生的休闲鞋，可以与所有裤子进行随意搭配。但是对于专题设计来说，响应式设计并不合适。阅读推荐：《app宣传专题设计》《PC走向移动的产品策略要点
2014-03-10 10:10:29
675
原创 70+优秀的前端工具
http://www.w3cplus.com/source/front-end-developer-excellent-tool.html里面有许多css3生成工具、按钮生成工具，非常值得一看。
2014-03-05 16:48:30
796
转载 CSS3的文字阴影—text-shadow
取值:：长度值，可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值，Y Offset是垂直偏移值：指定阴影颜色，也可以是rgba透明色：阴影的模糊值，不可以是负值，用来指定模糊效果的作用距离。如下图所示：说明：可以给一个对象应用一组或多组阴影效果，方式如前面的语法显示一样，用逗号隔开。text-shadow: X-Offse
2014-03-05 14:12:58
707
转载 css3 border-radius书写格式
CSS3 border-radius是什么？border-radius的含义是：圆角。CSS3 border-radius的书写格式：border-radius:apx，比较常见，其中a表示数值，下同；-webkit-border-top-left-radius:apx，类似这种的写法还是很实用的，但一定要记住顺序，一句话：先写Y轴，再写X轴。注意：上诉的-
2014-03-05 13:40:18
1014
转载 网页设计之网页首屏高度如何确定？
内容摘要：一个经验丰富的网页设计师在做网页原型设计或者视觉效果图时，首先必须要做的是标注清楚网站首屏的高度线，以便直观的看到网站首屏的高度，首屏可以显示的元素。那么，我们该如何来标注一个网页的首屏线那？一个经验丰富的网页设计师在做网页原型设计或者视觉效果图时，首先必须要做的是标注清楚网站首屏的高度线，以便直观的看到网站首屏的高度，首屏可以显示的元素。那么，我们该如何来标注一个网
2014-03-04 10:41:21
2277
原创 单独在ie6、7中样式的写法
*html .search_box .text_box {margin-top:1px;}/*仅IE6*/*+html .search_box .text_box {margin-top:0px;}/*仅IE7*/
2014-02-28 09:43:46
1089
1转载 IE6显示PNG图片(img & bg)，彻底解决了PNG透明问题
ie6下png透明是前端的障碍！很多时候都很让人头疼，网上什么解决ie6透明的办法非常多，但是没有一个真正解决的很好的，很多都是那种要么不能用，要么ie6下png透明过后图片变形，让人头疼的很！以下我在国外站点上找到的，忘记是哪个网站了，效果非常好，下面是代码：先说调用方法： EvPNG.fix('div, ul, img, li, input');
2014-01-29 08:44:59
2231
转载 定义文档兼容性，让IE按指定的版本解析我们的页面
作为开发人员，特别是作为Web的前端开发人员 ，最悲催的莫过于要不断的，不断的去调试各种浏览器的显示效果，而这其中最让人头痛的莫过于MS下的IE系列浏览器，在IE系列中的调试我们将会发现没有一个是好伺候的，于是不得不学习各种Hack技术来满足各种浏览器之间的兼容。在这种痛苦中不断的挣扎，MS可能也实在是看不下去了，于是在IE8开始，微软引入了文档兼容性，而这，终于可以让前端的开发人员稍微能够喘口气
2014-01-26 15:24:01
578
转载 20个2013年最值得关注的网页设计趋势
在过去的一年中，我们都看到了网页设计趋势在日益增长。或许有些朋友还记得我早些时候的一些文章关于网页设计，有兴趣的可以点击来查看，现在我们可以看到其中许多想法已经实现了，甚至有些采用了一些更高层次的新奇想法。在今天这篇文章中，我将与大家分享2013年里20多种网页设计的全新趋势走向。设计的影响仅仅是一个来自于我们的文化和用户界面感知的反馈。观念上这些趋势代表了在网页设计社区最受喜爱的点子。可
2013-12-18 13:52:50
606
转载 css3圆角写法
前缀例1例2：无边框书写顺序其它支持性值：半径的长度前缀-moz(例如 -moz-border-radius)用于Firefox-webkit(例如：-webkit-border-radius)用于Safari和Chrome。例1#round { padding:10px; width:300px; height:50px; bor
2013-12-18 11:05:33
713
转载 教你如何把彩色网页变黑白
4月20日四川雅安地震后，国内各大网站相继将彩色的网站都变成黑白，以此向地震中离世的同胞表示默哀。这里教大家一个简单的方法，让你的彩色网页变黑白的方法。这次我们将以一个现成的网站作为案例，来教大家如何在短时间内让网页变黑白。准备工具：Google浏览器准备网页：一个完整的网站首页，色彩缤纷。操作步骤：
2013-12-17 16:26:03
2193
转载 自适应网页设计/响应式Web设计
一、”自适应网页设计”的概念2010年，Ethan Marcotte提出了“自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。二、允许网页宽度自动调整“自适应网页设计”到底是怎么做
2013-11-13 13:09:42
902
转载 10 个方便的创建 CSS 特效的工具
3D阴影字体 http://www.3dcsstext.com/ 按钮 http://westciv.com/tools/radialgradients/index.html 移动过渡 http://matthewlein.com/ceaser/ 边框文本阴影 http://www.css3.me/ 字体 http://www.typeteste
2013-11-13 09:13:29
714
转载 全局样式和grid布局—Bootstrap中文使用指南（2）
源地址：http://www.36ria.com/5230全局样式1.要求html5文档类型Bootstrap使用的css属性和html元素依赖于html5的文档类型声明，请确保每个Bootstrap的页面包含下面的代码：!DOCTYPE html>html> ...html>2.排版和链接样式全局的排版和链接样式放在sca
2013-11-11 22:46:10
8318
转载 用3个步骤实现响应式网页设计
写在前面的话：随着移动设备的逐渐普及和Web技术的发展，跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢？我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开发和CSS3结合，来进行多种分辨率适配的例子。 文中提到的响应式网页设计（Responsive web design）是一种现代网页设计方法，基于CSS3的媒介查询（Media Qu
2013-11-11 22:39:35
1273
转载 响应式网页设计教程:展示响应式设计的基本原理
响应式网页设计，毫无疑问地变得越来越重要了。如果你还没听说过响应式设计，可以先看看我之前发的文章响应式网站。对新手来说, 响应式设计听起来可能会有点复杂, 但事实上，它比你想象的简单得多。为了让你能快速入门，我准备了一个简易的教程。通过这三个步骤，你一定可以了解响应式设计的基本原理和media query（在你有一些CSS基础的前提下）。第一步. Meta 标签 (查看 dem
2013-11-11 14:49:04
1716
转载 让每一个像素都清晰可辨
大家在设计界面和网页时，是不是经常碰到PS里绘制的图标虽然是矢量的，但还是会有许多虚边，在放大、缩小、旋转后虚边变的更严重了，或者是在AI里绘制的精美矢量图标粘到PS里就变虚了，我们辛苦设计的作品就这样变“糊了”，这是我们双眼所不允许的，我们要让每一个像素都清晰可辨。要解决这些问题就要理解PS像素组成的原理，了解一些设置选项和使用技巧，下面和大家一块分享。（PS=Photoshop, AI=Il
2013-10-16 16:28:21
825
原创 苹果iOS锁屏制作
下面我们开始。一、锁屏界面可以观察到，iphone的锁屏界面在时间和解锁部分有着透明强高光风格的背景，高光部分有非常明显的界限，边缘部分1像素的高光也是非常醒目的，整体感觉整个表面非常光滑，如同玻璃般的质感。透明的使用让整个界面不被硬生生的划分为三个部分，而是让桌面图片从后面透过来，扩大了视线的范围，让整个界面感觉更加透气。滑动按钮使用了灰色的渐变，但是依然延续了这种风格，你可
2013-10-15 08:42:42
1639
转载 纯css制作三角、圆形按钮，兼容ie6
原文网址：http://dtop.powereasy.net/Item/3418.aspx以前一直用图片做小三角、圆形按钮等，但有时候实在不太方便，例如换个颜色又要打开ps弄，挺麻烦的。而且对于追求细节和极致的前端工程师来说，能不用图片就不用图片，于是参考了天猫、微博等网站的做法，用纯html和css实现，效果还是不错的。以下是成果，兼容主流浏览器，包括ie6。
2013-10-14 14:13:57
3952
转载 如何高效地输出iOS和Android标注和切图
现在有很多产品为了降低设计成本并保持多平台体验的一致性，都以iOS为主做一套交互设计，应用于iOS和Android两个平台。但是在标注与切图的环节，如何高效的与开发对接，似乎并没有什么更高明的办法。很多团队的做法是先做一套iOS的UI+标注+切图，再在iOS的基础上缩放一套Android的UI+标注+切图。事实上这样的做法是低效，且无效的。为什么且如何做呢？ 首先本文大前提是，交互以iO
2013-10-14 10:37:40
10755
input框中出现提示文字（兼容ie 火狐 谷歌）
2014-04-09
点击图片弹出模态窗口
2013-11-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人