zoukankan      html  css  js  c++  java

  • 常用的代码

    Css Reset by Eric Meyer

    1. html, body, div, span, applet, object, iframe, 
    2.  h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
    3.  a, abbr, acronym, address, big, cite, code, 
    4.  del, dfn, em, font, img, ins, kbd, q, s, samp, 
    5.  small, strike, strong, sub, sup, tt, var, 
    6.  b, u, i, center, 
    7.  dl, dt, dd, ol, ul, li, 
    8.  fieldset, form, label, legend, 
    9.  table, caption, tbody, tfoot, thead, tr, th, td { 
    10.      margin: 0; 
    11.      padding: 0; 
    12.      border: 0; 
    13.      outline: 0; 
    14.      font-size: 100%; 
    15.      vertical-align: baseline; 
    16.      background: transparent; 
    17.  } 
    18.   
    19.  body { 
    20.      line-height: 1; 
    21.  } 
    22.   
    23.  ol, ul { 
    24.      list-style: none; 
    25.  } 
    26.   
    27.  blockquote, q { 
    28.      quotes: none; 
    29.  } 
    30.   
    31.  blockquote:before, blockquote:after, 
    32.  q:before, q:after { 
    33.      content: ''; 
    34.      content: none; 
    35.  } 
    36.   
    37.  /* remember to define focus styles! */ 
    38.  :focus { 
    39.      outline: 0; 
    40.  } 
    41.   
    42.  /* remember to highlight inserts somehow! */ 
    43.  ins { 
    44.      text-decoration: none; 
    45.  } 
    46.   
    47.  del { 
    48.      text-decoration: line-through; 
    49.  } 
    50.   
    51.  /* tables still need 'cellspacing="0"' in the markup */ 
    52.  table { 
    53.      border-collapse: collapse; 
    54.      border-spacing: 0; 
    55.  } 

    根据文件格式显示不同的链接样式

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

    在IE浏览器删除textarea的滚动条

    1. textarea{ 
    2.      overflow:auto; 
    3.  } 

    浏览器特定的 hacks

    1. /* IE 6 */ 
    2.  * html .yourclass { } 
    3.   
    4.  /* IE 7 */ 
    5.  *+html .yourclass{ } 
    6.   
    7.  /* IE 7 and modern browsers */ 
    8.  html>body .yourclass { } 
    9.   
    10.  /* Modern browsers (not IE 7) */ 
    11.  html>/**/body .yourclass { } 
    12.   
    13.  /* Opera 9.27 and below */ 
    14.  html:first-child .yourclass { } 
    15.   
    16.  /* Safari */ 
    17.  html[xmlns*=""] body:last-child .yourclass { } 
    18.   
    19.  /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ 
    20.  body:nth-of-type(1) .yourclass { } 
    21.   
    22.  /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ 
    23.  body:first-of-type .yourclass {  } 
    24.   
    25.  /* Safari 3+, Chrome 1+ */ 
    26.  @media screen and (-webkit-min-device-pixel-ratio:0) { 
    27.   .yourclass  {  } 
    28.  } 

    Clearfix

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

    固定宽度且居中

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

    Rounded corners – border-radius

    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. } 

    伪元素向文本的第一个字母添加特殊样式

    1. p:first-letter{ 
    2.     display:block; 
    3.     margin:5px 0 0 5px; 
    4.     float:left; 
    5.     color:#000; 
    6.     font-size:60px; 
    7.     font-family:Georgia; 
    8.  } 

    使用 @fontface

    1. @font-face { 
    2.      font-family: 'MyFontFamily'; 
    3.      src: url('myfont-webfont.eot?') format('eot'), 
    4.           url('myfont-webfont.woff') format('woff'), 
    5.           url('myfont-webfont.ttf')  format('truetype'), 
    6.           url('myfont-webfont.svg#svgFontName') format('svg'); 
    7.      } 

    跨浏览器的inline-block

    1. li { 
    2.          width: 200px; 
    3.          min-height: 250px; 
    4.          border: 1px solid #000; 
    5.          display: -moz-inline-stack; 
    6.          display: inline-block; 
    7.          vertical-align: top; 
    8.          margin: 5px; 
    9.          zoom: 1; 
    10.          *display: inline; 
    11.          _height: 250px; 
    12.  } 

    Fixed Footer

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

    更改内容区域的大小

    1. #content { 
    2.     width: 100%; 
    3.     margin: 0; 
    4.     float: none; 
    5. } 

    CSS3 Media Queries （这个不常用主要用于智能设备的判断显示不同的媒体）

    1. /* Smartphones (portrait and landscape) ----------- */ 
    2.  @media only screen 
    3.  and (min-device-width : 320px) 
    4.  and (max-device-width : 480px) { 
    5.  /* Styles */ 
    6.  } 
    7.    
    8.  /* Smartphones (landscape) ----------- */ 
    9.  @media only screen 
    10.  and (min-width : 321px) { 
    11.  /* Styles */ 
    12.  } 
    13.    
    14.  /* Smartphones (portrait) ----------- */ 
    15.  @media only screen 
    16.  and (max-width : 320px) { 
    17.  /* Styles */ 
    18.  } 
    19.    
    20.  /* iPads (portrait and landscape) ----------- */ 
    21.  @media only screen 
    22.  and (min-device-width : 768px) 
    23.  and (max-device-width : 1024px) { 
    24.  /* Styles */ 
    25.  } 
    26.    
    27.  /* iPads (landscape) ----------- */ 
    28.  @media only screen 
    29.  and (min-device-width : 768px) 
    30.  and (max-device-width : 1024px) 
    31.  and (orientation : landscape) { 
    32.  /* Styles */ 
    33.  } 
    34.    
    35.  /* iPads (portrait) ----------- */ 
    36.  @media only screen 
    37.  and (min-device-width : 768px) 
    38.  and (max-device-width : 1024px) 
    39.  and (orientation : portrait) { 
    40.  /* Styles */ 
    41.  } 
    42.    
    43.  /* Desktops and laptops ----------- */ 
    44.  @media only screen 
    45.  and (min-width : 1224px) { 
    46.  /* Styles */ 
    47.  } 
    48.    
    49.  /* Large screens ----------- */ 
    50.  @media only screen 
    51.  and (min-width : 1824px) { 
    52.  /* Styles */ 
    53.  } 
    54.    
    55.  /* iPhone 4 ----------- */ 
    56.  @media 
    57.  only screen and (-webkit-min-device-pixel-ratio : 1.5), 
    58.  only screen and (min-device-pixel-ratio : 1.5) { 
    59.  /* Styles */ 
    60.  } 

    多背景图片

    1. #multiple-images { 
    2.    background: url(image_1.png) top left no-repeat, 
    3.    url(image_2.png) bottom left no-repeat, 
    4.    url(image_3.png) bottom right no-repeat; 
    5. } 

    多列

    1. #columns-3 { 
    2.     text-align: justify; 
    3.     -moz-column-count: 3; 
    4.     -moz-column-gap: 12px; 
    5.     -moz-column-rule: 1px solid #c4c8cc; 
    6.     -webkit-column-count: 3; 
    7.     -webkit-column-gap: 12px; 
    8.     -webkit-column-rule: 1px solid #c4c8cc; 
    9.  } 

    在IE的最小高度

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

    突出显示文本样式

    1. ::selection { 
    2.     color: #000000; 
    3.     background-color: #FF0000; 
    4.  } 
    5.   
    6.  ::-moz-selection { 
    7.     color: #000000; 
    8.     background: #FF0000; 
    9.  } 

    Box Shadow

    1. box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 
    2. -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 
    3. -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 

    占位符文本样式

    1. ::-webkit-input-placeholder { color: #ccc; font-style:italic } 
    2. :-moz-placeholder           { color: #ccc; font-style:italic } 

    CSS3 3D文字效果

    1. h1 { 
    2.    text-shadow: 0 1px 0 #ccc, 
    3.                 0 2px 0 #c9c9c9, 
    4.                 0 3px 0 #bbb, 
    5.                 0 4px 0 #b9b9b9, 
    6.                 0 5px 0 #aaa, 
    7.                 0 6px 1px rgba(0,0,0,.1), 
    8.                 0 0 5px rgba(0,0,0,.1), 
    9.                 0 1px 3px rgba(0,0,0,.3), 
    10.                 0 3px 5px rgba(0,0,0,.2), 
    11.                 0 5px 10px rgba(0,0,0,.25), 
    12.                 0 10px 10px rgba(0,0,0,.2), 
    13.                 0 20px 20px rgba(0,0,0,.15); 
    14.  } 

    WebKit的边界半径修正

    1. -webkit-background-clip: padding-box; 

    XBrowser的border-radius（CSS3PIE）

    1. .roundbox { 
    2.  -moz-border-radius:8px; 
    3.  -webkit-border-radius:8px; 
    4.  -khtml-border-radius:8px; 
    5.  border-radius:8px; 
    6.  behavior: url(/PIE.htc); 
    7.  } 
  • 相关阅读:
    Linux 磁盘管理
    Linux 特殊权限及if语句
    Linux find命令
    MySQL索引知识介绍
    MySQL库表设计小技巧
    教你用SQL实现统计排名
    Truncate用法详解
    utf8字符集下的比较规则
    关于Aborted connection告警日志的分析
    MySQL DDL详情揭露
  • 原文地址：https://www.cnblogs.com/yanypan/p/2851232.html
Copyright © 2011-2022 走看看