box阴影生成图片

box阴影生成图片
box阴影生成图片 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>box阴影生成图片</title>     <style>         .box{             width: 1px;             height: 1px;             border: 1px solid red;             margin: 100px;             box-shadow: 0px 0px 1px rgba(255,255,0,1), 0px 1px 1px rgba(0,25...

解决国内gem不能用的问题

解决国内gem不能用的问题
最近在安装SASS的时候,用到gem命令,但是运行出行如下错误! C:\Users\len>gem install sass ERROR: While executing gem ... (Gem::RemoteFetcher::FetchError) Errno::ETIMEDOUT: A connection attempt failed because the connected party di d not properly respond after a period of time, or established connection failed because connected host has failed to respond. - connect...

ruby环境sass编译中文出现Syntax error: Invalid GBK character错误解决方法

ruby环境sass编译中文出现Syntax error: Invalid GBK character错误解决方法
sass文件编译时候使用ruby环境,无论是界面化的koala工具还是命令行模式的都无法通过,真是令人烦恼。 容易出现中文注释时候无法编译通过,或者出现乱码,找了几天的解决方法终于解决了。 这个问题的奇葩之处在于在xp环境中没有任何问题,只是在windows7环境中才出现的这个。 sass编译时候出现如下错误的解决方法: Syntax error: Invalid GBK character "\xE5" on line 8 of E:\work\sass\sass...

Cookie, LocalStorage 与 SessionStorage

Cookie, LocalStorage 与 SessionStorage
1. cookie由服务端生成,用于标识用户身份;而两个storage用于浏览器端缓存数据 2. 三者都是键值对的集合 3. 一般情况下浏览器端不会修改cookie,但会频繁操作两个storage 4. 如果保存了cookie的话,http请求中一定会带上;而两个storage可以由脚本选择性的提交 5. 会话的storage会在会话结束后销毁;而local的那个会永久保存直到覆盖。cookie会在过期时间之后销毁。 6. 安全性方面,cookie中最好不要放置...

css3 -webkit-animation-fill-mode属性值为both

css3 -webkit-animation-fill-mode属性值为both
大家都知道 -webkit-animation-fill-mode 属性是检索或设置对象动画时间之外的状态,但是一直以来我对它的属性值都存在一个疑问,both和forwards的使用到底有什么区别呢?经过不停的测试、搜索,个人认为差别在于: both是设置对象状态为动画结束或开始的状态,主要是取决于-webkit-animation-direction这个属性,为什么这么说呢?请看以下: HTMl: <div class="center"></div> CSS: .ce...

中文版Chrome浏览器不支持12px以下字体的解决方案

中文版Chrome浏览器不支持12px以下字体的解决方案
Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px,英文版则没有限制,主要是因为chrome认为汉字小于12px就会增加识别难度,尤其是中文常用的宋体和微软雅黑。而我们在实际项目中,对于数字/英文内容,其他字体的文本可能会有特殊的需求要求它们以更小的字号来显示,这个时候就需要取消浏览器的自动调整功能了。 一般解决方案是禁止webkit浏览器配置调整网页的字体大小。如下CSS定义方式: ...

margin-top百分比问题

margin-top百分比问题
一个很简单的小细节,不过平时没怎么注意到,还被小坑了一下。在设置margin的时候:margin: 10% 10% 没有出现预想的效果。 其实margin-top和margin-bottom的百分比,一般是按容器元素的宽度而不是高度来计算的,padding同理。 比如下面这个例子: 不过也并不是绝对的,当设置了writing-mode为纵向书写时,比如-webkit-writing-mode: vertical-lr;此时按百分比书写的margin就会参照容器的高度来计算了。

文字两侧横线

文字两侧横线
<!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>     <style>         .dc_loginTip{overflow: hidden;font-size: 10px;color: #000;text-align:center;margin:14% 6.6% 4.6%;position: relative;}       ...

2016九大前端必备动画库

2016九大前端必备动画库
进入2016年,随着各种类型网络技术的快速发展,动画库能为我们的网页设计增添很多视觉趣味。作为前/后端的开发人员来说,熟悉及掌握好各种动画库(甚至抽取搭建成自己优化的动画库)代码,便能轻松省时省力地完成各种工作需求。即使客户或用户的UI设计需求越来越多,再加上设计大神们提交的动画动效DEMO,本文推荐的这些动画库基本都能在浏览器里面实现出来咯。希望对各位开发童鞋来说能有所帮助。 1. Anim...

任务十二:学习CSS 3的新特性

任务十二:学习CSS 3的新特性
面向人群: 初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践。 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的。因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估...
Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录