CSS/CSS3 - 随笔分类 - kingwell

摘要：CSS3动画进度条CSS CODE:@-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-position: 30px ... 阅读全文

posted @ 2014-08-25 18:27 kingwell 阅读(1035) 评论(1) 推荐(1) 编辑

摘要：我们知道，HTML5新增了许多表单类型，如： number，email，url，tel，datetime，month，datetime-local等等，像datetime,month这些非常方便，免得自己去写选择日期，时间插件；但是像number，tel，email，这些在桌面端变化不是特别大，外观... 阅读全文

posted @ 2014-08-13 09:52 kingwell 阅读(5691) 评论(0) 推荐(0) 编辑

Normalize.css

摘要：根据之前的一些项目，总结了一下重置CSS： 1 @charset "UTF-8"; 2 3 html { 4 background: #FFF; 5 font-size: 62.5%; 6 -ms-text-size-adjust: 100%; 7 -... 阅读全文

posted @ 2014-07-07 15:19 kingwell 阅读(1135) 评论(0) 推荐(0) 编辑

Sass for循环中编译%时报错解决方案

摘要：sass功能强大，特别是支持for循环，节省大量开发时间，但是在开发时遇到一个问题，直接使用%时没有问题，当有变量时再加% 单位在编译时报错；这样没有问题：@for $width from 0 to 10{ .wp#{$width}{ width:$width px; }}... 阅读全文

posted @ 2014-07-07 14:36 kingwell 阅读(1034) 评论(0) 推荐(1) 编辑

谈谈CSS预处理技术中for循环的应用-CSS Sprite

摘要：各种新技术的出现，推动着Web前端技术飞速发展，在提升用户体验的同时也方便开发者；在前端优化时，我们使用CSSSprite技术，把多个图片合在一张图片上，然后通过background-image，background-position来定位现实不同效果，这样来达到减少HTTP请求，毕竟HTTP请求是... 阅读全文

posted @ 2014-06-04 10:58 kingwell 阅读(3519) 评论(0) 推荐(1) 编辑

使用Sass预定义一些常用的样式，非常方便

摘要：CSS预处理技术现在已经非常成熟，比较流行的有Less，Sass，Stylus，在开发过程中提升我们的工作效率，缩短开发时间，方便管理和维护代码，可以根据自己的喜好选择一款自己喜欢的工具开发，使用很接近，差别很小，语法类似。再选择一款编译工具koala，国产工具，koala是一个前端预处理器语言图形... 阅读全文

posted @ 2014-06-04 10:23 kingwell 阅读(11567) 评论(0) 推荐(1) 编辑

去除IE10+上文本框巨丑无比的删除图标以及显示密码图标

摘要：去除IE10+上文本框巨丑无比的删除图标以及显示密码图标IE浏览器总是让人喜欢让人厌，在最新的IE浏览器（IE10+）上使用表单时，文本框内后面会出现很巨丑无比的“删除图标”以及“显示密码图标”，如果你讨厌这个可以把它去掉，这两个是由IE私有属性控制：input::-ms-clear,input::... 阅读全文

posted @ 2014-05-04 15:32 kingwell 阅读(564) 评论(0) 推荐(0) 编辑

解决Chrome下表单自动填充后背景色为黄色

摘要：Chrome浏览器在表单自动填充后会显示黄色背景，这是Chrome的私有属性导致，对于有洁癖的人来讲，是不喜欢的，我们可以手动去掉。代码如下：input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}如果在私有属性后面改变背景颜色或图片好像没有效果。目前测试只有设置-webkit-box-shadow才有效果。阅读全文

posted @ 2014-03-12 18:34 kingwell 阅读(2308) 评论(0) 推荐(0) 编辑

Sublime text 2/3 SVN插件及使用方法

摘要：Sublime Text是前端利器，作为前端的盆友们已经再熟悉不过了，在项目中经常使用SVN，每次都要切换提交，很麻烦，有了这个SVN插件就很方便了，使用快捷方式提交，更新。Sublime Text2/3 SVN插件点击下载使用快捷方式：[alt+c] : commit current file.[alt+u] : update current file.[alt+r] : revert current file. 阅读全文

posted @ 2014-02-20 14:25 kingwell 阅读(12938) 评论(6) 推荐(0) 编辑

CSS实现箭头效果

摘要：有时候网页中使用箭头以增强效果，一般的做法是使用图片，今天我们使用CSSCSS来实现“箭头效果”，使用CSS我们必须兼容所有浏览器（IE6、7、8、9、10、+），Chrome，Firefox，Opear... 1 2 3 4 5 6 7 8 9 Document10 23 26 27 28 29 30 31 32 33 34 35 36 .arrow{ border-width:50px; border-color:red g... 阅读全文

posted @ 2013-09-23 15:20 kingwell 阅读(9417) 评论(2) 推荐(1) 编辑

IE6透明PNG解决方案

摘要：IE6不支持PNG-24图片一直困扰很多人，但是可以通过IE的独有的滤镜来解决，解决的方案很多，比如：将滤镜写在CSS里，还可以写成单独的 Javascript文件，本来认为推荐两种做法：第一种，将所有PNG图片添加滤镜（此方法有副作用）；第二种：有选择性的添加滤镜（推荐）；两者都可以将代码放在单独的JS文件里，然后引用。第一种：直接添加如下代码：JSCode 1 function correctPNG() { 2 for (var i = 0; i ";20 img.outerHTML = strNewHTML;21 i = i - ... 阅读全文

posted @ 2013-09-23 14:38 kingwell 阅读(384) 评论(0) 推荐(1) 编辑

各浏览器的Hack写法【转】

摘要：Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。然后将Hack放在浏览器特定的CSS文件中，让其符合条件的浏览器解析这些代码，就如前面所说的条件样式，我们将CSS Hack代码放入条件样式文件中，符合条件的浏览器就解析，不符合的将不解析，从面达到您所需要的页面渲染效果。总的一句话来说使用CSS Hack将会使用你的CSS代码部分失去作用，然后借助条件样式，使用其原CSS代码在一些浏览器解析，而CSS Hack代码在符合条件要求的浏览器中替代原CSS那部分代码阅读全文

posted @ 2013-07-23 11:11 kingwell 阅读(446) 评论(0) 推荐(1) 编辑

页面加载中的图片性能优化【转】

摘要：我的大部分性能优化工作都集中在JavaScript和CSS上，从早期的Move Scripts to the Bottom和Put Stylesheets at the Top规则。为了强调这些规则的重要性，我甚至说过，“JS和CSS是页面上最重要的部分”。几个月后，我意识到这是错误的。图片才是页面上最重要的部分。我关注JS和CSS的重点也是如何能够更快地下载图片。图片是用户可以直观看到的。他们并不会关注JS和CSS。确实，JS和CSS会影响图片内容的展示，尤其是会影响图片的展示方式（比如图片轮播，CSS背景图和媒体查询）。但是我认为JS和CSS只是展示图片的方式。在页面加载的过程中，应当先阅读全文

posted @ 2013-07-10 11:12 kingwell 阅读(3090) 评论(0) 推荐(0) 编辑

前端开发工程师如何在2013年里提升自己【转】

摘要：大部分人非常在意个人在技术上的提升。但是保持对新技术的了解是一项不小的挑战，毕竟我们需要的信息在数量上过于庞大。2012年里，伴随着前端发展的是大量的革命性突破和对前端的重新定义。我们在实践的路上飞速前进，具体的进步体现在使用抽象化，优秀的代码质量，维护性上的提升以及更好的性能。如果你实在忙到没有时间来跟上最新的技术，不用担心。随着假日的来临，我们就有了一些空闲的时间可以自己支配，我想，如果我把我收集的前端相关的精品讨论列表分享出来，那一定会对大家有一些帮助。你不需要把所有的都阅读一遍，但是这些相关的建议会让你了解更多相关的知识，为明年成为一名更好的前工程端开发师做准备。基础部分走在技术前沿阅读全文

posted @ 2013-07-10 10:31 kingwell 阅读(458) 评论(0) 推荐(1) 编辑

IE浏览器Bug总结

摘要：每每在网上搜索IE浏览器Bug时，总是骂声一片，特别是前端工程师，每天都要面对，IE浏览器特别是IE6，存在很多Bug，对Web标准的支持也拖后腿，但不可否认，IE浏览器是曾经的霸主，它的贡献也是巨大的，我们要以一种发展的眼光去看等，技术是不段地发展，面对陈旧浏览器出现的问题，我们，特别是前端工程师，要心平气和地面对，其它只要你了解它的特性，解决它也是如鱼得水，下面在网上找了一些IE常见Bug，比较全，与大家分享一下：“Internet Explorer——前端攻城师的的恶梦，十个有九个前端人员都认为他为祸人间不浅，本应早点灭掉他，可是上天有好生之德，因而没有灭之，在此情况下，前端的攻程师们将阅读全文

posted @ 2013-07-09 12:20 kingwell 阅读(3318) 评论(1) 推荐(1) 编辑

Kingwell Dialog V1.5 kingwell对话框源码及文档说明

摘要：自定义弹出：支持键盘操作支持多窗口弹出兼容各浏览器支持Iframe及Iframe遮盖层支持自动关闭自定义按钮经过多个项目，目前已经比较完善有文档说明使用方法以：new Dialog({ title : 'Hello World', width : 500, height : 100, type : 0, html : 'Hello Kingwell Dialog', callback : function(){ alert('我要关闭了'); }});/*参数说明：参数均为JSON格式title窗口标题文件可选width窗口宽度可选h... 阅读全文

posted @ 2013-06-06 17:16 kingwell 阅读(982) 评论(4) 推荐(1) 编辑

kingwell Calendar V1.0 日历时间组件

摘要：项目中经常要使用日历时间插件，网上也有很多很优秀的插件，但是我还是喜欢使用自己写的东西，第一比较符合自己项目需要，第二，维护，修改比较内容，第三，代码也比较少，第四，兼容各主流浏览器(IE6,7,8,9,10,FF,Chrome,Opera等)。最近写了个日历与时间选择插件，支持中英文代码下载：日历时间插件下载Kingwell CalendarKingwell Calendar V1.1 测试页面选择日期：选择时间：//日期选择-使用方法new Calendar('test1', { top : 5, language : 'cn', addClass : 阅读全文

posted @ 2013-06-06 16:59 kingwell 阅读(464) 评论(0) 推荐(0) 编辑

用HTML5本地数据库制作联系人

摘要：<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>用HTML5本地数据库制作联系人</title><style type="text/css">/* -----CSS Docuemnt----- Version: 1.0 Author: kingwell Email: jinhua.leng#gmail.com Date: 2012-5-16 Global Styl 阅读全文

posted @ 2013-03-20 15:16 kingwell 阅读(3970) 评论(1) 推荐(1) 编辑

彻底解决IE6下PNG半透明的问题

摘要：IE6曾是PC上的霸主，它的影响相当大，虽然现在IE10都出来了，但是IE6在市场仍然有一定的份额，但是IE6存在很多问题，最明显的莫过于以PNG-24的支持，这是一个很头痛的问题，如果要用一张PNG格式的图片在IE6下会出现灰色的背景，很是无语，不过现在不用烦恼了，下面这些代码帮你彻底解决问题，让你从此又爱上 ...^_^下载代码 Kingwell 阅读全文

posted @ 2012-10-24 13:37 kingwell 阅读(386) 评论(0) 推荐(0) 编辑

IE独有的 IF 判断

摘要：除IE外都可识别<!--[if lt IE 6]>IE6以及IE6以下版本<![e 阅读全文

posted @ 2012-10-24 13:29 kingwell 阅读(320) 评论(0) 推荐(0) 编辑

Kingwell Leng

专注Web前端，关注Web前端技术前沿，关注用户体验！

随笔分类 - CSS/CSS3

公告