随笔分类 - css相关
css相关知识
摘要：前两天遇到一个前端性能相关的bug，感觉还挺典型的，整理了一下解决过程和思路，写下来分享给大家。 场景是这样的，有一个答题的界面，可以播放音频、填空、提交答案，界面是长这个样子的： 看起来还挺简单吧，但是我们在手机上跑的时候，却遇到了以下问题： 1. 填完空后，提交按钮会由灰色变为蓝色（可提交状态）
阅读全文
摘要：现在移动端页面用rem布局已经是一大流派了，成熟的框架如淘宝的flexiable.js，以及我的好友@墨尘写的更轻量级的hotcss。用rem作单位使得元素能够自适应后，还有一块需要关注的，那就是背景图片。本文就来聊聊这方面的东西。 rem布局 所谓rem布局就是指为文档的根节点<html>元素设置
阅读全文
摘要：1 大家都知道js在进行小数运算时会有丢失精度问题（其他语言也是），比如： 有一种比较快捷的方式是先把小数乘以10的整数倍，然后再运算，如： 但是这种方式也不是100%准确的，乘以整百也可能精度丢失，比如： 所以常用的几种处理方式有： 2 <a>标签的download属性可以用来设置用户下载后的文件
阅读全文
摘要：博客园的模板是没有兼容手机端显示的，阅读体验比较差。本文教你如何简单几步让你的博客支持手机端显示。找一个夜深人静，没有人浏览你博客的时间点，开始吧。 1.添加js代码 在博客园后台的“设置”菜单下，有一项页首Html代码，此处写js代码也是可以生效的，将如下代码复制过去： <script> var
阅读全文
摘要：浏览妙味官网，发现了不少绚丽的特性，尤其右侧那个菜单，简直太美了，忍不住扒下来，留着研究~有意的同学可以去妙味官网查看：http://www.miaov.com/ 菜单效果如下： 你也可以点此查看完整代码。 ·声明，只是扒来分享、研究，如果妙味的同学看到此文不愿特效被他人拿走，可与我联系，...
阅读全文
摘要：伴随着今年10月底HTML5标准版的发布，未来使用H5的场景会越来越多，这是令web开发者欢欣鼓舞的事情。然而有一个现实我们不得不看清，那就是IE系列浏览器还占有一大部分市场份额，以IE8、9为主，windows8.1的用户已经用上了IE10/11，而考虑我国的国情，IE6、7依然存留不少。在我...
阅读全文
摘要：今天学到了一个新的CSS3属性，更准确的说是属性值，那就是background-clip:text。利用此属性值可以制作出很神奇的效果。可惜只有chrome支持，不过今天可以先来玩玩这个属性。 先来介绍下background-clip吧，它的作用是对背景图片进行裁剪，取值有content-...
阅读全文
摘要：前些日子看到了一则新闻，flappybird原作者将携新游戏SwingCopters来袭，准备再靠这款姊妹篇游戏引爆大众眼球。就是下面这个小游戏： 前者的传奇故事大家都有耳闻，至于这第二个游戏能否更加火爆那是后话了。不过我看了作者的宣传视频后，蠢蠢欲动，这么简单的小游戏我山寨一个网页版出...
阅读全文
摘要：★jQuery1.7.2下操作object元素报错jQuery1.7.2下，用$选择器操作object元素会报错：代码如下：$('object').hide();换用原生js就没事了：document.getElementsByTagName('object')[0].style.display =...
阅读全文
摘要：从接触CSS布局开始，就一直在听盒模型的概念了，网上的文章有很多，深浅不一。有些人会认为盒模型很简单，不就是border、margin、padding、content嘛，一个元素所占的空间就是把它们都加起来~仅仅如此吗？当然不是，盒模型的概念其实挺好理解，但难的是与其他属性一块使用时产生的现象。下面把我知道的一些特性梳理一下，这也是css中最基础的知识，面试常会问的东西。盒模型的基本概念 正如上面说的，盒子模型的几个要素就是border、margin、padding、content，相信你已经听过很多次了，就像下面这张百看不厌的图一样： 不过要明确的是，这里所说的盒子是指块级(bloc...
阅读全文
摘要：收集css中的基础知识，所以这并不是什么新鲜的技术，只是作为备忘~本文的内容如题所示，是一个简单的布局，用于左右两栏布局的页面，左侧是固定宽度，右侧占据剩余的宽度。在垂直方向，始终以高度最大的一栏为基准，例如，随着右侧面板中动态添加内容高度增加，左侧也跟着增加，这样不会产生的难看的像这样的情况： 实现该布局的代码如下： sdfdf sdfdf sdfdf sdfdf 效果如下：add left width add left ...
阅读全文
摘要：很早以前，“焦点图”这个名称就出现在了网页制作中，能够完成绚丽的图片切换效果。有很多由flash和jquery制作的焦点图，其特点就是一个比一个炫。其中有一种特效就是有镜头左右摇摆或是拉远拉近的视觉效果，如果你印象不深了，可以点击这里体验一下。随着CSS3的发布，我们可以利用它的变形、渐变、动画属性来代替jquery的动画函数，用更少的代码来实现这种有“镜头感的”效果。本文就将探索一下如何利用CSS3来制作一个有镜头感的网页。 从最终效果来想想原理，在页面上依次出现的这些内容，其实一开始页面加载的时候就已经都在页面上了，只不过大部分内容都在浏览器窗口“之外”，我们看不到，等到需要显示它的...
阅读全文
摘要：虽然说使用css hack来解决页面兼容性bug并不是个好办法，但是有时候这些hack还是用的着的，比如你接受了一个二手或是三手的遗留界面，杂乱无章的css代码，只在某个浏览器下有兼容bug，而且需要短时间内处理。 下面一段代码可以让你很快利用css来为特定的浏览器指定样式。不多赘述，看码即懂：属性过滤：_height:10px; /* IE6支持 */*height:10px; /* IE6、IE7支持 */height:10px\0/; /* IE8支持 */选择器过滤：/*针对IE6*/* html #nav{ margin:12px; }/*针对IE7*/*+html #na...
阅读全文
