随笔分类 - HTML5/CSS3
摘要：Flexbox通常能让我们更好的操作他的子元素布局，例如：如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；可以快速让他们布局在一列；可以方便让他们对齐容器的左、右、中间等；无需修改结构就可以改变他们的显示顺序；如果元素容器设置百分比和视窗大小改变，不用提心未指定元素的...
阅读全文
摘要：一.首先介绍一下pxpx就是css中最基本的长度单位了，用px做单位基本上没什么问题，可以做到让页面按套路精确的展现！可但是！但可是！如果全篇用px布局会暗藏一个蛋疼的问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-），你会发现页面结构产生了不可预知的错乱，因此有砖家倡导使用...
阅读全文
摘要：你可以在很多地方看到三角形（小三角）：tooltips提示框、下拉菜单、甚至在loading载入动画里。不管你喜欢还是不喜欢，这些小元素对各UI元素之间的联系关系式很重要的。有一些不同的方法来设计并制作一个三角形，在本文中，我将介绍：点此查看实例展示编码 图片假如你已经有了三角形的图片，并且减少HT...
阅读全文
摘要：input:focus,select:focus,textarea:focus{outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}
阅读全文
摘要：前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类...
阅读全文
摘要：::selection { background:#d3d3d3; color:#555;}::-moz-selection { background:#d3d3d3; color:#555;}::-webkit-selection { background:#d3d3d3; color:#555;}.maroon::selection { background:maroon; color:#fff;}.maroon::-moz-selection { background:maroon; color:#fff;}.maro...
阅读全文
摘要：废话不多说，下面分别检测各个浏览器下的e.pageXe.layerXe.offsetXe.clientXe.x属性；测试浏览器：FF9/Chrome15/opera11.52/safari5(win)/IE6/7/8/9 图示：测试结果如下：chrome：e.pageX——相对整个页面的坐标e.layerX——相对当前坐标系的border左上角开始的坐标e.offsetX——相对当前坐标系的border左上角开始的坐标e.clientX——相对可视区域的坐标e.x——相对可视区域的坐标ff：e.pageX——相对整个页面的坐标e.layerX——相对当前坐标系...
阅读全文
摘要：http://rainleaves.com/demo/transition/transition.html
阅读全文
摘要：Raphael是一个用于在网页中绘制矢量图形的Javascript库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础，你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表，还可以绘制任意形状的图形，可以进行图表或图像的裁剪和旋转等复杂操作。您可能感兴趣的相关文章经典的白富美型 jQuery 图片轮播插件2012年最佳 Web 前端开发工具和框架让人爱不释手的13套精美网页图标素材10套精美的免费网站后台管理系统模板精心挑选的优秀 jQuery Ajax 分页插件 Raphaël是跨浏览器的矢量图形库，目前支持的浏览器包括
阅读全文
摘要：一、引子Firefox3.6包含了许多CSS的改进，本文将向您展示如果使用CSS渐变。如果你正在运行的Firefox 3.6的最新测试版，你应该看看我们的互动演示，并查看相应的代码。使用单选按钮来切换不同的样式选项。二、含CSS渐变的背景(backgrounds)背景使用CSS渐变显示可以不使用图像就实现两个或两个以上的指定颜色的平滑过渡。这反过来又减少了下载时间和带宽的使用，放大时也比较好看，可以让您创造出一个更灵活的布局。Firefox支持两种类型的CSS渐变：线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient)。三、线性渐变(Linea
阅读全文
摘要：http://fmbip.com/CSS3性质(CSS3 Properties)平台MACWIN浏览器CHROMEFIREFOXOPERASAFARICHROMEFIREFOXOPERASAFARIIE版本53.610.1443.631010.54678RGBAYYYYYYYYYYNNNHSLAYYYYYYYYYYNNNMultiple BackgroundsYYNYYYNNYYNNNBorder ImageYYNYYYNNYYNNNBorder RadiusYYNYYYYNYYNNNBox ShadowYYNYYYNNYYNNNOpacityYYYYYYYYYYNNNCSS Animatio
阅读全文
摘要：一、前面的感慨以前也陆陆续续试过CSS3的一些特性，文字投影，多边框等。但都是试试而已，知道有这么回事。今天，见到了一个新玩意，transition，认认真真的试了一下，经过，我懵了，我呆了，我傻了，半天说不出话来，这…这…unbelievable，amazing，太神奇了，太不可思议了，几行简单的CSS，如此炫酷的动画效果，flash都不及的动画效果，我真是难以表达我的心情。我们可以先看一段下面我录制的视频（Safari4浏览器，时长11秒），看看使用transition实现的效果。下面由浅入深，使用纯CSS，一步一步实现图片墙动画效果。这里，必须要先说明一下：对于对于此transition
阅读全文