随笔分类 - CSS样式
摘要：byzhangxinxufromhttp://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=1494一、一笔带过的前言CSS中凡是牵扯到数值的基本上都与单位相关联，例如：.test{width:180px;}平时我们再制作...
阅读全文
摘要：/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles...
阅读全文
摘要：前言估计大家在日常工作中都会用到css形状，但是目前天朝中使用到最多的估计就是圆（circle）、椭圆（ellipse）、各种三角形形状，但是你肯定很少看见过用几何图形或者多边图形。假如你不懂什么叫做几何图形，那么请前往百度百科，就算是我们用:after :before这些伪元素来构造我们所需要的形...
阅读全文
摘要：前言趁着还没有元旦之前先码一篇文章，不然到时候估计又被各种虐了，所以趁现在还有力气先来一篇。今天来聊聊css3中的动画属性animation，对这个属性懵懂是在很早的时候有前辈用这个animation属性来写了一个菊花打转的loading，然后google了一下知道了有这么一个css动画组件叫做an...
阅读全文
摘要：前言为什么会有这篇文章，外部引入样式有什么好谈的，不外乎就是 就这么简单，还有什么，so easy，我之前都是这么认为的你肯定比我聪明多了~_^，但是当做一个页面在微信上浏览并且修改再浏览的时候我发现不对劲，因为已经上传的样式表木有改变，IOS还好，可以强制刷新页面。但是安卓端这块一直在用微信的...
阅读全文
摘要：排版者应像手艺人一样遵循一条原则：做好自己的工作并隐于无形.关于网页上百分之九十五的信息是「文字」，大多数人浏览网页的状态就是阅读，也就是你目前正在做的事情. 因此作为一名前端工程师，让文字更好地在网页显示，是一件极其重要的工作.字体排印有两种形式，一种称为 Creative Typography，...
阅读全文
摘要：注：本文出自腾讯AlloyTeam的元彦，文章也可以在github上浏览。请尊重版权，转载请注明来源，多谢～～高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额...
阅读全文
摘要：by zhangxinxufromhttp://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=4720一、效果Demo先行~视差滚动效果大家可能都听过，基本上都是JS实现的，有对应插件 –Parallax.js.实际上，如...
阅读全文
摘要：演示地址：http://www.dowebok.com/demo/139/下载地址：http://www.400gb.com/file/74656766CSS3 新增的 background-size 是一个很有用的属性，用于定义背景图片的尺寸，有了这个属性，你就可以任意指定背景图片的大小。其中最常...
阅读全文
摘要：如今的屏幕分辨率，小至320px(iPhone)，大到2560px甚至更高(大显示器)，变化范围极大。除了使用传统的台式机，用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下，固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性，其布局结构要做到根据不同的设备及屏...
阅读全文
摘要：浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。 拿字体来说，各个浏览器默认的字体种类、字体大小和字体行...
阅读全文
摘要：如果要想在IE浏览器中实现圆角的效果，我们一般都会采用圆角图片的方式。用图片的话，基本就跟浏览器没有多大关系了，因为任何浏览器都支持这种方式。 本文我们主要是讲解如果用CSS 3样式表来实现圆角效果，值得注意的是，IE6/7/8这三个IE浏览器版本都不支持CSS 3的解析，只有还不太主流的IE 9...
阅读全文
摘要：FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的=============================================================================此效果简单，。。。。相当不错推荐style="FILTE...
阅读全文
摘要：body{cursor:url('鼠标指针图片网址')}a:hover{cursor:url('鼠标指针图片网址')}说明1：第一行是鼠标指针初始形态，第二行是鼠标指针碰到链接的形态。说明2：你需要两个鼠标指针图片（最好这两个图片是一套或是相近的）。说明3：鼠标指针的图片格式是.cur和.ani，不...
阅读全文
摘要：E兼容CSS3圆角border-radius，box-shadow，text-shadow的方法1.下载ie-css3.htc2.CSSbox { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safa...
阅读全文
摘要：关键字: text-overflow:ellipsis语法：text-overflow : clip | ellipsis取值：clip ：默认值 。不显示省略标记(...)，而是简单的裁切.ellipsis： 当对象内文本溢出时显示省略标记(...).可惜text-overflow 还只是ie的私...
阅读全文
摘要：除IE外都可识别 所有的IE可识别 仅IE6可识别 IE6以及IE6以下版本可识别 IE6以及IE6以上版本可识别 仅IE7可识别 IE7以及IE7以下版本可识别 IE7以及IE7以上版本可识别 仅IE8可识别 仅IE9可识别 项目 范例 说明 ! ...
阅读全文
摘要：大家都知道IE6之支持标签的:hover为了，但是通常在做实际效果的时候标签 :hover在IE6下会失效，看代码：[code="html"]http://www.w3.org/1999/xhtml”>鼠标经过时改变我的颜色[/code]在IE6下“颜色”根本就不会变成红色，其他浏览器都是好的，要解...
阅读全文
摘要：继承性： 无 兼容性： IE 基本语法 zoom : normal | number 语法取值 normal : 默认值。使用对象的实际尺寸 number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值 使用说明 设置或检索对象的缩放比例。...
阅读全文
浙公网安备 33010602011771号