css,Code片段,代码实例,代码示例,代码片段库

css CSS：阿尔法

CSS：阿尔法

alpha.css

.ransparent {
    filter:alpha(opacity=50);  /* IE */
    -moz-opacity:0.5;          /* Moz + FF */
    opacity: 0.5;              /* 支持CSS3的浏览器（FF 1.5也支持）*/
    -khtml-opacity: 0.5;
}

css CSS通用设备媒体查询断点

CSS通用设备媒体查询断点

css-common-device-media-query-breakpoints.css

/* From http://www.designyourway.net/blog/resources/31-css-code-snippets-to-make-you-a-better-coder/ */
/* 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 CSS固定页脚

CSS固定页脚

css-fixed-footer.css

/* From http://www.designyourway.net/blog/resources/31-css-code-snippets-to-make-you-a-better-coder/ */
#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');
}

css 跨浏览器最小高度

跨浏览器最小高度

cross-browser-min-height.css

/* From http://www.designyourway.net/blog/resources/31-css-code-snippets-to-make-you-a-better-coder/ */
#div {
   min-height: 500px;
   height:auto !important;
   height: 500px;
}

css CSS Animate Spin

CSS Animate Spin

css-animate-spin.css

/*
   Animation example, for spinners
*/
.animate-spin {
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
  display: inline-block;
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-ms-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

css 自举响应，bone.css

bootstrap-responsive-bone.css

/* LANDSCAPE */
@media (min-width: 1201px) {
}
@media (max-width: 1200px) {
}

/* DESKTOP */
@media (min-width: 992px) {
}
@media (max-width: 991px) {
}

/* TABLET */
@media (min-width: 768px) {
}
@media (max-width: 767px) {
}

/* SMARTPHONE */
@media (min-width: 481px) {
}
@media (max-width: 480px) {
}

@media (min-width: 401px) {
}
@media (max-width: 400px) {
}

/* MIXED */
@media (min-width: 768px) and (max-width: 991px) {
}
@media (min-width: 991px) and (max-width: 1200px) {
}
@media (min-width: 768px) and (max-width: 1200px) {
}

css 在动态大小的导航项上水平居中导航指示器的巧妙CSS技巧。

在动态大小的导航项上水平居中导航指示器的巧妙CSS技巧。

navigation-indicators.css

.navbar.home .navbar-nav li{
  position: relative;
}

.navbar.home .navbar-nav li.active a:after{
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;	
  border-top: 10px solid #bd0304; // Triangle
  content: ''; // Empty content
  height: 0; 
  left: 50%;
  margin-left: -10px; // The width of your indicator
  position: absolute;
  top: 100%;
  width: 0; 
}

/*
<ul class="nav navbar-nav">
	<li class="active"><a href="#">Featured</a></li>
	<li><a href="#">Products</a></li>
	<li><a href="#">Ordering Food</a></li>
	<li><a href="#">Your Clients</a></li>
	<li><a href="#">Education</a></li>
	<li><a href="#">Support</a></li>
</ul>
*/

css 电子邮件：隐藏所有桌面客户端中的图像

电子邮件：隐藏所有桌面客户端中的图像

email-hide-images.css

table[class="mob-show"],
tr[class="mob-show"],
td[class="mob-show"],
span[class="mob-show"],
a[class="mob-show"],
img[class="mob-show"] {
  display: none !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
  mso-hide: all !important;
}

@media (max-width: 480px) {
  table[class="mob-hide"],
  tr[class="mob-hide"],
  td[class="mob-hide"],
  span[class="mob-hide"],
  a[class="mob-hide"],
  img[class="mob-hide"] { display: none !important; }
  
  table[class="mob-show"],
  tr[class="mob-show"],
  td[class="mob-show"],
  span[class="mob-show"],
  a[class="mob-show"],
  img[class="mob-show"] {
    display: block !important;
    font-size: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: 999px !important;
    line-height: auto !important;
    padding: 0 !important;
    visibility: visible !important;
    mso-hide: none !important;
  }
}

class="mob-show" style="display: none; font-size: 0; width: 0; height: 0; max-height: 0; line-height: 0; padding: 0; visibility: hidden; mso-hide: all;"

css 中心绝对在视口中

中心绝对在视口中

div.html

<div id="centerme">
    Hello, world!
</div>

center_viewport.css

#centerme
{
    position: absolute;
    left: 50%;
    top: 50%;

    /* You must set a size manually */
    width: 100px;
    height: 50px;

    /* Set negative margins equal to half the size */
    margin-left: -50px;
    margin-top: -25px;
}

css CSS，mediaQueries：960grid mediaQueries

CSS，mediaQueries：960grid mediaQueries

style.css

/*********************
MEDIA QUERIES
*********************/

@media screen and (min-width: 100px) and (max-width: 760px) {
  .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{margin-left:10px;margin-right:10px}.alpha,.omega{margin-left:0;margin-right:0}.align_center,.align_right{text-align:left}

	.footer-right ul {
		margin: 0;
	}

	.nav li a {
	padding: 0px 9px;
	}

	.slidesjs-container {
		min-height: 795px;
	}

	.main-slider img {
		margin: 0;
	}


}

@media screen and (min-width: 761px) and (max-width: 980px) {
	body{min-width:720px}.container_12{margin-left:auto;margin-right:auto;width:720px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{display:inline;float:left;margin-left:10px;margin-right:10px}.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11{position:relative}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:40px}.container_12 .grid_2{width:100px}.container_12 .grid_3{width:160px}.container_12 .grid_4{width:220px}.container_12 .grid_5{width:280px}.container_12 .grid_6{width:340px}.container_12 .grid_7{width:400px}.container_12 .grid_8{width:460px}.container_12 .grid_9{width:520px}.container_12 .grid_10{width:580px}.container_12 .grid_11{width:640px}.container_12 .grid_12{width:700px}.container_12 .prefix_1{padding-left:60px}.container_12 .prefix_2{padding-left:120px}.container_12 .prefix_3{padding-left:180px}.container_12 .prefix_4{padding-left:240px}.container_12 .prefix_5{padding-left:300px}.container_12 .prefix_6{padding-left:360px}.container_12 .prefix_7{padding-left:420px}.container_12 .prefix_8{padding-left:480px}.container_12 .prefix_9{padding-left:540px}.container_12 .prefix_10{padding-left:600px}.container_12 .prefix_11{padding-left:660px}.container_12 .suffix_1{padding-right:60px}.container_12 .suffix_2{padding-right:120px}.container_12 .suffix_3{padding-right:180px}.container_12 .suffix_4{padding-right:240px}.container_12 .suffix_5{padding-right:300px}.container_12 .suffix_6{padding-right:360px}.container_12 .suffix_7{padding-right:420px}.container_12 .suffix_8{padding-right:480px}.container_12 .suffix_9{padding-right:540px}.container_12 .suffix_10{padding-right:600px}.container_12 .suffix_11{padding-right:660px}.container_12 .push_1{left:60px}.container_12 .push_2{left:120px}.container_12 .push_3{left:180px}.container_12 .push_4{left:240px}.container_12 .push_5{left:300px}.container_12 .push_6{left:360px}.container_12 .push_7{left:420px}.container_12 .push_8{left:480px}.container_12 .push_9{left:540px}.container_12 .push_10{left:600px}.container_12 .push_11{left:660px}.container_12 .pull_1{left:-60px}.container_12 .pull_2{left:-120px}.container_12 .pull_3{left:-180px}.container_12 .pull_4{left:-240px}.container_12 .pull_5{left:-300px}.container_12 .pull_6{left:-360px}.container_12 .pull_7{left:-420px}.container_12 .pull_8{left:-480px}.container_12 .pull_9{left:-540px}.container_12 .pull_10{left:-600px}.container_12 .pull_11{left:-660px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:before,.clearfix:after,.container_12:before,.container_12:after{content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0}.clearfix:after,.container_12:after{clear:both}.clearfix,.container_12{zoom:1}

	.footer-right ul {
		margin: 0;
	}

	.nav li a {
	padding: 0px 9px;
	}

	.footer-copyright ul li {
	margin-right: 6px;
	}

	.slidesjs-container {
		min-height: 405px;
	}

	.main-slider img {
		margin: 0;
	}



}

@media screen and (min-width: 981px) and (max-width: 2540px) {
	body{min-width:960px}.container_12{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{display:inline;float:left;margin-left:10px;margin-right:10px}.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11{position:relative}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_3{width:220px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_6{width:460px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_9{width:700px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_12 .grid_12{width:940px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_3{padding-left:240px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_6{padding-left:480px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_9{padding-left:720px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_3{padding-right:240px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_6{padding-right:480px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_9{padding-right:720px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_3{left:240px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_6{left:480px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_9{left:720px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_3{left:-240px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_6{left:-480px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_9{left:-720px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:before,.clearfix:after,.container_12:before,.container_12:after{content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0}.clearfix:after,.container_12:after{clear:both}.clearfix,.container_12{zoom:1}

	.footer-right ul {
		margin: 0;
	}

}