zoukankan      html  css  js  c++  java
  • 收藏的 30 个CSS 代码段

    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. body {
    19. line-height: 1;
    20. }
    21. ol, ul {
    22. list-style: none;
    23. }
    24. blockquote, q {
    25. quotes: none;
    26. }
    27. blockquote:before, blockquote:after,
    28. q:before, q:after {
    29. content: '';
    30. content: none;
    31. }
    32. /* remember to define focus styles! */
    33. :focus {
    34. outline: 0;
    35. }
    36. /* remember to highlight inserts somehow! */
    37. ins {
    38. text-decoration: none;
    39. }
    40. del {
    41. text-decoration: line-through;
    42. }
    43. /* tables still need 'cellspacing="0"' in the markup */
    44. table {
    45. border-collapse: collapse;
    46. border-spacing: 0;
    47. }

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

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

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

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

    浏览器特定的 hacks

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

    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 */

    固定宽度且居中

    1. .wrapper {
    2. width:960px;
    3. margin:0auto;
    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:5px0 05px;
    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: 1pxsolid#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. /* 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. }

    更改内容区域的大小

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

    多背景图片

    1. #multiple-images {
    2. background: url(image_1.png) topleftno-repeat,
    3. url(image_2.png) bottomleftno-repeat,
    4. url(image_3.png) bottomrightno-repeat;
    5. }

    多列

    1. #columns-3 {
    2. text-align: justify;
    3. -moz-column-count: 3;
    4. -moz-column-gap: 12px;
    5. -moz-column-rule: 1pxsolid#c4c8cc;
    6. -webkit-column-count: 3;
    7. -webkit-column-gap: 12px;
    8. -webkit-column-rule: 1pxsolid#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. ::-moz-selection {
    6. color: #000000;
    7. background: #FF0000;
    8. }

    Box Shadow

    1. box-shadow: 0px3px3px rgba(0,0,0,0.2);
    2. -moz-box-shadow: 0px3px3px rgba(0,0,0,0.2);
    3. -webkit-box-shadow: 0px3px3px 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 1px0#ccc,
    3. 0 2px0#c9c9c9,
    4. 0 3px0#bbb,
    5. 0 4px0#b9b9b9,
    6. 0 5px0#aaa,
    7. 0 6px1px rgba(0,0,0,.1),
    8. 0 05px rgba(0,0,0,.1),
    9. 0 1px3px rgba(0,0,0,.3),
    10. 0 3px5px rgba(0,0,0,.2),
    11. 0 5px10px rgba(0,0,0,.25),
    12. 0 10px10px rgba(0,0,0,.2),
    13. 0 20px20px 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. }

     

     
  • 相关阅读:
    U-Learning服务端
    C# 向txt文件中写入
    二维码生成 Gma.QrCodeNet (目前测试支持.net4.0及以上,但vs版本2010不可以 NuGet中搜索不到程序包)
    数据显示按规格向datatable中增加空白记录
    sql server 查询出整数 (可灵活运用)
    sql server 列字段拼接 —— STUFF
    layui confirm 嵌套使用 (随笔记)
    sql server 随记 -- 月份/日期 查询
    SQL Server 数据库备份语句
    关于ScriptManager.RegisterStartupScript 摘录
  • 原文地址:https://www.cnblogs.com/jiangguang/p/2802898.html
Copyright © 2011-2022 走看看