css+jq固定标题表格table
css+jq固定标题表格table
css画梯形,css画五角星, css画六角星 ,css画六边形
css画梯形,css画五角星, css画六角星 ,css画六边形
css画梯形
<div class="triangle"></div> <style> .triangle { border-bottom: 100px solid #F36823; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0px; width: 100px; } </style>
css画五角星
<div class="triangle"></div> <style> .triangle{ margin: 50px 0; position: relative; display: block; color: #F36823; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #F36823; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } .triangle:before { border-bottom: 80px solid #F36823; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } .triangle:after { position: absolute; display: block; color: #F36823; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #F36823; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ''; } </style>
css画六角星
<style> .triangle{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; } .triangle:after{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: ""; top: 30px; left: -50px; } </style>
css画六边形
<div class="triangle"></div> <style> .triangle{ width: 100px; height: 55px; background: #F36823; position: relative; } .triangle:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #F36823; } .triangle:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid #F36823; } </style>
Reset CSS
css Reset
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
/* ----------------Reset Css--------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input { margin: 0; padding: 0; border: none; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; } html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust: none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { font-family: arial, sans-serif; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }
此段包含HTML5的CSS reset来自:http://html5reset.org/
/* html5doctor.com Reset Stylesheet v1.4.1 2010-03-01 Author: Richard Clark - http://richclarkdesign.com */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } :focus { outline: 1; } article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; }
Normalize 源码解读
Normalize 源码解读
源码地址:https://github.com/necolas/normalize.css/blob/master/normalize.css
源码版本:v3.0.3
html与body 元素
/**
* 1. 设置全局的字体为sans-serif, 关于中文字体的设置可参考Amaze UI.
* 2. 防止 iOS 横屏字号放大,同时保证在PC上 zoom 功能正常.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
第2个问题场景是这样,苹果IOS设备调整后会自动调整文字的大小,按照苹果的意图是为了提升用户体验,比如竖屏状态下是14px,转换为横屏时就变成了20px,把text-size-adjust:100%就不会调整字体大小了。如果把值设置为’text-size-adjust:none’,那么就会导致用户无法放大缩小字体了。
/**
* 修复浏览器默认边距,统一效果.
*/
body {
margin: 0;
}
HTML5 元素 display definitions
/**
* 修复 IE 8/9,Html5新元素不能正确显示的问题,定义为block的元素
* 修复 IE 10/11,details 和 summary 定义为 block 的元素
* 修复 IE 11,main定义为 block 的元素.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
这个问题想必大家都已经非常清楚,当低版本浏览器遇到不识别的元素时,会默认把他们当成内联元素(inline),这里重新定义成为block元素。
/**
* 1. 修复 IE 8/9, HTML5新元素不能正确显示的问题,定义为inline-block元素
* 2. 修复Chrome, Firefox, Opera的progress元素没有以baseline垂直对齐.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
progress是HTML5的新标签,可以定义进度条,但是它Chrome, Firefox, 和Opera并没有已baseline垂直对齐。
/**
* 对不支持controls属性的浏览器, audio元素给以隐藏.
* 移除iOS5设备中多余的高度.
*/
audio:not([controls]) {
display: none;
height: 0;
}
在IE8之前的浏览器是不支持controls属性, 这里的办法是直接隐藏该元素
/**
* 修复 IE 7/8/9, Firefox 3 和 Safari 4 中hidden属性不起作用的问题.
* 在 IE, Safari, Firefox 22- 中隐藏template元素
*/
[hidden],
template {
display: none;
}
template标签用于HTML模板, 大家应该都是用过HTML模版开发页面, 这个标签是按照实际需求添加的, 但是模板又不能在界面上显示, 所以这里统一了样式,兼容旧浏览器.
链接 Links
/**
* 去掉 IE 10+ 点击链接时的灰色背景.
*/
a {
background-color: transparent;
}
/**
* 去掉点击时的outline焦点框,同时保证使用键盘可以显示焦点框,这个操作针对所有浏览器
* Improve readability of focused elements when they are also in an
* active/hover state.
*/
a:active,
a:hover {
outline: 0;
}
语义化文本标签 Text-level semantics
/**
* 修正abbr元素在 Firefox 外其他浏览器没有下划线的问题
*/
abbr[title] {
border-bottom: 1px dotted;
}
语义abbr标签是表示简称或缩写,自身的title属性是完整版,但是此标签在Firefox下默认有下边框,而其他浏览器中没有,这里统一了样式。
/**
* Firefox3+,Safari4/5 和 Chrome 中统一设置为粗体
*/
b,
strong {
font-weight: bold;
}
Firefox 3+, Safari 和 Chrome 给b和strong设置的属性是bolder,而不是bold,这里统一了样式。
/**
* 修正 Safari5 和 Chrome 中没有样式的问题.
*/
dfn {
font-style: italic;
}
dfn 标签可标记那些对特殊术语或短语的定义,在Safari 和Chrome 里不是斜体,在这里统一了样式。
/**
* 修复 Firefox 4+,Safari 5 和 Chrome 中section和article内的h1字体大小
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* 修复 IE 6/9, Safari 5 和 Chrome中样式不呈现的问题.
*/
mark {
background: #ff0;
color: #000;
}
mark标签用来突出显示部分文本,设置后会有一个高亮背景,但是此标签是HTML5中的新标签,在低版本浏览器并不识别,所以需要重置样式。
/**
* 在所有浏览器中统一small的字体大小.
*/
small {
font-size: 80%;
}
small标签在 HTML 4.01 就已经存在,HTML5 中增强了它的寓意,表示旁注信息,不过此标签在各个浏览器中呈现的字体大小不一样,在这里做了统一
/**
* 防止所有浏览器中的sub和sup影响行高.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
sup和sub两个标签是用来表示上标和下标,据HTML标准中对small,sub和sup的大小要求都是smaller,但是如上所示normalize.css给small设的是80%,而sub和sup却是75%,所以为了保持一致,且不影响其他元素的行高,把两者的line-height设为0,然后设置它的垂直以baseline开始,设置top和bottom手动设置两者偏移量
内嵌元素 Embedded content
/**
* 去除 IE6-9 和 Firefox 3 中a内部img元素默认的边框.
*/
img {
border: 0;
}
在旧版本的浏览器中,图片默认会有一个奇丑无比的蓝色边框,这里进行清除,统一样式。
/**
* 修复 IE9/10/11 中的overflow的怪异表现.
*/
svg:not(:root) {
overflow: hidden;
}
群组元素 Grouping content
/**
* 修复 IE 8/9、Safari中margin失效.
*/
figure {
margin: 1em 40px;
}
figure 是HTML5的新标签,用做文档插图,但它在 IE 8/9 and Safari 中的默认margin失效,这里做了统一设置。
/**
* 修正 Firefox 和其他浏览器之间的差异.
*/
hr {
box-sizing: content-box;
height: 0;
}
在 Firefox 中,hr元素的默认样式很多,和其它浏览器主要的差异有两点: 1.设置了height为2px; 2.box-sizing为border-box; 此样式对这两个问题进行重置,进行统一
/**
* 标签设置滚动条,内容溢出时出现.
*/
pre {
overflow: auto;
}
大部分浏览器的pre在overflow的时候会直接溢出去, 这里加上overflow:auto让它出现滚动条
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
用于修复 Safari 5 和 Chrome 中奇怪的字体设置,统一字体样式
表单 Forms
/**
* 1. 修正所有浏览器中颜色不继承的问题.
* Known issue: affects color of disabled elements.
* 2. 修正所有浏览器中字体不继承的问题.
* 3. 修正 Firefox 3+, Safari5 和 Chrome 中外边距不同的问题.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
有一些浏览器会把form表单中的一些元素 textarea, text, button, select 中的字体和字体颜色默认会设置成用户的字体或者是浏览器的字体, 并不会从父元素继承, 所以这里重置了这些元素的默认样式。
/**
* 统一 IE 8/9/10/11 overflow属性为visible.
*/
button {
overflow: visible;
}
在 IE 8/9/10/11里的button默认的overflow是hidden,这里统一为visible
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
统一各浏览器text-transform不会继承的问题
/**
* 1. 避免 Android 4.0.* 中的 WebKit bug ,该bug会破坏原生的audio和video的控制器
* 2. 更正 iOS 中无法设置可点击的input的问题.
* 3. 统一其他类型的input的光标样式.
*/
button,
html input[type=”button”], /* 1 */
input[type=”reset”],
input[type=”submit”] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
这里将可点击的按钮,统一设置鼠标样式为pointer,提高了可用性
/**
* 重置按钮禁用时光标样式.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 移除 Firefox 4+ 的内边距.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
统一设置行高为normal
Firefox浏览器会默认设置input[type=”button”]的行高为normal !important,这里统一样式
/**
* It’s recommended that you don’t attempt to style these elements.
* Firefox’s implementation doesn’t respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type=”checkbox”],
input[type=”radio”] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
修正 IE 8/9 box-sizing 被设置为content-box的问题
移除 IE 8/9 中多余的内边距
/**
* Fix the cursor style for Chrome’s increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type=”number”]::-webkit-inner-spin-button,
input[type=”number”]::-webkit-outer-spin-button {
height: auto;
}
修正 Chrome 中 input [type=”number”] 在特定高度和 font-size 时,下面一个箭头光标变成cursor: text 效果
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
*/
input[type=”search”] {
-webkit-appearance: textfield; /* 1 */
box-sizing: content-box; /* 2 */
}
修正 Safari 5 和 Chrome 中appearance被设置为searchfield的问题
修正 Safari 5 和 Chrome 中box-sizing被设置为border-box的问题
searchfield是CSS3的属性,它可以让一个div元素看上去像任何元素,但是浏览器支持性并不好,
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type=”search”]::-webkit-search-cancel-button,
input[type=”search”]::-webkit-search-decoration {
-webkit-appearance: none;
}
移除原生默认样式,统一search的输入框样式
/**
* 定义一致的边框、外边距和内边距.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11. 修正 IE 6-9 中颜色不能继承的问题
* 2. Remove padding so people aren’t caught out if they zero out fieldsets.重置内边距
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* 移除 IE8-11 中默认的垂直滚动条.
*/
textarea {
overflow: auto;
}
/**
* Don’t inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
统一设置optgroup元素font-weight始终为bold
表格 Tables
/**
* 合并单元格边框,重置内边距 Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
关于CSS清除浮动的多种方法
关于清除浮动,已经不是什么新技术了,这里只是归纳终结一下。
清除浮动 ,扩展开了来说就是解决 子元素都浮动了,脱离了文档流,导致父元素无法被撑开的问题。
今天我们就主要谈谈这个问题的解决方案。
ps 清除浮动 – (撑开父元素)
1.父元素是普通文档流 子元素 都浮动 在 浮动块 下边 加个一个 清除浮动 <br clear=”all” /> <div style=”clear:both”></div>
2.父元素是普通文档流 子元素 都浮动 在不影响页面的前提下 给父元素 添加 overflow:hidden
3.父元素是普通文档流 子元素 都浮动 在不影响页面的前提下 把父元素 变成 浮动块
4.clearfix
CSS print 样式 css控制打印样式 分页 页面大小
显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距。screen一般使用逻辑单位比如px,而打印机则应该使用物理单位比如cm或in。我们常见的A4纸张大小在不同DPI的显示器上显示的大小是不同的。因此如果要精确的控制打印效果就应该使用print
css,这是跨平台兼容的标准。不推荐使用浏览器插件方式实现打印。
web打印还有一种解决方式是生成pdf格式文件,客户端下载来打印,这也是不错的一种打印方式,因为pdf本身就是一种打印标准,可以做到精确控制。可以使用jsPDF在客户端动态生成pdf,也可以在服务器端使用一些组件生成pdf后传送给客户端。当然首选还是使用print
css来实现打印。
引入print css
使用link标签就像通常在html页面中引入样式表一样,不过附加一个额外的media属性,如下面这样:
html 代码:
<link rel=”stylesheet” href=”print.css” media=”print” />
表明print.css样式表是用于打印的
使用@media规则可以在通用的样式表中,使用@media规则指定样式用于打印,比如这样:
css 代码:
@media print selector { ... }
或者
css 代码:
@media print { selector{ ... } }
使用@import规则使用@import规则在通用的样式表中导入打印样式表,有两种形式,其本质是一样的。
css文件中:
css 代码:
@import url(print-style.css) print;
html文件中:
html 代码:
@import url(print-style.css) print;</style>
<style type="text/css"> @import url(print-style.css) print; </style>
使用link标签要比使用@import规则性能更好。
度量单位
显示时一般使用px,em或pt等逻辑单位,但在打印时要使用物理单位,比如cm或in(英寸)。对于常见的DPI(Dot Per Inch)为96的screen,px与cm的换算关系如下:
1 inch = 2.54 cm
1cm = 96/2.54 ≈ 37.80 px
1px = 2.54/96 ≈ 0.0265 cm
100px = 2.65 cm
A4纸的标准尺寸为:
21.0cm * 29.7 cm
在96DPI分辨率下,其对应的像素尺寸大约为:
794px * 1123px
因为不同的DPI下,其对应的像素尺寸是不同的,所以才要使用print css,使用物理单位来描述要打印的页面,这样打印效果就会一致了。
@page规则(at-rule)
@page 规则用于指定打印页面的一些属性,包括纸张尺寸,方向,页边距,分页等特性。其语法如下:
css 代码:
@page :pseudo-class { size: A4 landscape; margin:2cm; }
其中伪类可以指定:
- page-break-before用于设置元素前面的分页行为,可取值:
- auto默认值。如果必要则在元素前插入分页符。
- always在元素前插入分页符。
- avoid避免在元素前插入分页符。
- left在元素之前足够的分页符,一直到一张空白的左页为止。
- right在元素之前足够的分页符,一直到一张空白的右页为止。
- inherit规定应该从父元素继承 page-break-before 属性的设置。
- page-break-after设置元素后的分页行为。取值与page-break-before一样。
- page-break-inside设置元素内部的分页行为。取值如下:
- auto默认。如果必要则在元素内部插入分页符。
- avoid避免在元素内部插入分页符。
- inherit规定应该从父元素继承 page-break-inside 属性的设置。
比如:
css 代码:
h1 {page-break-after: always;}}
orphans设置当元素内部发生分页时必须在页面底部保留的最少行数。
@media print { section {page-break-before: always;} h1 {page-break-after: always;} p {page-break-inside: avoid;} }
widows设置当元素内部发生分页时必须在页面顶部保留的最少行数。比如:
css 代码:
@media print { p {orphans:3; widows:2;} }
其他
对于页面上有显示而不想打印的内容,可以将其display设置为none来避免打印。
需要打印的内容尽量避免float,有些浏览器不会正确的打印浮动的内容。
可以调用window.print()函数来打印当前页面。
分页打印或换页打印:page- break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示,这两个属性是用来控制文件的打印方式。每个打印属性都可以设定4种设定值:auto、always、left和 right。其中Auto是默认值,只有在有需要时,才需设定分页符号 (Page breaks)。page-break-before若设定成always,则是在遇到特定的组件时,打印机会重新开始一个新的打印页。page- break-before若设定成left,则会插入分页符号,直到指定的组件出现在一个左边的空白页上。page-break-before若设定成 right,则会插入分页符号,直到指定的组件出现在一个右边的空白页上。page-break-after属性会将分页符号加在指定组件后,而非之前。在下列程序中您将可以看到这些属性的设定。
div+css实现鼠标经过时图片有光泽效果
div+css实现鼠标经过时图片有光泽效果
——————– demo 开始 —————————
——————– demo 结束 —————————
<!DOCTYPE html > <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>div+css实现鼠标经过时图片有光泽效果</title> <style> body{ background:#f2f2f2;} .thumb { width: 311px; height: 185px; position: relative; overflow:hidden; border:4px solid #009cff; } .thumb img { width:311px; height:185px } .thumb em { position: absolute; left: -250px; top: 0; width: 313px; height: 185px; background-image: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0)); background-image: -moz-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0)); background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0)); background-image: -o-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0)); background-image: -ms-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0)); transform: skewx(-25deg); -o-transform: skewx(-25deg); -moz-transform: skewx(-25deg); -webkit-transform: skewx(-25deg); -moz-transition: 0s; -o-transition: 0s; -webkit-transition: 0s; transition: 0s; cursor: pointer; } .thumb:hover em { left:245px; transition:.7s; -moz-transition:.7s; -o-transition:.7s; -webkit-transition:.7s } .thumb .angle { position:absolute; top:169px; left:10px } .thumb .angle:after { content: " "; position: absolute; border: 8px dashed transparent; border-bottom: 8px solid #fefefe; width: 0; height: 0; font-size: 0; } </style> </head> <body> <!--重点是 em 标签的处理--> <div class="thumb"> <a title="吕神的自我修养" href="http://www.lrxin.com/" target="_blank"> <img width="311" height="185" src="http://www.lrxin.com/wp-content/uploads/2016/11/custom-scrollbar-200x150.png" class="attachment-thumbnail wp-post-image" alt="zappy"> <em></em> </a> <span class="angle"></span> </div> </body> </html>
DD_belatedPNG完美解决ie6下png图片半透明问题,支持背景平铺,定位等属性
解决png在ie6下半透明的方法有很多,这里之所以推荐 DD_belatedPNG 是因为 DD_belatedPNG 可以完美的支持
背景平铺 :background-repeat:(no-repeat ,repeat-x,repeat-y ,repeat)
背景定位:background-position:60px 80px;
背景固定:background-attachment:fixed;
等属性。
还支持:鼠标经过效果 a:hover{}
官方网站:http://www.dillerdesign.com/experiment/DD_roundies/
官方引用地址:
0.0.8a.js (官方未压缩版本, ~12Kb) : http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a.js
0.0.8a-min.js (官方压缩版, ~7Kb) : http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js
———————————-
使用方法 :
<!--[if IE 6]> <script type="text/javascript" src="DD_belatedPNG.js" ></script> <script type="text/javascript"> DD_belatedPNG.fix('.trans,.box , a:hover, .png_bg'); </script> <![endif]-->
引用函数是 DD_belatedPNG.fix() , 括号里分别填写应用 PNG-24 的 CSS 选择器(可使用ID选择器和类选择器)和应用类型(分为 img 标签和 background 属性两种)。
如
<script type="text/javascript"> DD_belatedPNG.fix('#box, img'); </script>
或者
<script type="text/javascript"> DD_belatedPNG.fix('.header, background'); </script>
等,这些可以简写成
<script type="text/javascript"> DD_belatedPNG.fix('#box-one, .header, img, background'); </script>
在或者像本例子中直接使用 * 号,表示应用所有 css 选择器及 xhtml 标签。
<script type="text/javascript"> DD_belatedPNG.fix('*'); </script>
DD_belatedPNG.rar:百度网盘http://pan.baidu.com/s/1dDwKBXv
纯CSS改变webkit内核浏览器的滚动条样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS改变webkit内核浏览器的滚动条样式</title> <style> /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar/*整体部分*/ { width: 5px; height:5px; } ::-webkit-scrollbar-track/*滑动轨道*/ { -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 0px; background: rgba(0,0,0,0.1); } ::-webkit-scrollbar-thumb/*滑块*/ { border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2); } ::-webkit-scrollbar-thumb:hover/*滑块效果*/ { border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.4); } </style> </head> <body> <div style=" height:2400px; background:#f60"></div> </body> </html>
csshover.htc是什么?怎么解决IE6下标签元素支持hover兼容问题?
csshover.htc是什么?怎么解决IE6下标签元素支持hover兼容问题?
做网页前端的朋友都知道IE6浏览器只支持a标签的hover属性,但有时候为了网页的美观和写代码的方便,我们经常给其他标签元素添加hover属性,例如li:hover{color:#f00},但由于浏览器的兼容性问题用Ie6的用户就无法体验到这种效果了,这时候就要用csshover.htc来解决这种问题。
csshover.htc的原理就是用javascript脚本来给元素的样式定义,如果检测到hover定义,就给元素设置onmouseover和onmouseout事件,以此来实现hover的效果。
解决方法如下:
首先建立csshover.htc文件,内容如下:
<public:attach event="ondocumentready" onevent="CSSHover()" /> <script> /** * Whatever:hover - V3.11 * http://www.xs4all.nl/~peterned/ * * Copyright (c) 2009 Peter Nederlof * Licensed under the LGPL license * http://creativecommons.org/licenses/LGPL/2.1 */ window.CSSHover=(function(){var m=/(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active|focus))/i;var n=/(.*?)\:(hover|active|focus)/i;var o=/[^:]+:([a-z\-]+).*/i;var p=/(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/gi;var q=/\.([a-z0-9_\-]*on(hover|active|focus))/i;var s=/msie (5|6|7)/i;var t=/backcompat/i;var u={index:0,list:['text-kashida','text-kashida-space','text-justify'],get:function(){return this.list[(this.index++)%this.list.length]}};var v=function(c){return c.replace(/-(.)/mg,function(a,b){return b.toUpperCase()})};var w={elements:[],callbacks:{},init:function(){if(!s.test(navigator.userAgent)&&!t.test(window.document.compatMode)){return}var a=window.document.styleSheets,l=a.length;for(var i=0;i<l;i++){this.parseStylesheet(a[i])}},parseStylesheet:function(a){if(a.imports){try{var b=a.imports;var l=b.length;for(var i=0;i<l;i++){this.parseStylesheet(a.imports[i])}}catch(securityException){}}try{var c=a.rules;var r=c.length;for(var j=0;j<r;j++){this.parseCSSRule(c[j],a)}}catch(someException){}},parseCSSRule:function(a,b){var c=a.selectorText;if(m.test(c)){var d=a.style.cssText;var e=n.exec(c)[1];var f=c.replace(o,'on$1');var g=c.replace(p,'.$2'+f);var h=q.exec(g)[1];var i=e+h;if(!this.callbacks[i]){var j=u.get();var k=v(j);b.addRule(e,j+':expression(CSSHover(this, "'+f+'", "'+h+'", "'+k+'"))');this.callbacks[i]=true}b.addRule(g,d)}},patch:function(a,b,c,d){try{var f=a.parentNode.currentStyle[d];a.style[d]=f}catch(e){a.runtimeStyle[d]=''}if(!a.csshover){a.csshover=[]}if(!a.csshover[c]){a.csshover[c]=true;var g=new CSSHoverElement(a,b,c);this.elements.push(g)}return b},unload:function(){try{var l=this.elements.length;for(var i=0;i<l;i++){this.elements[i].unload()}this.elements=[];this.callbacks={}}catch(e){}}};var x={onhover:{activator:'onmouseenter',deactivator:'onmouseleave'},onactive:{activator:'onmousedown',deactivator:'onmouseup'},onfocus:{activator:'onfocus',deactivator:'onblur'}};function CSSHoverElement(a,b,c){this.node=a;this.type=b;var d=new RegExp('(^|\\s)'+c+'(\\s|$)','g');this.activator=function(){a.className+=' '+c};this.deactivator=function(){a.className=a.className.replace(d,' ')};a.attachEvent(x[b].activator,this.activator);a.attachEvent(x[b].deactivator,this.deactivator)}CSSHoverElement.prototype={unload:function(){this.node.detachEvent(x[this.type].activator,this.activator);this.node.detachEvent(x[this.type].deactivator,this.deactivator);this.activator=null;this.deactivator=null;this.node=null;this.type=null}};window.attachEvent('onbeforeunload',function(){w.unload()});return function(a,b,c,d){if(a){return w.patch(a,b,c,d)}else{w.init()}}})(); </script>
引用方法:
<!–[if lte IE 6]>
<!--[if lte IE 6]> <style type="text/css"> body { behavior:url("csshover3.htc路径"); } </style> <![endif]-->
<![endif]–>
csshover.htc文件百度网盘下载地址:
http://pan.baidu.com/s/1pLuBmQJ
一个jquery写的 导航条,横线跟随
一个jquery写的 导航条,横线跟随
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>一个jquery写的 导航条,横线跟随</title> <script src="http://cdn.bootcss.com/jquery/1.8.2/jquery.js"></script> <script> $(function() { /* ------------- mainNavA ------------- */ $('.mainNavA').each(function() { var $box = $(this); var $li = $box.find('li'); $hover_line = $('<div class="hover_line"></div>').appendTo($box); $li.on('mouseenter',function() { $(this).addClass('hover').siblings().removeClass('hover'); var w = $(this).outerWidth(); var left = $(this).position().left; $hover_line.stop().animate( { width:w,left:left } ,200 );}).on('click',function() { $(this).addClass('active').siblings().removeClass('active'); } ); $box.mouseleave(function() { var $nav_active = $box.find('li.active'); if($nav_active.length) { $nav_active.addClass('hover').siblings().removeClass('hover'); var w = $nav_active.outerWidth(); var left = $nav_active.position().left; $hover_line.stop().animate( { width:w,left:left } ,200 );}console.log('mouseleave');}).mouseleave();}); /* ------------- mainNavA end ------------- */}) </script> <style> a { text-decoration:none; } ul,li { margin:0px; padding:0px; list-style:none; } /*--------------------- .mainNavA --------------------------------*/ .mainNavA { position:relative; padding:0px 20px; height:70px; line-height:70px; border-bottom:1px solid #e1e4e8; background:#ffffff; } .mainNavA li { float:left; padding:0px 10px; font-size:14px; color:#444444; margin-right:20px; } .mainNavA a { color:#444444; } .mainNavA .hover a,.mainNavA a:hover { color:#309ff4; text-shadow:1px 1px 1px #acd9fb; text-decoration:none; } .mainNavA .active.hover a { font-weight:bold; } .mainNavA .hover_line { height:2px; overflow:hidden; background:#309ff4; position:absolute; bottom:-1px; } /*--------------------- .mainNavA end --------------------------------*/ </style> </head> <body> <!--html--> <div class="mainNavA"> <ul> <li><a href="#">栏目</a></li> <li><a href="#">栏目标</a></li> <li><a href="#">栏目标题</a></li> <li class="active"><a href="#">栏目标题栏</a></li> <li><a href="#">栏目标题栏目标题栏目标题</a></li> </ul> <!--<div class="hover_line">jquery 会帮我生存的</div>--> </div> <!--\html--> </body> </html>
if ie 判断多个ie版本…
IE下判断IE版本的语句…[if lte IE 6]……[endif]
复制代码代码如下:
<!--[if IE 6]> <![endif]--> 只有IE6版本可见 <!--[if lte IE 6]> <![endif]--> IE6及其以下版本可见 <!--[if gte IE 6]> <![endif]--> IE6及其以上版本可见 <!--[if IE 7]> <![endif]--> 只有IE7版本可见 <!--[if lte IE 7]> <![endif]--> IE7及其以下版本可见 <!--[if gte IE 7]> <![endif]--> IE7及其以上的版本可见 <!--[if IE 8]> <![endif]--> 只有IE8版本可见 <!--[if lte IE 8]> <![endif]--> IE8及其以下的版本可见 <!--[if gte IE 8]> <![endif]--> IE8及其以上的版本可见 <![if !IE]> <![endif]> 除了IE以外的版本
用法:
(1)
可使用如下代码检测当前IE浏览器的版本(注意:在非IE浏览器中是看不到效果的)
复制代码代码如下:
<!––[if IE]> <h1>您正在使用IE浏览器</h1> <!––[if IE 5]> <h2>版本 5</h2> <![endif]––> <!––[if IE 5.0]> <h2>版本 5.0</h2> <![endif]––> <!––[if IE 5.5]> <h2>版本 5.5</h2> <![endif]––> <!––[if IE 6]> <h2>版本 6</h2> <![endif]––> <!––[if IE 7]> <h2>版本 7</h2> <![endif]––> <![endif]––>
那如果当前的浏览器是IE,但版本比IE5还低,该怎么办呢,可以使用<!–[if ls IE 5]>,当然,根据条件注释只能在IE5+的环境之下,所以<!–[if ls IE 5]>根本不会被执行。
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! : 就是不等于的意思,跟javascript里的不等于判断符相同
(2)
应该如何应用条件注释
本文一开始就说明了,因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样,具体就是对CSS的解释不同,我们为了兼容这些,可运用条件注释来各自定义,最终达到兼容的目的。比如:
复制代码代码如下:
<!–- 默认先调用css.css样式表 –-> <link rel="stylesheet" type="text/css" href="css.css" /> <!-–[if IE 7]> <!–- 如果IE浏览器版是7,调用ie7.css样式表-–> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]–-> <!–-[if lte IE 6]> <!–- 如果IE浏览器版本小于等于6,调用ie.css样式表 -–> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]–>
这其中就区分了IE7和IE6向下的浏览器对CSS的执行,达到兼容的目的。同时,首行默认的css.css还能与其他非IE浏览器实现兼容。
注意:默认的CSS样式应该位于HTML文档的首行,进行条件注释判断的所有内容必须位于该默认样式之后。
比如如下代码,在IE浏览器下执行显示为红色,而在非IE浏览器下显示为黑色。如果把条件注释判断放在首行,则不能实现。该例题很能说明网页对IE浏览器和非IE浏览器间的兼容性问题解决。
复制代码代码如下:
<style type="text/css"> body{ background-color: #000; } </style> <!-–[if IE]> <style type="text/css"> body{ background-color: #F00; } </style> <![endif]–->
同时,有人会试图使用<!–-[if !IE]>来定义非IE浏览器下的状况,但注意:条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下非单不是执行该条件下的定义,而是当做注释视而不见。
正常就是默认的样式,对IE浏览器需要特殊处理的,才进行条件注释。在HTML文件里,而不能在CSS文件中使用。
现在的DWcs4里面,已经装备了这些注释:在“窗口–>代码片段–>注释”里。其他的版本没太注意到。
纯CSS3 旋转动画 页面加载中,请稍候… 效果 适合做页面跳转
纯CSS3 旋转动画 页面加载中,请稍候… 效果 适合做页面跳转
代码:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="refresh" content="10;url='http://www.lrxin.com/';"> <title>页面加载中,请稍候...</title> <style type="text/css"> body { background: #555 } .loading { -webkit-animation: fadein 2s; -moz-animation: fadein 2s; -o-animation: fadein 2s; animation: fadein 2s } @-moz-keyframes fadein { from { opacity: 0 } to { opacity: 1 } } @-webkit-keyframes fadein { from { opacity: 0 } to { opacity: 1 } } @-o-keyframes fadein { from { opacity: 0 } to { opacity: 1 } } @keyframes fadein { from { opacity: 0 } to { opacity: 1 } } .spinner-wrapper { position: absolute; top: 0; left: 0; z-index: 300; height: 100%; min-width: 100%; min-height: 100%; background: rgba(255,255,255,0.93) } .spinner-text { position: absolute; top: 45%; left: 50%; margin-left: -100px; margin-top: 2px; color: #000; letter-spacing: 1px; font-size: 20px; font-family: Arial } .spinner { position: absolute; top: 45%; left: 50%; display: block; margin-left: -160px; width: 1px; height: 1px; border: 20px solid rgba(255,0,0,1); -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; border-left-color: transparent; border-right-color: transparent; -webkit-animation: spin 1.5s infinite; -moz-animation: spin 1.5s infinite; animation: spin 1.5s infinite } @-webkit-keyframes spin { 0%,100% { -webkit-transform: rotate(0deg) scale(1) } 50% { -webkit-transform: rotate(720deg) scale(0.6) } } @-moz-keyframes spin { 0%,100% { -moz-transform: rotate(0deg) scale(1) } 50% { -moz-transform: rotate(720deg) scale(0.6) } } @-o-keyframes spin { 0%,100% { -o-transform: rotate(0deg) scale(1) } 50% { -o-transform: rotate(720deg) scale(0.6) } } @keyframes spin { 0%,100% { transform: rotate(0deg) scale(1) } 50% { transform: rotate(720deg) scale(0.6) } } </style> </head> <body> <div class="loading"> <div class="spinner-wrapper"> <span class="spinner-text">页面加载中,请稍候...</span> <span class="spinner"></span> </div> </div> </body> </html>
使用Modernizr探测HTML5/CSS3新特性
HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level。这些新技术允许我们只用HTML,CSS和JavaScript就可以构建包括在平板和移动设备上能够运行的多样化表单页面。HTML5虽然提供了很多新特性,但是如果我们不考虑旧版本的浏览器就是用这些新技术也不太现实,老版本浏览器已经使用了很多年,我们依然需要考虑这些版本的兼容性问题。本文要解决的问题就是:在我们使用HTML5/CSS3技术的时候,如何更好地处理不支持HTML5/CSS3特性的旧版本浏览器问题。
尽管我们可以自己写代码来判断浏览器是否支持某些HTML5/CSS3特性,但是代码都不是很简单。例如:写代码判断浏览器支付支持canvans,我们的代码可能和下面的类似:
<script> window.onload = function () { if (canvasSupported()) { alert('canvas supported'); } }; function canvasSupported() { var canvas = document.createElement('canvas'); return (canvas.getContext && canvas.getContext('2d')); } </script>
如果要判断是否支持本地存储(local storage),代码可能和下面的类似,但是很容易再Firefox下产生bug。
<script> window.onload = function () { if (canvasSupported()) { alert('canvas supported'); } }; function canvasSupported() { var canvas = document.createElement('canvas'); return (canvas.getContext && canvas.getContext('2d')); } </script>
前面2个例子都是分别检查一个特性,如果有很多HTML5/CSS3特性的话,我们不得不写多份代码来判断,不过还算幸运的是这些代码没有依赖顺序。Modernizr可以让你用很少的代码来实现上述复杂的功能,让我们来看一下Modernizr的一些重要特性:
开始使用Modernizr
第一次我听到Modernizr的时候,我以为它的意思是modernized,可以在旧版本浏览器上添加一些HTML5/CSS3的新特性。事实上,Modernizr不是干这个的,它是帮助我们提高开发实践的,使用一个非常时髦的方法来帮助探测浏览器是否支持某种新特性,甚至可以加载额外的script脚本。如果你是一个web开发人员的话,那对你来说它就是一件很牛逼的兵器。
Modernizr官方站点:http://modernizr.com,2个类型的脚本你都可以使用(开发版和自定义的生产版本)。网站提供了一个自定义需求的工具来生成仅仅你需要的探测功能,而不是一个什么都可以探测的大而全的版本,就是说你可以让你的脚本最小化。下图是官方网站生成工具的界面,可以看到很多HTML5/CSS3和相关技术的探测功能都可以选择上。
下载完你自定义的脚本以后,你就可以像引用普通js文件一样引用它了,然后就可以用了。
<script src="Scripts/Modernizr.js" type="text/javascript"></script>
Modernizr和HTML元素
添加完Modernizr引用以后,它就立即生效了。运行的时候它会在html元素上添加一批CSS的class名称,这些class名称标记当前浏览器支持哪些特性和不支持哪些特性,支持的特性就直接显示该天特性的名称作为一个class(例如:canvas,websockets),不支持的特性显示的class是“no-特性名称”(例如:no-flexbox)。下面这段代码是运行在Chrome下的效果:
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
下面这段代码是运行在IE9下的效果:
<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
使用Modernizr,有可能会出现下面代码的情况(添加no-js名称到class里):
<html class="no-js">
你可以访问(http://html5boilerplate.com)站点查看HTML5 Boilerplate相关的内容,或者(http://initializr.com)查看Initializr相关的内容,添加no-js class到html元素下,是告诉浏览器是否支持JavaScript,如果不支持就显示no-js,如果支持就把no-js删掉。非常爽,对吧?
结合HTML5/CSS3特性一起使用
你可以直接使用Modernizr在<html>元素里生成的class名称,在你的css文件里定义相应的属性以便支持当前浏览器。例如,下面的代码可以属性,在支持shadow阴影的浏览器显示shadow,不支持的浏览器显示标准的边框:
.boxshadow #MyContainer { border: none; -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px; } .no-boxshadow #MyContainer { border: 2px solid black; }
因为如果浏览器支持box-shadows的话,Modernizr就会将boxshadow class添加到<html>元素,然后你可以将它管理到一个相应的div的id上。如果不支持,Modernizr就会将no-boxshadow class添加到<html>元素,这样显示的就是一个标准的边框。这样我们就可以很方便地在支持CSS3特性的浏览器上使用CSS3新功能,不支持的浏览器上继续使用以前的方式。
Modernizr除了添加相应的class到<html>元素以外,还提供一个全局的Modernizr JavaScript对象,该对象提供了不同的属性来表示某种新特性在当前浏览器下是否支持。例如,下面的代码可以用于判断浏览器是否支持canvas和local storag。对于多个开发人员在多版本浏览器下开发测试的时候很有好处的,大家可以统一代码。
$(document).ready(function () { if (Modernizr.canvas) { //Add canvas code } if (Modernizr.localstorage) { //Add local storage code } });
全局的Modernizr对象也可以用来探测是否支持CSS3特性,下面的代码用于测试是否支持border-radius 和CSS transforms:
$(document).ready(function () { if (Modernizr.borderradius) { $('#MyDiv').addClass('borderRadiusStyle'); } if (Modernizr.csstransforms) { $('#MyDiv').addClass('transformsStyle'); } });
其它的一些CSS3特性可以探测到结果,例如:opacity, rgba, text-shadow, CSS animations, CSS transitions, multiple backgrounds等等,Modernizr支持的完整的HTML5/CSS3可探测列表可以在如下http://www.modernizr.com/docs找到。
使用Modernizr加载Script脚本
在某些不支持新特性的浏览器上,Modernizr不仅仅提供了上述方式告诉你,也提供了load功能允许你加载一些shim/polyfill脚本来达到支持的目的(关于shim/polyfill的信息请访问:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills)。Modernizr提供了一个脚本加载器来判断一个功能,如果不支持就加载相应的脚本。单独的脚本也可以在http://yepnopejs.com找到。
可以使用Modernizr的load()函数来动态加载脚本,该函数的test属性是表明要测试是否支持的新特性,如果测试成功支持的话,就加载yep属性设置的脚本,如果不支持就加载nope属性设置的脚本,不管是否支持,both属性里设置的脚本都会加载的。例子代码如下:
Modernizr.load({ test: Modernizr.canvas, yep: 'html5CanvasAvailable.js’, nope: 'excanvas.js’, both: 'myCustomScript.js' });
在该例子里,Modernizr会判断当前浏览器是否支持canvas特性,如果支持,那就会加载html5CanvasAvailable.js和myCustomScript.js这两个脚本,如果不支持,就会加载excanvas.js(用于IE9之前的版本)脚本文件以让该浏览器支持canvas功能,然后再加载myCustomScript.js脚本。
因为Modernizr可以加载脚本,所以你还可以用于其它的用途,比如,如果你引用的第三方脚本(例如提供CDN服务的Google和Microsoft提供jquery的托管)加载失败的情况下,可以加载备用的文件。下面的代码是Modernizr提供的一个加载jquery的示例:
Modernizr.load([ { load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js', complete: function () { if (!window.jQuery) { Modernizr.load('js/libs/jquery-1.6.4.min.js'); } } }, { // This will wait for the fallback to load and // execute if it needs to. load: 'needs-jQuery.js' } ]);
该代码会首先从Google CDN加载jQuery文件,如果下载或加载失败,complete函数就会执行,首先判断jQeury对象是否存在,如果不存在,Modernizr就会加载定义好的本机js文件,如果连 complete里的文件都加载不成功,就会加载needs-jQuery.js文件。
总结:
如果你正在使用最新的HTML5/CSS3来构建你的程序,Modernizr绝对是一个必需的工具。使用它你可以节约很多代码以及测试工作量,甚至可以对一些不支持新特性的浏览器通过额外加载脚本的形式来实现相应的新特性。
如何改变网页反白颜色? ( ::selection详解 )
::selection可以改变整个网页的反白顏色,如果在::selection加上标籤名称,就代表只会生效在该标籤内,如p::selection,代表只套用在<p></p>中。
p::selection { background: #FA60F1; color: #fff; } i::selection { background: #01DD1B; color: #fff; } ::selection { background: #000; color: #fff; } p::-moz-selection { background: #FA60F1; color: #fff; } i::-moz-selection { background: #01DD1B; color: #fff; } ::-moz-selection { background: #000; color: #fff; }
由于Firefox瀏览器对於::selection是不支持的,所以要用Firefox专属语法才能达成效果
「::-moz-selection」。
另外,::selection只能针对背景顏色(background)及文字顏色(color)下去做设定,如果在其中加入其他的样式,如font-size:25px;这样,是不会生效的(背景图片也不会生效)。假设我们有这一段样式:
::selection { background: #FE2AFC; color: #fff; font-size: 25px; } ::-moz-selection { background: #FE2AFC; color: #fff; font-size: 25px; }
CSS3详解:transform [旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix]
CSS3详解:transform [旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix]
transform的属性包括:rotate() / skew() / scale() / translate(x,y) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。
下面我们来分解各个属性的用法:
1.旋转 rotate():
水平旋转,属性值格式为Xdeg。(deg是“度”的意思)rotate(Xdeg)。X为正数时,顺时针旋转;为负数时,逆时针旋转
.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}
改变元素基点transform-origin
————————————————————————————
2.扭曲 transform:skew():
将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)。这个比较难表述,想象一下平行四边形吧。属性值为一个时,x、y轴参数相同;为两个时,x、y轴各自倾斜。
.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}
————————————————————————————
3.缩放 scale():
缩放,1为原始大小。scale(x)。正数放大,负数缩小。属性值为一个时,x/y轴同时缩放;属性值为两个值时,分别控制x、y轴的缩放。
.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}
————————————————————————————
4.位移 translate(x,y):
定位元素,基于XY轴重新定位元素。translate(Xpx,Ypx)。属性值为一个时,x、y轴参数相同;为两个时,x、y轴分别定位
.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}
5.矩阵matrix
matrix(<number>, <number>, <number>, <number>, <number>, <number>) : 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,我在这里只是简单的说一下CSS3中的transform有这么一个属性值,如果有感兴趣的朋友可以去了解更深层次的martix使用方法,这里就不多说了。
————————————————————————————
6.transform综合应用:
transform的常用属性就是这些了,下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例:
.demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out} .demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}
示例代码:
图片下面出现空白像素的问题解决
图片下面出现空白像素的问题解决
在进行页面的DIV+CSS排版时,浏览器中的图片元素img下出现多余空白的问题绝对是常见的,对于该问题的解决方法也是“见机行事”,根据原因的不同要用不同的解决方法,这里把解决直接把解决img图片布局下边的多余空白的BUG的常用方法归纳,供大家参考。
推荐方法 1 和 2 ,最喜欢的还是方法 1.
1、将图片转换为块级对象可去掉下边空白
即,设置img为:
display:block;
在本例中添加一组CSS代码:
img {display:block;}
2、设置图片的垂直对齐方式
即设置图片的vertical-align属性为“top,text-top,bottom,text-bottom”也可以去掉下边空白。CSS代码:
img {vertical-align:top;}
3、设置父对象的文字大小为0px ,此方法不推荐。
即,在父对象css中添加一行:
font-size:0;
可以解决空白问题。但这也引发了新的问题,在父对象中的文字都无法显示。就算文字部分被子对象括起来,设置子对象文字大小依然可以显示,但在CSS效验的时候会提示文字过小的错误。
4、改变父对象的属性
如果父对象的宽、高固定,图片大小随父对象而定,那么可以设置:
overflow:hidden;
来去掉空白。如本例中可以在父对象css中添加以下代码:
width:88px;height:31px;overflow:hidden;
5、设置图片的浮动属性也可去掉空白
即在本例中增加一行CSS代码:
img {float:left;}
如果要实现图文混排,这种方法是很好的选择。但如果容器里就一个img标签,他浮动后,造成父元素内部空 没有高度。
6、取消图片标签和其父对象的最后一个结束标签之间的空格。
这个方法要强调下,在实际开发中该方法可能会出乱子,因为在写代码的时候为了让代码更体现语义和层次清晰,难免要通过IDE提供代码缩进显示,这必然会让标签和其他标签换行显示,比如说DW的“套用源格式”命令。所以说这个方法可以供我们了解出现BUG的一种情况,具体解决图片下边空白方案的还得各位见招拆招了。
jQuery 瀑布流布局插件 jQuery Masonry 参数介绍
瀑布流布局神器——JQuery Masonry
网址:http://masonry.desandro.com/index.html
jQuery Masonry是一个构建瀑布流布局的一个jQuery插件,通过它可以轻松使页面元素通过绝对定位实现瀑布流布局。
1\ 标记需要布局的容器和Item
Masonry需要一个容器来装载结构类似的子元素
<div id="container"> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> ... </div>
然后在页面中添加Jquery和Masonry脚本引用,要求jquery版本在1.6+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="/path/to/jquery.masonry.min.js"></script>
2\编写CSS
所有需要布局的元素大小由CSS来确定,所有元素必须是浮动的
.item { width: 220px; margin: 10px; float: left; }
3\编写脚本
编写脚本传入初始化布局参数,让容器自动布局。
强烈推荐配置itemSelector和columnWidth两个参数。更多参数配置请查阅官网。
$(function(){ $('#container').masonry({ // options itemSelector : '.item', columnWidth : 240 }); });
OK,到此结束。So easy~
以下是更多参数介绍:
$('#wrapper').masonry({ singleMode: false, // 禁用测量每个浮动元素的宽度。 // 如果浮动元素具有相同的宽度,设置为true。 // 默认: false columnWidth: 240, // 1列网格的宽度,单位为像素(px)。 // 默认: 第一个浮动元素外宽度。 itemSelector: '.box:visible', // 附加选择器,用来指定哪些元素包裹的元素会重新排列。 resizeable: true, // 绑定一个 Masonry 访问 用来 窗口 resize时布局平滑流动. // 默认:true animate: true, // 布局重排动画。 // 默认:false animationOptions: {}, // 一对动画选项,具体参数可以参考jquery .animate()中的options选项 appendedContent: $('.new_content'), // 附加选择器元素,用来尾部追加内容。 // 在集成infinitescroll插件的情况下使用。 saveOptions: true, // 默认情况下,Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项 // 默认:true }, function() {} // 可选择的回调函数 // 'this'将指向重排的Masonry适用元素 );
更多参数介绍可以参考官方网站: http://masonry.desandro.com/docs/options.html
25个通过本插件实现的网页效果: 《25 Powerful Examples of Masonry jQuery Web Design》
http://smashinghub.com/25-powerful-examples-of-masonry-jquery-web-design.htm
关于clearfix清除浮动
关于clearfix清除浮动
起源:
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-table; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */
说明:
*对大多数符合标准的浏览器应用第一个声明块,目的是创建一个隐形的
内容为空的块来为目标元素清除浮动。
*第二条为clearfix应用 inline-table 显示属性,仅仅针对IE/Mac。
*利用 * / 对 IE/Mac 隐藏一些规则:
* height:1% 用来触发 IE6 下的haslayout。
*重新对 IE/Mac 外的IE应用 block 显示属性。
*最后一行用于结束针对 IE/Mac 的hack。
由于此方法针对的浏览器或成为历史(尤其是Mac下的IE5 ),或正在靠近
标准的路上,这个方法就不再那么与时俱进了。
抛掉对 IE/Mac 的支持之后,新的清除浮动方法:
/* new clearfix */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */
说明:
IE6 和 IE7 都不支持 :after 这个伪类,因此需要后面两条来触发IE6/7的haslayout,以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。
在这里针对IE6/7用了两条语句来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6/7 同时应用 zoom:1 或者直接就写成:
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix{*zoom:1;}
以我目前的浅薄认知来讲,以上写法应该也可以直接达到同样效果。关于这个地方,在文章的评论里也有些讨论,我希望再听听大家的高见。
我平时都是用 overflow:hidden 来清除浮动的,因为够简单粗暴。但是 overflow 有时候也不太适用:
父级元素使用 overflow:hidden 时,如果其子元素定位到部分或全部在父元素之外,父元素就会对超出其外的子元素部分进行裁剪。
对 css3 来说,也会 overflow:hidden 也会对一些属性产生影响。
例如 box-shadow, 当父元素使用 overflow:hidden 属性时,box-shadow 会被裁剪。
其他可能被影响的元素如 text-shadow 和 transform。可以参考 Andy Ford 的 demo
对于那些不愿意再给标签添加额外的 clearfix 类来清除浮动的人来说,直接将需要清除浮动的元素添加进清除浮动代码块这个组也是一个办法。
.group:after, #content:after, #sidebar:after, #some .other .thing:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; zoom:1; }
这种情况下,html 和 css 文件就像一个跷跷板的两头。html 代码倒是整洁了,css 代码却出现了一定的繁冗。而且一旦专题页面过长,或者在项目中使用,用这个清除组的方式反而会不胜其扰。
归结下来,还是得看个人、项目的权衡选择.虽然我一直用简单粗暴的overflow:hidden,但是现在更倾向于使用 clearfix,感觉这种一体化的东西更靠谱,能避免偶尔对 zoom 的遗忘。
成熟的东西稳定性好,但是会比较复杂、厚重;简单的灵活性好,但是过于零散、随意,没有组织性,还没那么稳定.权衡决定到底要使用那种方法,有时候反而比问题本身还让人头疼.
我个人的想法是没有好与坏的区别,只有合适不合适的区别。但是我们一直都受困于所受的教育,什么问题都有标准答案,非对即错,非好即坏。经常可见对一些工具的讨论,都是奔着争出个谁好谁坏而去的,例如 jQuery mootools YUI.相比起到底是好谁坏,我们还是最好赶紧转变思想,摒弃”一刀切”的思想吧。
纯CSS设置Checkbox复选框控件的样式
Checkbox复选框 是经常使用表单元素,本文将用CSS3对Checkbox复选框的样式进行修改。
这里不过是抛砖引玉,读懂后,可以自由发挥。让你的网站中的Checkbox设置一个与众不同
查看演示,可以看到我们将要创建的复选框样式。
首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。
/** * 隐藏默认的checkbox */ input[type=checkbox] { visibility: hidden; }
隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有for属性的label标签时,对应的Checkbox复选框会被选中。这意味着,我们可以通过label的点击事件来处理我们的Checkbox复选框。
样式一
此复选框风格就像一个解锁滑块,滑块选中和未选中状态会显示在的不同位置。当单击滑块按钮(label标签),将会选中复选框,然后滑块移动到ON位置。
我们开始创建复选框区的HTML。
<section> <!-- Checbox One --> <h3>Checkbox One</h3> <div class="checkboxOne"> <input type="checkbox" value="1" id="checkboxOneInput" name="" /> <label for="checkboxOneInput"></label> </div> </section>
因为这个样式的复选框,一个label不足以完成任务,我们用一个DIV元素包含checkbox,我们需要使用它们来做黑色条带和圆角。
/** * Create the slider bar */ .checkboxOne { width: 40px; height: 10px; background: #555; margin: 20px 80px; position: relative; border-radius: 3px; }
现在,我们可以把label作为条带上的滑块,我们希望按钮效果是从条带的一侧移动到另一侧,我们可以添加label的过渡。
/** * Create the slider from the label */ .checkboxOne label { display: block; width: 16px; height: 16px; border-radius: 50%; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; cursor: pointer; position: absolute; top: -3px; left: -3px; background: #ccc; }
现在这个滑块在选中(关闭)位置,当我们选中复选框,我们希望有一个反应发生,所以我们可以移动滑块到另一端。我们需要知道,判断复选框被选中,如果是则改变label元素的left属性。
/** * Move the slider in the correct position if the checkbox is clicked */ .checkboxOne input[type=checkbox]:checked + label { left: 27px; }
这就是你需要的第一个Checkbox复选框的CSS。
样式二 checkbox-two
此复选框风格像样式一样,但不同的是,这个滑块按钮会改变颜色。当您单击滑块按钮,它移动到条带的另一边,并改变按钮的颜色。
HTML代码和样式一是完全一样的。
<section> <!-- Checbox Two --> <h3>Checkbox Two</h3> <div class="checkboxTwo"> <input type="checkbox" value="1" id="checkboxTwoInput" name="" /> <label for="checkboxTwoInput"></label> </div> </section>
这个DIV会变成比样式一大一些的条带,label依然是作为滑块,使用下面的CSS来定义它。
这个样式中间有一个黑色的条,滑块会沿着它左右滑动,但是DIV元素已经使用了,所以我们需要用:before伪类创建一个新的元素。
/** * Create the line for the circle to move across */ .checkboxTwo:before { content: ''; position: absolute; top: 19px; left: 14px; height: 2px; width: 90px; background: #111; }
和样式一一样,接下来我们为label写CSS样式,把它用作滑块。
/** * Create the circle to click */ .checkboxTwo label { display: block; width: 22px; height: 22px; border-radius: 50%; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; cursor: pointer; position: absolute; top: 9px; z-index: 1; left: 12px; background: #ddd; }
我要实现和样式一差不多的选中状态,当选中时改变label的left和background属性。
/** * Create the click event for the checkbox */ .checkboxTwo input[type=checkbox]:checked + label { left: 84px; background: #26ca28; }
样式三 checkbox-three
这个复选框的样式比样式二更复杂一些,它和前面的例子一样会左右滑动,并且当改变选中和未选中的状态时,滑块滑动到另一侧并且在原位置显示对应的文本。
首先,我们写HTML代码,这和前面是相同的。
<section> <!-- Checbox Three --> <h3>Checkbox Three</h3> <div class="checkboxThree"> <input type="checkbox" value="1" id="checkboxThreeInput" name="" /> <label for="checkboxThreeInput"></label> </div> </section>
然后,我们用相同的方式把div作为滑块,下面的代码会创建一个黑色圆角的条带,我们可以把滑块和文本放到里面。
/** * Checkbox Three */ .checkboxThree { width: 120px; height: 40px; background: #333; margin: 20px 60px; border-radius: 50px; position: relative; }
当滑块处于未选中状态时,滑块会在左侧,并且右边显示”OFF”,当点击的时候,滑块移动到右侧,左侧显示”ON”。
但是元素数量不足以让我们实现这些功能,所以我们要用:before和:after两个伪类创建两个元素,分别放置”ON”和”OFF”。
/** * Create the text for the On position */ .checkboxThree:before { content: 'On'; position: absolute; top: 12px; left: 13px; height: 2px; color: #26ca28; font-size: 16px; } /** * Create the label for the off position */ .checkboxThree:after { content: 'Off'; position: absolute; top: 12px; left: 84px; height: 2px; color: #ddd; font-size: 16px; }
和前面一样,我们来添加滑块的样式,当被点击时它会移动到另一侧,并且改变颜色。
/** * Create the pill to click */ .checkboxThree label { display: block; width: 52px; height: 22px; border-radius: 50px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; cursor: pointer; position: absolute; top: 9px; z-index: 1; left: 12px; background: #ddd; } /** * Create the checkbox event for the label */ .checkboxThree input[type=checkbox]:checked + label { left: 60px; background: #26ca28; }
样式四 checkbox-four
在这个样式中,我们会创建两个圆形,当点击时改变里面的圆形的颜色表示选中与未选中的状态。
和前面一样的HTML代码。
<section> <!-- Checbox Four --> <h3>Checkbox Four</h3> <div class="checkboxFour"> <input type="checkbox" value="1" id="checkboxFourInput" name="" /> <label for="checkboxFourInput"></label> </div> </section>
接下来我们要为checkbox创建外面的圆形,使用CSS的border-radius属性,并且设置为100%就可以创建一个正圆形。
/** * Checkbox Four */ .checkboxFour { width: 40px; height: 40px; background: #ddd; margin: 20px 90px; border-radius: 100%; position: relative; -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); box-shadow: 0px 1px 3px rgba(0,0,0,0.5); }
然后我们用label元素来创建一个小一点的圆形,它会根据checkbox状态来改变颜色。
/** * Create the checkbox button */ .checkboxFour label { display: block; width: 30px; height: 30px; border-radius: 100px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; cursor: pointer; position: absolute; top: 5px; left: 5px; z-index: 1; background: #333; -webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5); box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5); } 当复选框被选中的时候,我们要改变内圈的背景颜色来表示选中状态。 /** * Create the checked state */ .checkboxFour input[type=checkbox]:checked + label { background: #26ca28; }
样式五 checkbox-five
这个复选框的样式有些不同,它看起来只是比浏览器默认的checkbox样式稍微好了些,但是不同的是我们可以根据自己的需要来定义它的样式了。
首先还是一样的HTML代码
在前面的例子中,我们把div作为checkbox的滑动条带或者外部的圆圈,但是这一次我们不需要了,可以使用div元素来设置复选框的区域。
/** * Checkbox Five */ .checkboxFive { width: 25px; margin: 20px 100px; position: relative; }
label标签用于Click事件和我们要定义的复选框的方框样式。
/** * Create the box for the checkbox */ .checkboxFive label { cursor: pointer; position: absolute; width: 25px; height: 25px; top: 0; left: 0; background: #eee; border:1px solid #ddd; }
接下来,我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px x 9px的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后,它会看起来像一个字母L。然后我们可以使用CSS的transform属性让它旋转一下,这样看起来就像是一个对勾。
/** * Display the tick inside the checkbox */ .checkboxFive label:after { opacity: 0.2; content: ''; position: absolute; width: 9px; height: 5px; background: transparent; top: 6px; left: 7px; border: 3px solid #333; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
在上面的CSS中,我们已经设置它的透明度为0.2,所以你会看到的复选框有一个半透明的对勾。你可以在悬停的时候加深一点,在选中时,可以把设置为不透明。
/** * Create the hover event of the tick */ .checkboxFive label:hover::after { opacity: 0.5; } /** * Create the checkbox state for the tick */ .checkboxFive input[type=checkbox]:checked + label:after { opacity: 1; }
这将会为你创建全新的checkbox复选框样式。
观看演示,看看这些复选框是如何工作的。