HTML&CSS - 随笔分类 - Joanna Qian

动态加载脚本和样式（转）

摘要：一．元素位置这次补充一个 DOM 的方法：getBoundingClientRect()。这个方法返回一个矩形对象，包含四个属性：left、top、right和 bottom。分别表示元素各边与页面上边和左边的距离。var box = document.getElementById('box');/... 阅读全文

posted @ 2015-02-12 09:29 Joanna Qian 阅读(498) 评论(0) 推荐(0)

无障碍网页设计（WCAG2.0）

摘要：无障碍化是指无论健全人还是残疾人，年轻人还是老年人都可以平等地获取互联网上的信息和服务。无障碍化网站建设不单可以增加网站的受益群体，更是一个有情怀、有担当的互联网企业的责任，也是一个互联网从业人员应该关注到的一个方面。无障碍化受益人群：普通人普通网站用户；文化背景和习惯与主流用户不同的用户；老年人或... 阅读全文

posted @ 2014-11-07 23:20 Joanna Qian 阅读(6068) 评论(0) 推荐(1)

HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画

摘要：SVG支持动画。可以通过以下几种方法获得动画效果：使用SVG动画元素。SVG可以描述随时间变化的图形对象，使用不同的动画元素可以定义运动路径，淡入淡出效果和对象的膨胀、收缩、旋转和变换颜色。使用SVG DOM。SVG DOM兼容DOM1和DOM2，而SVG又定义了一套附加的DOM接口，支持脚本动画。... 阅读全文

posted @ 2014-09-23 23:58 Joanna Qian 阅读(660) 评论(0) 推荐(0)

SASS学习笔记2 —— 语法

摘要：sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种是scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方... 阅读全文

posted @ 2014-09-23 03:33 Joanna Qian 阅读(510) 评论(0) 推荐(0)

支持新版chrome，用webstorm编译形成css和sourcemap，调试sass和less源文件（转）

摘要：旧版的chrome有个support for sass，但是新版chrome没有这个功能了。看到网上提供的方法比较多，也很乱，旧版新版的都有。而且不能指定自己所需要的路径。所以就做了下改版。sass和less都有提供一个map文件，这个文件是用来干嘛的呢？.map文件是一个json格式的文件，可以直... 阅读全文

posted @ 2014-09-23 00:18 Joanna Qian 阅读(1072) 评论(0) 推荐(0)

SASS学习笔记1 —— 安装、编译和调试

摘要：一、什么是SASSSASS是一种"CSS预处理器"（css preprocessor）的开发工具，为CSS加入编程元素，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。二、安装和使用2.1 安装SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使... 阅读全文

posted @ 2014-09-23 00:04 Joanna Qian 阅读(1011) 评论(0) 推荐(0)

BootStrap 最佳资源合集(转)

摘要：witter BootStrap是一款优秀的前端的框架，称得上是前端的一个框架利器。Web前端开发者每天都在与HTML、CSS、JavaScript打交道，然而不少人都是在周而复始的写模板、样式和交互效果，前没有想过如何将这些重复的工作整合在一起。Twitter推出的BootStrap能够帮助We... 阅读全文

posted @ 2014-04-26 04:49 Joanna Qian 阅读(889) 评论(0) 推荐(0)

CSS垂直居中对齐

摘要：用CSS有多种方法实现垂直居中对齐。如果已知外部div的高度，不管是否知道内部div的高度，垂直居中实现起来很简单，但如果内部div高度是变量，如文字，垂直居中实现起来就比较复杂了，很可能需要使用hacks。如： This sentence will change in each example 1、已知高度情况很简单，直接计算就可以了#containingBlock {display: block; height: 200px;}#containingBlock div {height:50px; margin: 75px 0;}2、通过display: table属性布局通过使用... 阅读全文

posted @ 2014-03-15 00:21 Joanna Qian 阅读(487) 评论(0) 推荐(0)

Metro UI（Win 8风格）页面设计小记

摘要：一、Metro风格菜单——简单HTML Tile 1 Tile 2 Tile 3 Tile 4 Tile 5 ... 阅读全文

posted @ 2014-03-05 04:55 Joanna Qian 阅读(1410) 评论(0) 推荐(1)

JQuery时间轴timeline插件的学习-Lateral On-Scroll Sliding with jQuery+technotarek / timeliner

摘要：一、Lateral On-Scroll Sliding with jQuery的使用View demo Download source1. HTML结构 November 2011 Some title November 28, 2011 Some Title ... 阅读全文

posted @ 2014-02-19 03:34 Joanna Qian 阅读(998) 评论(0) 推荐(0)

jQuery制作瀑布流(转)

摘要：“瀑布流布局”随着pinterest网的流行而出名，现在国内使用这种风格布局的网站也越来越多，比如说Mark之，蘑菇街，点点网，哇哦等等。我第一次听到这个布局名称是来自于“乔花写的《瀑布流布局浅析一文”，之后在群里也时不时有同学会问有关于这种布局的使用方法。今天我老话重谈，主要向大家介绍一些相关的制作插件，以及成功的案例，希望能给大家今后的工作有所帮助。制作瀑布流布局的优秀插件首先简单的向大家推荐几款制作瀑布流的jQuery插件，这些插件能帮助大家轻松的实现类似于pinterest的布局效果：1.MasonryMasonry是一个动态的网格布局插件。每个元素水平方向都采用全float布局，但在阅读全文

posted @ 2014-02-10 23:22 Joanna Qian 阅读(1018) 评论(0) 推荐(0)

常用CSS缩写语法总结(转)

摘要：使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;盒尺寸通常有下面四种书写方法:property:value1; 表示所有边都是一个值value1；property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 阅读全文

posted @ 2013-11-26 23:40 Joanna Qian 阅读(352) 评论(0) 推荐(0)

多种方法实现div两列等高（收集整理）

摘要：HTML骨架头部主内容区域侧边栏页脚1.背景模拟（使用背景图片实现等高）：背景模拟主要依靠一张图片，然后将其平铺，使页面在视觉上，产生等高效果，如图背景模拟实现很简单，直接利用了background-repeat属性,使背景图片以Y轴方向重复。图片： css： background-repeat:repeat-y;关于背景图片，这个需更具你的实际项目需求，值得注意的是背景图片切图时必须以两列的形式，否这达不到等高效果。*{ margin:0; padding:0;}#header,#footer{ width:960px;/*设置头部，页脚宽度*/ height:30px;... 阅读全文

posted @ 2013-11-15 02:00 Joanna Qian 阅读(2461) 评论(0) 推荐(0)

PNG透明兼容IE6的几种方法(转)

摘要：png 透明针对 IE6 一直是件挺麻烦的事情，使用的方法也是各有不同，大多的原理是用 IE 的滤镜来解决的。语法：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled, sizingMethod=sSize, src=sURL)enabled：可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示阅读全文

posted @ 2013-08-30 09:05 Joanna Qian 阅读(310) 评论(0) 推荐(0)

10个网页设计师必备的CSS技巧（转）

摘要：英文原文：10 Essential CSS Rules for Web DesignersCSS是网页设计师的基础，对CSS的了解能使他们能够设计出更加美观别致的网页。使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情。在CSS 的深海世界里有很多有意思的东西，你只需要找到最适合你的就好。当然我们不可能一下子就记住所有CSS的规则和语法，但为了以后的发展我们还是应该记住那些非常有用的CSS技巧。今天我们精心准备了10条对网页设计师最有用的CSS技巧，如果你想设计出独一无二脱颖而出的网页你必须得好好注意了。这篇博客是在与一家提供高质量印刷服务的在线印刷公司“ Business Card 阅读全文

posted @ 2013-08-20 02:03 Joanna Qian 阅读(305) 评论(0) 推荐(0)

构建现代化网站的 20 个技巧(转)

摘要：英文原文：20 tips for building modern sites在过去几年中，我们与web开发者花了很多时间交流，听得最多的一件事情就是创建一个能很好的跨越各种类型浏览器版本与各种设备的网站有多么难。我们为 jQuery项目写代码的时候一直有这个问题。因此我们整理了20条编码模式与经验，它们是从出席无休止的会议和读了几百篇专稿中摘取出来的。我们希望能在你建站的时候给你节省一些时间（和麻烦）。跨浏览器基础网站不需要在所有浏览器里渲染得一样一件普遍被开发者所关心的事情是确保他们的网站在所有浏览器中渲染得一样，包括非现代的一些。那一般并不需要。更好的路线是考虑逐渐增强你的网站，对非阅读全文

posted @ 2013-08-20 01:53 Joanna Qian 阅读(281) 评论(0) 推荐(0)

before伪类的超有用应用技巧——水平菜单竖线分隔符

摘要：方法一、li前面加before伪类菜单 menu1 menu2 menu3 menu4 二、或利用相邻选择符加after伪类菜单 menu1 menu2 menu3 menu4 ... 阅读全文

posted @ 2013-06-29 04:42 Joanna Qian 阅读(3828) 评论(0) 推荐(0)

采用预取（Prefetch）来加速你的网站(转)

摘要：一、DNS预取如果你像我一样想在网站上有一个Twitter小程序，还有网站分析，再也许一些网页字体，那么你必须要链接到一些其它域名，这意味着你将不得不引发DNS查询。我的建议通常是，不要还没有先适当的考虑性能影响就使用某个或任何一个小程序，但对于你认为确实需要的，下面的将很有用……因为这些东西都存在于其它域名，比方说这就意味着你的网站字体CSS将会同你自己的CSS并行下载，从某种意义上说是一种好处，但是脚本将仍会阻塞（除非它们是异步的）事实上，这里的问题是DNS查询牵涉到了第三方域名。幸运的是，有一个相当快又简单的办法来加速这个过程：DNS预取。DNS预取所做的恰恰就是凭证领餐(on the 阅读全文

posted @ 2013-06-27 00:05 Joanna Qian 阅读(892) 评论(0) 推荐(0)

负margin应用案例几则（转载+总结）

摘要：（一）自适应布局——左栏改右栏这里先写个一列固定列宽，另一列自适应的两列布局，效果图：侧栏移至右边，效果图：其HTML main-inner sidebarcss.wrap { width: 100%; margin: 0 auto; color: #FFF; text-align: center; line-height: 50px; }.main { float: left; width: 100%; height: 60px; margin-right: -100%; background: #000; }.sidebar { float: left;... 阅读全文

posted @ 2013-06-24 04:21 Joanna Qian 阅读(379) 评论(0) 推荐(0)

CSS：scrollbar的属性及样式分类

摘要：overflow 内容溢出时的设置（设定被设定对象是否显示滚动条）overflow-x 水平方向内容溢出时的设置overflow-y 垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。scrollbar-3d-light-color 立体滚动条亮边的颜色（设置滚动条的颜色）scrollbar-arrow-color 上下按钮上三角箭头的颜色scrollbar-base-color 滚动条的基本颜色scrollbar-dark-shadow-color 立体滚动条强阴影的颜色sc... 阅读全文

posted @ 2013-06-24 02:04 Joanna Qian 阅读(1937) 评论(0) 推荐(0)

随笔分类 - HTML&CSS