安科网

22个常用的css例子

zhouguizhi

zhouguizhi

2014-05-20

关注 关注

1.简单又好的 Blockquote 样式
CSS代码如下:

  1. blockquote {
  2. background:#f9f9f9;
  3. border-left:10px solid #ccc;
  4. margin:1.5em 10px;
  5. padding:.5em 10px;
  6. quotes:"\201C""\201D""\2018""\2019";
  7. }
  8. blockquote:before {
  9. color:#ccc;
  10. content:open-quote;
  11. font-size:4em;
  12. line-height:.1em;
  13. margin-right:.25em;
  14. vertical-align:-.4em;
  15. }
  16. blockquote p {
  17. display:inline;
  18. }
复制代码


2.图像在水平或者垂直方向的绝对定位

  1. img {
  2. position: absolute;
  3. top: 50%;
  4. left: 50%;
  5. width: 500px;
  6. height: 500px;
  7. margin-top: -250px; /* Half the height */
  8. margin-left: -250px; /* Half the width */
  9. }
复制代码


3.用PHP压缩CSS代码

  1. <?php
  2. ob_start ("ob_gzhandler");
  3. header("Content-type: text/css; charset: UTF-8");
  4. header("Cache-Control: must-revalidate");
  5. $offset = 60 * 60 ;
  6. $ExpStr = "Expires: " .
  7. gmdate("D, d M Y H:i:s",
  8. time() + $offset) . " GMT";
  9. header($ExpStr);
  10. ?>
  11. body { color: red; }
复制代码


4.如何用css实现小三角形符号
具体代码如下  首先是html代码

  1. <div class="arrow-up"></div>
  2. <div class="arrow-down"></div>
  3. <div class="arrow-left"></div>
  4. <div class="arrow-right"></div>
复制代码


css代码

  1. .arrow-up {
  2. width: 0; 
  3. height: 0; 
  4. border-left: 5px solid transparent;
  5. border-right: 5px solid transparent;
  6. border-bottom: 5px solid black;
  7. }
  8. .arrow-down {
  9. width: 0; 
  10. height: 0; 
  11. border-left: 20px solid transparent;
  12. border-right: 20px solid transparent;
  13. border-top: 20px solid #f00;
  14. }
  15. .arrow-right {
  16. width: 0; 
  17. height: 0; 
  18. border-top: 60px solid transparent;
  19. border-bottom: 60px solid transparent;
  20. border-left: 60px solid green;
  21. }
  22. .arrow-left {
  23. width: 0; 
  24. height: 0; 
  25. border-top: 10px solid transparent;
  26. border-bottom: 10px solid transparent; 
  27. border-right:10px solid blue; 
  28. }
复制代码


5.翻转图片

CSS代码

  1. img {
  2. -moz-transform: scaleX(-1);
  3. -o-transform: scaleX(-1);
  4. -webkit-transform: scaleX(-1);
  5. transform: scaleX(-1);
  6. filter: FlipH;
  7. -ms-filter: "FlipH";
  8. }
复制代码

6.Clearfix

  1. .clearfix:after {
  2. visibility: hidden;
  3. display: block;
  4. font-size: 0;
  5. content: " ";
  6. clear: both;
  7. height: 0;
  8. }
  9. .clearfix { display: inline-block; }
  10. /* start commented backslash hack \*/
  11. * html .clearfix { height: 1%; }
  12. .clearfix { display: block; }
  13. /* close commented backslash hack */
复制代码

7.在IE6中的固定定位

<ignore_js_op style="word-wrap: break-word; color: rgb(68, 68, 68); font-family: 微软雅黑, Tahoma, Helvetica, SimSun, sans-serif;">22个常用的css例子 

8.隐藏和文本文字缩进 

  1. h1 {
  2. text-indent:-9999px;
  3. margin:0 auto;
  4. width:400px;
  5. height:100px;
  6. background:transparent url("images/logo.jpg") no-repeat scroll;
  7. }
复制代码

上面CSS代码设置text-indent 为负值，正好文字移到了左边，可以实现部分文字隐藏

9.在iPad当中定位CSS代码

<ignore_js_op style="word-wrap: break-word; color: rgb(68, 68, 68); font-family: 微软雅黑, Tahoma, Helvetica, SimSun, sans-serif;">22个常用的css例子 

10.根据不同的文件类型，展示不同的链接，看下面的代码


  1. /* external links */
  2. a[href^="http://"]{
  3. padding-right: 20px;
  4. background: url(external.gif) no-repeat center right;
  5. }
  6. /* emails */
  7. a[href^="mailto:"]{
  8. padding-right: 20px;
  9. background: url(email.png) no-repeat center right;
  10. }
  11. /* pdfs */
  12. a[href$=".pdf"]{
  13. padding-right: 20px;
  14. background: url(pdf.png) no-repeat center right;
  15. }
复制代码

此代码段经常被用来增加用户体验的。经常在互联网上我们发现一些链接移动到上面的时候会显示不同的小图标。可以使用此代码段，你告诉用户是否它一个外部链接、 电子邮件、 pdf、或者其他图标

11.边框圆角

  1. .round{
  2. -moz-border-radius: 10px;
  3. -webkit-border-radius: 10px;
  4. border-radius: 10px; /* future proofing */
  5. -khtml-border-radius: 10px; /* for old Konqueror browsers */
  6. }
复制代码

12.去除textarea在IE当中的滚动条效果

  1. textarea{ 
  2. overflow:auto; 
  3. }
复制代码


13.使页面在中央

  1. .wrapper {
  2. width:960px;
  3. margin:0 auto;
  4. }
复制代码


14.CSS文字阴影效果

  1. p { text-shadow: 1px 1px 1px #000; }
复制代码

15.CSS透明度
一谈到透明度问题，这个真是令人头疼，明明在火狐和谷歌浏览器当中效果看到好好的，在IE当中浏览就变了味，好在可以通过下面的CSS代码解决

  1. .transparent {
  2. filter:alpha(opacity=50);
  3. -moz-opacity:0.5;
  4. -khtml-opacity: 0.5;
  5. opacity: 0.5;
  6. }
复制代码


16.垂直居中

  1. .container {
  2. min-height: 10em;
  3. display: table-cell;
  4. vertical-align: middle;
  5. }
复制代码


17.Min-height in IE

  1. .box {
  2. min-height:500px;
  3. height:auto !important;
  4. height:500px;
  5. }
复制代码


18.使gif图像可以来回蹦跳

<ignore_js_op style="word-wrap: break-word; color: rgb(68, 68, 68); font-family: 微软雅黑, Tahoma, Helvetica, SimSun, sans-serif;">22个常用的css例子 

19.打印分页符

  1. .page-break{
  2. page-break-before:always;
  3. }
复制代码


20.固定页脚位置

  1. #footer {
  2. position:fixed;
  3. left:0px;
  4. bottom:0px;
  5. height:32px;
  6. width:100%;
  7. background:#333;
  8. }
  9. /* IE 6 */
  10. * html #footer {
  11. position:absolute;
  12. 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');
  13. }
复制代码


21.文字旋转

  1. .rotate {
  2. /* Safari */
  3. -webkit-transform: rotate(-90deg);
  4. /* Firefox */
  5. -moz-transform: rotate(-90deg);
  6. /* IE */
  7. -ms-transform: rotate(-90deg);
  8. /* Opera */
  9. -o-transform: rotate(-90deg);
  10. /* Internet Explorer */
  11. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  12. }
复制代码


22.A链接伪类（按顺序）
CSS代码

  1. a:link {color: blue;}
  2. a:visited {color: purple;}
  3. a:hover {color: red;}
  4. a:active {color: yellow;}
复制代码


23.设置ul阴影效果和边框圆角
CSS代码如下

  1. ul.box {
  2. position: relative;
  3. z-index: 1; /* prevent shadows falling behind containers with backgrounds */
  4. overflow: hidden;
  5. list-style: none;
  6. margin: 0;
  7. padding: 0; }
  8. ul.box li {
  9. position: relative;
  10. float: left;
  11. width: 250px;
  12. height: 150px;
  13. padding: 0;
  14. border: 1px solid #efefef;
  15. margin: 0 30px 30px 0;
  16. background: #fff;
  17. -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  18. -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
  19. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }
  20. ul.box li:before,
  21. ul.box li:after {
  22. content: '';
  23. z-index: -1;
  24. position: absolute;
  25. left: 10px;
  26. bottom: 10px;
  27. width: 70%;
  28. max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
  29. max-height: 100px;
  30. height: 55%;
  31. -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  32. -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  33. box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  34. -webkit-transform: skew(-15deg) rotate(-6deg);
  35. -moz-transform: skew(-15deg) rotate(-6deg);
  36. -ms-transform: skew(-15deg) rotate(-6deg);
  37. -o-transform: skew(-15deg) rotate(-6deg);
  38. transform: skew(-15deg) rotate(-6deg); }
  39. ul.box li:after {
  40. left: auto;
  41. right: 10px;
  42. -webkit-transform: skew(15deg) rotate(6deg);
  43. -moz-transform: skew(15deg) rotate(6deg);
  44. -ms-transform: skew(15deg) rotate(6deg);
  45. -o-transform: skew(15deg) rotate(6deg);
  46. transform: skew(15deg) rotate(6deg); }
复制代码


24.图片预加载功能

<ignore_js_op style="word-wrap: break-word; color: rgb(68, 68, 68); font-family: 微软雅黑, Tahoma, Helvetica, SimSun, sans-serif;">22个常用的css例子 

25.设计梯子型文字

  1. h1 {
  2. font-size: 72px;
  3. background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
  4. -webkit-background-clip: text;
  5. -webkit-text-fill-color: transparent;
  6. }
复制代码


via:http://www.cnblogs.com/58top/archive/2012/07/20/2601686.html

css margin css样式

zhouguizhi

zhouguizhi

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

CSS知识点（三）

text-align:center:内容水平居中，可以让行内元素和行内块元素水平居中，不可以让块状元素居中。则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者?,这种现象被称为相邻块元素垂直外边距的合并。确定页

hellowzm 2020-08-18

css基础--盒子模型

1 绝大多数标签都可以看作盒子，可以设置宽高或设置内容；在CSS中，"box model"这一术语是用来设计和布局时使用。　　CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。　　盒模型允许我们

AlisaClass 2020-07-19

CSS元素选择器是怎样运作的？

在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏览器解析并套用。但是你想过没有这是如何实现的呢?CSS

jiedinghui 2020-10-25

CSS(Cascading Style Sheets)样式更改——过渡、动画

元素从一种样式逐渐改变为另一种的样式。cubic-bezier在cubic-bezie函数中定义自己的值，可能的值是0至1之间的数值

Ladyseven 2020-10-22

如何在Shadow DOM/Web组件中覆盖CSS

Web组件的主要目的之一是提供封装——能够隐藏HTML标记结构和CSS样式，并与页面上的其他代码分离，这样不同的部分就不会冲突，通过这种方式，这样代码就可以保持漂亮和干净。影子DOM为我们提供了范围限定的样式封装，并提供了一种让我们随意选择进入外界的方法。

zuncle 2020-09-28

使用这些不太常用的 CSS 属性，让我在前端布局效率上，又提高了一个层次！

有很多CSS属性，有些人不了解，或者他们了解它们，但是忘记在需要时使用它们。其实，有时候我们用 JavaScript 来实某些交互，CSS 一个属性就能搞定了，这可以大大节约我们编码的时间。作为前端开发人员，我们经常会遇到这样的事情。所以我问自己，为什么

xiaohuli 2020-09-02

16个非常有用的CSS伪选择器，你千万不要错过了！

熟悉所有的 CSS 是实现这个目标的一种方法 —— 另一种是实施最佳实践和尽可能的减少代码。这个伪元素选择器选择换行之前文本的首行。这个伪元素选择器应用于元素中文本的首字母。应用于任何被用户选中的高亮区域。在 HTML 中，为 HTML 元素。这个规则将应

葉無聞 2020-09-01

前端开发CSS清除浮动的方法有哪些？

在前端开发过程中，非IE浏览器下，当容器的高度自动，并且容器内容中有浮动元素，此时如果容器的高度不能自适应内容的高度，从而使得内容溢出破坏整体布局，这种现象叫做浮动溢出，为了方式这个现象的发生，就需要对CSS样式进行处理，而这个过程就叫做CSS清除浮动。现

nicepainkiller 2020-08-20

CSS动画实例：图文切换

先准备好一张图片，在页面中放置一个类名为container的层作为图文容器，在该层中再定义两个层：一个类名为image-box的层放置图片，一个类名为text-desc的层放置文本描述，HTML代码描述如下：。<p>黄鹤楼是国家首批AAAAA级

AlisaClass 2020-08-09

CSS盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素。该属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。如上图，出现了取两个值中的较大者的现象，即为相邻块元素垂直外边距的合并。这

myloveqiqi 2020-08-09

CSS选择器

应用于页面中的所有元素。匹配元素名称与选择器相似的元素。应用于<h1>元素，<h2>元素和<h3>元素。应用于所有class特性值为note的元素。匹配指定元素的后代元素。应用于所有位于<p>元素中的<

buttonChan 2020-08-02

JavaScript DOM 控制CSS

JavaScript更改P元素的样式：1.<html>2.<body>3.<p id="p2">Hello World!"red";6.</script>7.<p

drdrsky 2020-07-29

20个CSS快速提升技巧

本文涵盖了20个css技巧，可以解决许多工作中常见的问题。css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来

Ladyseven 2020-07-25

妙用CSS变量，让你的CSS变得更心动

「CSS变量」又叫「CSS自定义属性」，为什么会突然提起这个很少人用到的东西呢？因为最近在重构个人官网，不知道为什么突然喜欢用上「CSS变量」，可能其自身隐藏的魅力，让笔者对它刮目相看。谈到为什么会在CSS中使用变量，下面举个栗子，估计大家一看就会明白。看

nicepainkiller 2020-07-24

css 属性值 display

/* display: block; */ /* 浏览器默认样式 *//* display: inline; */ /* 设置为行内元素 *//* display: none; */ /* 隐藏元素不占空间 *//* display: inline-blo

hellowzm 2020-07-19

vue 对css样式进行修改

background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT

昔人已老 2020-07-19

CSS让页面平滑滚动

兼容情况可以点击这里查看。凡是需要滚动的地方都加一句scroll-behavior:smooth就好了！你别管他用不用得到，也不用管浏览器兼容性如何，你都加上。这就像一个不要钱的免费抽奖，没有中奖，没关系，又没什么损失，中奖了自然好，锦上添花！scroll

骆驼的自白 2020-07-18

CSS 伪元素的用法和使用详解

CSS伪元素是用来添加一些选择器的特殊效果。"first-line" 伪元素用于向文本的首行设置特殊样式。在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：。上

lanzhusiyu 2020-07-19

CSS便捷开发小工具汇总

虽然现代浏览器支持css3，但是一些过往的版本或是目前有些css3属性的应用还是离不开前缀的。一些牛逼且执着于web技术且乐于分享的仁兄就搞了个名叫prefixfree.js的插件可以自动补全前缀。首先在页面任意地方插入插件:. 但是其实部分我们要的想要的

hellowzm 2020-07-19

前端工程师面试题汇总-5

属于元素事件属性的是( )正确答案: A CA. onblurB. requiredC. onfocusD. onsearch. 关于link与@import的区别:区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@impo

CSSEIKOCS 2020-07-18
zhouguizhi

zhouguizhi

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号