Css Reset by Eric Meyer
URL:http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-developers 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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
} body {
line-height: 1;
} ol, ul {
list-style: none;
} blockquote, q {
quotes: none;
} blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
} /* remember to define focus styles! */
:focus {
outline: 0;
} /* remember to highlight inserts somehow! */
ins {
text-decoration: none;
} del {
text-decoration: line-through;
} /* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
} Style links depending on file format
/* external links */
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
} /* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
} /* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
} Remove textarea scrollbar in IE
textarea{
overflow:auto;
} Browser specific hacks
/* IE 6 */
* html .yourclass { } /* IE 7 */
*+html .yourclass{ } /* IE 7 and modern browsers */
html>body .yourclass { } /* Modern browsers (not IE 7) */
html>/**/body .yourclass { } /* Opera 9.27 and below */
html:first-child .yourclass { } /* Safari */
html[xmlns*=""] body:last-child .yourclass { } /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:nth-of-type(1) .yourclass { } /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:first-of-type .yourclass { } /* Safari 3+, Chrome 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.yourclass { }
} Clearfix
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
} .clearfix { display: inline-block; } /* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */ Center the website
.wrapper {
width:960px;
margin:0 auto;
} Rounded corners – border-radius
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
} Add a drop cap
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:60px;
font-family:Georgia;
} Using @fontface
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
} Cross Browser Inline-Block
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}
Fixed Footer
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
} /* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
} Changing the size of your content area
#content {
width: 100%;
margin: 0;
float: none;
} CSS3 Media Queries
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
} /* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
} /* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
} /* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
} /* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
} /* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
} /* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
} /* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
} /* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
} Multiple Background Images
#multiple-images {
background: url(image_1.png) top left no-repeat,
url(image_2.png) bottom left no-repeat,
url(image_3.png) bottom right no-repeat;
} Multiple Columns
#columns-3 {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 12px;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 12px;
-webkit-column-rule: 1px solid #c4c8cc;
} Min-height in IE
.box {
min-height:500px;
height:auto !important;
height:500px;
} Highlight Text Selection
::selection {
color: #000000;
background-color: #FF0000;
} ::-moz-selection {
color: #000000;
background: #FF0000;
} Box Shadow
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); Placeholder Text Styling
::-webkit-input-placeholder { color: #ccc; font-style:italic }
:-moz-placeholder { color: #ccc; font-style:italic } CSS3 3D Text
h1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
} Webkit border radius fix
-webkit-background-clip: padding-box; XBrowser Border-radius (CSS3PIE)
.roundbox {
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px;
behavior: url(/PIE.htc);
} Better IE compatibility
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> CSS3 Tooltips
a {
color: #900;
text-decoration: none;
} a:hover {
color: red;
position: relative;
} a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
} CSS3 background-size
body {
background: #000 url(http://birdoflight.files.wordpress.com/2009/10/frida-kahlo-1.jpg) center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
} @media only all and (max-width: 1024px) and (max-height: 768px) {
body {
-moz-background-size: 1024px 768px;
background-size: 1024px 768px;
}
} Cross Browser CSS Page Curl Shadow
.page-curl {
position: relative;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); } .page-curl:after {
z-index: -1;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
right: 10px;
bottom: 10px;
-webkit-transform: skew(15deg) rotate(5deg);
-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(15deg) rotate(5deg);
-moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); } .page-curl:before {
z-index: -2;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
left: 10px;
bottom: 10px;
-webkit-transform: skew(-15deg) rotate(-5deg);
-webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(-15deg) rotate(-5deg);
-moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); } CSS3 Blurry Text
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
} Fix IE6/7 double margin/padding bug
ul li
{
float: right;
margin-right: 10px;
*display: inline; /*Target IE7 and bellow*/
_display: inline; /*Target IE6 and bellow*/
}
/* This example fixes the double right margin bug */ The order of link pseudo-classes
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;} 7. HTML Meta Tags for Responsive Layouts
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

//table-cell的居中就是这么简单
.container{
  min-height: 6.5em;
  display: table-cell;
  vertical-align: middle;
  height:400px;
}

#colorbox {

  /*渐变 linear-graident(top,#color,#color)*/

  background: #629721;

  background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#f00));
  background-image: -webkit-linear-gradient(top, #83b842, #f00);
  background-image: -moz-linear-gradient(top, #83b842, #f00);
  background-image: -ms-linear-gradient(top, #83b842, #f00);
  background-image: -o-linear-gradient(top, #83b842, #f00);
  background-image: linear-gradient(top, #83b842, #f00);

/*love*/

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }

  //移动端的流媒体查询模版

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
/* Styles */
}

CSS模版收集的更多相关文章

  1. 各大浏览器CSS Hack收集

    各大浏览器CSS Hack收集  >>>>>>>>>>>>>>>>>>>>> ...

  2. css工具收集

    收集一些css的生成工具,开发中可以直接拿过来用.特别是那些css3中的一些新的特性. 1  css渐变背景在线生成工具      http://www.colorzilla.com/gradient ...

  3. css技巧收集

    1. 使用 :not() 为导航添加/取消边框 传统的方法为导航栏添加边框: /* add border */ .nav li { border-right: 1px solid #666; } /* ...

  4. Css常用收集

    /*-------------------------------------- 圆角*/ -webkit-border-radius: 4px;  -moz-border-radius: 4px; ...

  5. 浏览器 CSS Hack 收集

    所谓的Hack就是只有特定浏览器才能识别这段hack代码.Hack 不是什么好东西,除非没有办法,我们尽量还是不要用着玩意. 下面是各个浏览器的CSS Hack 列表. Firefox 浏览器 @-m ...

  6. css 细节收集

    细节1……………………………………………………………………………… 一.当文字与图片在一行,需要将文字与图片底对齐,需要这样写: <li>记住密码<img src="&qu ...

  7. 最常用的CSS技巧收集笔记

    1.重置浏览器的字体大小  重置浏览器的默认值 ,然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ,如果你不想下载9MB的文件,代码如下: body,div,dl,dt,dd,ul, ...

  8. JavaScript、CSS样式收集

    JS集: //给from一个名字然后在JavaScript的地方就可以用form的名字来调用form表单里input元素的value属性可以得到值 var val=form_name.input_na ...

  9. CSS技巧收集——巧用滤镜

    最近暴雪一款叫<守望先锋>的游戏火到不行,身边很多人都深受其毒害,虽然博主自己没有买(穷),但是耳濡目染也了解了个大概. 由于之前大致学习了一下 css 滤镜的各种用法,所以心血来潮结合二 ...

随机推荐

  1. fiddler对手机进行抓包

    1.安装fiddler web debugger 2.Tools -->telerik fiddler options-->connections,勾选allow remote compu ...

  2. DoTween NGUI bug

    多次动画导致UISprite丢失 DOTween动画进行时与UISprite有冲突,DOTween多次重复同一个动画时,UISprite会莫名的丢失 UISprite动画代码 CUIManager.I ...

  3. jsp 微信公众平台 token验证(php、jsp)(转载)

    微信公众平台现在推出自动回复消息接口,但是由于是接口内容用的是PHP语言写的,很多地方操作起来让本人这个对java比较熟悉的小伙很别扭,所以仿照PHP的接口代码做了一套jsp语言编写的接口. 首先先把 ...

  4. Java虚拟机工作原理详解 (一)

    一.类加载器 首先来看一下java程序的执行过程. 从这个框图很容易大体上了解java程序工作原理.首先,你写好java代码,保存到硬盘当中.然后你在命令行中输入 javac YourClassNam ...

  5. 观察器observes与对象初始化

    Demo.Person2 = Ember.Object.extend({ init: function() { alert('lljsd'); this.set('salutation', " ...

  6. 单机最大tcp连接数

    from:http://www.cnblogs.com/mydomain/archive/2013/05/27/3100835.html 单机最大tcp连接数 网络编程 在tcp应用中,server事 ...

  7. f2fs解析(三)NAT中如何区分inode和其他dnode

    首先,我们要知道NAT中的每个表项都对应着MAIN AREA区域中NODE段的一个block,还要知道NODE block很特别,block末尾会有一个node footer结构: 243 struc ...

  8. ABP入门系列——使用ABP集成的邮件系统发送邮件

    ABP中对邮件的封装主要集成在Abp.Net.Mail和Abp.Net.Mail.Smtp命名空间下,相应源码在此. #一.Abp集成的邮件模块是如何实现的 分析可以看出主要由以下几个核心类组成: E ...

  9. 地图投影——高斯-克吕格投影、墨卡托投影和UTM投影

    地图投影(Map Projection) http://baike.baidu.com/view/94066.htm 概念: 地图投影是把地球表面的任意点,利用一定数学法则,转换到地图平面上的理论和方 ...

  10. [WEB API] CLIENT 指定请求及回应格式(XML/JSON)

    [Web API] Client 指定请求及响应格式(xml/json) Web API 支持的格式请参考 http://www.asp.net/web-api/overview/formats-an ...