johnny710vip
johnny710vip

解读Blueprint CSS framework

例子文件:Sample.html              http://www.blueprintcss.org/tests/parts/sample.html

<link rel="stylesheet" href="../../blueprint/screen.css" type="text/css" media="screen, projection">

这个文件将所有的CSS文件合并到一起，减少了并发连接数。

一共包含了以下几个CSS

/* reset.css */

/* typography.css */

/* forms.css */

/* grid.css */

此外，如果是IE8以下版本则包含/* ie.css */

  作者的注释已经很清晰了，代码也很清晰。跟着我一起理解一遍即可。

CSS代码
  1. /* --------------------------------------------------------------   
  2.     
  3.    reset.css  
  4.    * Resets default browser CSS.  
  5.      
  6. -------------------------------------------------------------- */  
  7. /*原文作者注释已经很清晰了*/  
  8.   
  9.   
  10. html, body, div, span, object, iframe,   
  11. h1, h2, h3, h4, h5, h6, p, blockquote, pre,   
  12. a, abbr, acronym, address, code,   
  13. del, dfn, em, img, q, dl, dt, dd, ol, ul, li,   
  14. fieldset, form, label, legend,   
  15. table, caption, tbody, tfoot, thead, tr, th, td {   
  16.   margin: 0;   
  17.   padding: 0;   
  18.   border: 0;   
  19.   font-weight: inherit;   
  20.   font-style: inherit;   
  21.   font-size: 100%;   
  22.   font-family: inherit;   
  23.   vertical-align: baselinebaseline;   
  24. }   
  25. /*行高1.5，也就是150%,刚看了淘宝UED的碳酸饮料会杂志，上面有介绍*/  
  26. body {    
  27.   line-height: 1.5;    
  28. }   
  29.   
  30. /* Tables still need 'cellspacing="0"' in the markup. */  
  31. table { border-collapse: separate; border-spacing: 0; }   
  32. caption, th, td { text-align: left; font-weight: normal; }   
  33. /*垂直居中*/  
  34. table, td, th { vertical-align: middle; }   
  35.   
  36. /* Remove possible quote marks (") from <q>, <blockquote>. */  
  37. blockquote:before, blockquote:after, q:before, q:after { content: ""; }  
  38. blockquote, q { quotes: "" ""; }   
  39.   
  40. /* 链接内加图片，会有一个难看的border */  
  41. a img { border: none; }   

 

CSS代码
  1. /* --------------------------------------------------------------   
  2.  
  3.    typography.css  
  4.    * Sets up some sensible default typography.  
  5.      
  6.    typography == 文字排版  
  7.      
  8. -------------------------------------------------------------- */  
  9.   
  10. /* Default font settings.   
  11.    The font-size percentage is of 16px. (0.75 * 16px = 12px) 默认12像素  
  12.    */  
  13. body {    
  14.   font-size: 75%;   
  15.   color: #222;    
  16.   background: #fff;   
  17.   font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;   
  18. }   
  19.   
  20.   
  21. /* Headings  
  22. -------------------------------------------------------------- */  
  23.   
  24. /*不加粗,非纯黑(将更美观)*/  
  25. h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }   
  26.   
  27. h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }   
  28. h2 { font-size: 2em; margin-bottom: 0.75em; }   
  29. h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }   
  30. h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }   
  31. /*H5 H6的字体和正文已经一样了，所以要加粗*/  
  32. h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }   
  33. h6 { font-size: 1em; font-weight: bold; }   
  34.   
  35. h1 img, h2 img, h3 img,    
  36. h4 img, h5 img, h6 img {   
  37.   margin: 0;   
  38. }   
  39.   
  40.   
  41. /* Text elements  
  42. -------------------------------------------------------------- */  
  43.   
  44. p           { margin: 0 0 1.5em; }   
  45. p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }   
  46. p img.rightright { float: rightright; margin: 1.5em 0 1.5em 1.5em; }   
  47.   
  48. a:focus,    
  49. a:hover     { color: #000; }   
  50. a           { color: #009; text-decoration: underline; }   
  51.   
  52. blockquote  { margin: 1.5em; color: #666; font-style: italic; }   
  53. strong      { font-weight: bold; }   
  54. em,dfn      { font-style: italic; }   
  55. dfn         { font-weight: bold; }   
  56. sup, sub    { line-height: 0; }   
  57.   
  58. abbr,    
  59. acronym     { border-bottom: 1px dotted #666; }   
  60. address     { margin: 0 0 1.5em; font-style: italic; }   
  61. del         { color:#666; }   
  62.   
  63. pre                 { margin: 1.5em 0; whitewhite-space: pre; }   
  64. /*代码用等宽字体*/  
  65. pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }   
  66.   
  67.   
  68. /* Lists  
  69. -------------------------------------------------------------- */  
  70.   
  71. /*和平时的做法不一样,常用的ul li是有margin的，并保留list-style*/  
  72. li ul,    
  73. li ol       { margin:0 1.5em; }   
  74. ul, ol      { margin: 0 1.5em 1.5em 1.5em; }   
  75.   
  76. ul          { list-style-type: disc; }   
  77. ol          { list-style-type: decimal; }   
  78.   
  79. dl          { margin: 0 0 1.5em 0; }   
  80. dl dt       { font-weight: bold; }   
  81. dd          { margin-left: 1.5em;}   
  82.   
  83.   
  84. /* Tables  
  85. -------------------------------------------------------------- */  
  86. /*表格头加粗加背景，效果应该不错*/  
  87. table       { margin-bottom: 1.4em; width:100%; }   
  88. th          { font-weight: bold; }   
  89. thead th        { background: #c3d9ff; }   
  90. th,td,caption { padding: 4px 10px 4px 5px; }   
  91. tr.even td  { background: #e5ecf9; }   
  92. tfoot       { font-style: italic; }   
  93. caption     { background: #eee; }   
  94.   
  95.   
  96. /* Misc classes  
  97. -------------------------------------------------------------- */  
  98.   
  99. .small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }   
  100. .large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }   
  101. .hide       { display: none; }   
  102.   
  103. .quiet      { color: #666; }   
  104. .loud       { color: #000; }   
  105. .highlight  { background:#ff0; }   
  106. .added      { background:#060; color: #fff; }   
  107. .removed    { background:#900; color: #fff; }   
  108.   
  109. .first      { margin-left:0; padding-left:0; }   
  110. .last       { margin-right:0; padding-right:0; }   
  111. .top        { margin-top:0; padding-top:0; }   
  112. .bottombottom     { margin-bottom:0; padding-bottom:0; }   

 

表单

CSS代码
  1. /* --------------------------------------------------------------   
  2.  
  3.    forms.css  
  4.    * Sets up some default styling for forms  
  5.    * Gives you classes to enhance your forms  
  6.      
  7.    Usage:  
  8.    * For text fields, use class .title or .text  
  9.    * For inline forms, use .inline (even when using columns)  
  10.      
  11. -------------------------------------------------------------- */  
  12.   
  13. label       { font-weight: bold; }   
  14. fieldset    { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }   
  15. legend      { font-weight: bold; font-size:1.2em; }   
  16.   
  17.   
  18. /* Form fields  
  19. -------------------------------------------------------------- */  
  20. /*这种方式的selector不错*/  
  21. input[type=text], input[type=password],   
  22. input.text, input.title,    
  23. textarea, select {    
  24.   background-color:#fff;    
  25.   border:1px solid #bbb;    
  26. }   
  27. /*获取到焦点时改变边框颜色，不用JS就能实现，很实用*/  
  28. input[type=text]:focus, input[type=password]:focus,    
  29. input.text:focus, input.title:focus,    
  30. textarea:focus, select:focus {    
  31.   border-color:#666;    
  32. }   
  33.   
  34. input[type=text], input[type=password],   
  35. input.text, input.title,   
  36. textarea, select {   
  37.   margin:0.5em 0;   
  38. }   
  39.   
  40. input.text,    
  41. input.title   { width: 300px; padding:5px; }   
  42. input.title   { font-size:1.5em; }   
  43. textarea      { width: 390px; height: 250px; padding:5px; }   
  44. /*修正checkbox和radio的位置*/  
  45. input[type=checkbox], input[type=radio],    
  46. input.checkbox, input.radio {    
  47.   position:relative; top:.25em;    
  48. }   
  49.   
  50. form.inline { line-height:3; }   
  51. form.inline p { margin-bottom:0; }   
  52.   
  53.   
  54. /* Success, notice and error boxes  
  55. -------------------------------------------------------------- */  
  56.   
  57. .error,   
  58. .notice,    
  59. .success    { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }   
  60.   
  61. .error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }   
  62. .notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }   
  63. .success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }   
  64. .error a    { color: #8a1f11; }   
  65. .notice a   { color: #514721; }   
  66. .success a  { color: #264409; }  

 

 

CSS代码
  1.   
  2. /* --------------------------------------------------------------  
  3.  
  4.     grid.css  
  5.     * Sets up an easy-to-use grid of 24 columns.  
  6.       
  7.     By default, the grid is 950px wide, with 24 columns  
  8.     spanning 30px, and a 10px margin between columns.  
  9.       
  10.     If you need fewer or more columns, namespaces or semantic  
  11.     element names, use the compressor script (lib/compress.rb)  
  12.       
  13.     Note: Changes made in this file will not be applied when  
  14.     using the compressor: make changes in lib/blueprint/grid.css.rb  
  15.       
  16. -------------------------------------------------------------- */  
  17.   
  18. /* A container should group all your columns.   
  19. 容器宽950,居中  
  20. */  
  21. .container {   
  22.   width: 950px;   
  23.   margin: 0 auto;   
  24. }   
  25.   
  26. /* Use this class on any div.span / container to see the grid.   
  27. 显示grid  
  28. */  
  29. .showgrid {    
  30.   background: url(src/grid.png);    
  31. }   
  32.   
  33.   
  34. /* Columns  
  35. -------------------------------------------------------------- */  
  36.   
  37. /* Sets up basic grid floating and margin.   
  38. DIV需要float才能排一行  
  39. */  
  40. .column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {   
  41.   float: left;   
  42.   margin-right: 10px;   
  43. }   
  44.   
  45. /* The last column in a row needs this class.   
  46. 右侧的column需要将右边距调为0  
  47. */  
  48. .last, div.last { margin-right: 0; }   
  49.   
  50. /* Use these classes to set the width of a column.   
  51. 最重要的部分,.span-x,为容器占用的column数  
  52. */  
  53. .span-1 {width: 30px;}   
  54.   
  55. .span-2 {width: 70px;}   
  56. .span-3 {width: 110px;}   
  57. .span-4 {width: 150px;}   
  58. .span-5 {width: 190px;}   
  59. .span-6 {width: 230px;}   
  60. .span-7 {width: 270px;}   
  61. .span-8 {width: 310px;}   
  62. .span-9 {width: 350px;}   
  63. .span-10 {width: 390px;}   
  64. .span-11 {width: 430px;}   
  65. .span-12 {width: 470px;}   
  66. .span-13 {width: 510px;}   
  67. .span-14 {width: 550px;}   
  68. .span-15 {width: 590px;}   
  69. .span-16 {width: 630px;}   
  70. .span-17 {width: 670px;}   
  71. .span-18 {width: 710px;}   
  72. .span-19 {width: 750px;}   
  73. .span-20 {width: 790px;}   
  74. .span-21 {width: 830px;}   
  75. .span-22 {width: 870px;}   
  76. .span-23 {width: 910px;}   
  77. .span-24, div.span-24 { width:950px; margin:0; }   
  78.   
  79. /* Use these classes to set the width of an input. */  
  80. input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {   
  81.   border-left-width: 1px!important;   
  82.   border-right-width: 1px!important;   
  83.   padding-left: 5px!important;   
  84.   padding-right: 5px!important;   
  85. }   
  86.   
  87. input.span-1, textarea.span-1 { width: 18px!important; }   
  88. input.span-2, textarea.span-2 { width: 58px!important; }   
  89. input.span-3, textarea.span-3 { width: 98px!important; }   
  90. input.span-4, textarea.span-4 { width: 138px!important; }   
  91. input.span-5, textarea.span-5 { width: 178px!important; }   
  92. input.span-6, textarea.span-6 { width: 218px!important; }   
  93. input.span-7, textarea.span-7 { width: 258px!important; }   
  94. input.span-8, textarea.span-8 { width: 298px!important; }   
  95. input.span-9, textarea.span-9 { width: 338px!important; }   
  96. input.span-10, textarea.span-10 { width: 378px!important; }   
  97. input.span-11, textarea.span-11 { width: 418px!important; }   
  98. input.span-12, textarea.span-12 { width: 458px!important; }   
  99. input.span-13, textarea.span-13 { width: 498px!important; }   
  100. input.span-14, textarea.span-14 { width: 538px!important; }   
  101. input.span-15, textarea.span-15 { width: 578px!important; }   
  102. input.span-16, textarea.span-16 { width: 618px!important; }   
  103. input.span-17, textarea.span-17 { width: 658px!important; }   
  104. input.span-18, textarea.span-18 { width: 698px!important; }   
  105. input.span-19, textarea.span-19 { width: 738px!important; }   
  106. input.span-20, textarea.span-20 { width: 778px!important; }   
  107. input.span-21, textarea.span-21 { width: 818px!important; }   
  108. input.span-22, textarea.span-22 { width: 858px!important; }   
  109. input.span-23, textarea.span-23 { width: 898px!important; }   
  110. input.span-24, textarea.span-24 { width: 938px!important; }   
  111.   
  112. /* Add these to a column to append empty cols.   
  113. 这个想法很有意思，可以提高了重用度  
  114. */  
  115.   
  116. .append-1 { padding-right: 40px;}   
  117. .append-2 { padding-right: 80px;}   
  118. .append-3 { padding-right: 120px;}   
  119. .append-4 { padding-right: 160px;}   
  120. .append-5 { padding-right: 200px;}   
  121. .append-6 { padding-right: 240px;}   
  122. .append-7 { padding-right: 280px;}   
  123. .append-8 { padding-right: 320px;}   
  124. .append-9 { padding-right: 360px;}   
  125. .append-10 { padding-right: 400px;}   
  126. .append-11 { padding-right: 440px;}   
  127. .append-12 { padding-right: 480px;}   
  128. .append-13 { padding-right: 520px;}   
  129. .append-14 { padding-right: 560px;}   
  130. .append-15 { padding-right: 600px;}   
  131. .append-16 { padding-right: 640px;}   
  132. .append-17 { padding-right: 680px;}   
  133. .append-18 { padding-right: 720px;}   
  134. .append-19 { padding-right: 760px;}   
  135. .append-20 { padding-right: 800px;}   
  136. .append-21 { padding-right: 840px;}   
  137. .append-22 { padding-right: 880px;}   
  138. .append-23 { padding-right: 920px;}   
  139.   
  140. /* Add these to a column to prepend empty cols. */  
  141.   
  142. .prepend-1 { padding-left: 40px;}   
  143. .prepend-2 { padding-left: 80px;}   
  144. .prepend-3 { padding-left: 120px;}   
  145. .prepend-4 { padding-left: 160px;}   
  146. .prepend-5 { padding-left: 200px;}   
  147. .prepend-6 { padding-left: 240px;}   
  148. .prepend-7 { padding-left: 280px;}   
  149. .prepend-8 { padding-left: 320px;}   
  150. .prepend-9 { padding-left: 360px;}   
  151. .prepend-10 { padding-left: 400px;}   
  152. .prepend-11 { padding-left: 440px;}   
  153. .prepend-12 { padding-left: 480px;}   
  154. .prepend-13 { padding-left: 520px;}   
  155. .prepend-14 { padding-left: 560px;}   
  156. .prepend-15 { padding-left: 600px;}   
  157. .prepend-16 { padding-left: 640px;}   
  158. .prepend-17 { padding-left: 680px;}   
  159. .prepend-18 { padding-left: 720px;}   
  160. .prepend-19 { padding-left: 760px;}   
  161. .prepend-20 { padding-left: 800px;}   
  162. .prepend-21 { padding-left: 840px;}   
  163. .prepend-22 { padding-left: 880px;}   
  164. .prepend-23 { padding-left: 920px;}   
  165.   
  166.   
  167. /* Border on right hand side of a column.  
  168. 右侧的border,此外还会加右边距和右补白  
  169.  */  
  170. div.border {   
  171.   padding-right: 4px;   
  172.   margin-right: 5px;   
  173.   border-right: 1px solid #eee;   
  174. }   
  175.   
  176. /* Border with more whitespace, spans one column.  
  177. 比border空的更多 */  
  178. div.colborder {   
  179.   padding-right: 24px;   
  180.   margin-right: 25px;   
  181.   border-right: 1px solid #eee;   
  182. }   
  183.   
  184.   
  185. /* Use these classes on an element to push it into the   
  186. next column, or to pull it into the previous column.    
  187. 可以把元素拉回上一行或者推入下一行  
  188. */  
  189.   
  190.   
  191. .pull-1 { margin-left: -40px; }   
  192. .pull-2 { margin-left: -80px; }   
  193. .pull-3 { margin-left: -120px; }   
  194. .pull-4 { margin-left: -160px; }   
  195. .pull-5 { margin-left: -200px; }   
  196. .pull-6 { margin-left: -240px; }   
  197. .pull-7 { margin-left: -280px; }   
  198. .pull-8 { margin-left: -320px; }   
  199. .pull-9 { margin-left: -360px; }   
  200. .pull-10 { margin-left: -400px; }   
  201. .pull-11 { margin-left: -440px; }   
  202. .pull-12 { margin-left: -480px; }   
  203. .pull-13 { margin-left: -520px; }   
  204. .pull-14 { margin-left: -560px; }   
  205. .pull-15 { margin-left: -600px; }   
  206. .pull-16 { margin-left: -640px; }   
  207. .pull-17 { margin-left: -680px; }   
  208. .pull-18 { margin-left: -720px; }   
  209. .pull-19 { margin-left: -760px; }   
  210. .pull-20 { margin-left: -800px; }   
  211. .pull-21 { margin-left: -840px; }   
  212. .pull-22 { margin-left: -880px; }   
  213. .pull-23 { margin-left: -920px; }   
  214. .pull-24 { margin-left: -960px; }   
  215.   
  216. .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float: left; position:relative;}   
  217.   
  218. /*左右用像素,上下用相对定位*/  
  219. .push-1 { margin: 0 -40px 1.5em 40px; }   
  220. .push-2 { margin: 0 -80px 1.5em 80px; }   
  221. .push-3 { margin: 0 -120px 1.5em 120px; }   
  222. .push-4 { margin: 0 -160px 1.5em 160px; }   
  223. .push-5 { margin: 0 -200px 1.5em 200px; }   
  224. .push-6 { margin: 0 -240px 1.5em 240px; }   
  225. .push-7 { margin: 0 -280px 1.5em 280px; }   
  226. .push-8 { margin: 0 -320px 1.5em 320px; }   
  227. .push-9 { margin: 0 -360px 1.5em 360px; }   
  228. .push-10 { margin: 0 -400px 1.5em 400px; }   
  229. .push-11 { margin: 0 -440px 1.5em 440px; }   
  230. .push-12 { margin: 0 -480px 1.5em 480px; }   
  231. .push-13 { margin: 0 -520px 1.5em 520px; }   
  232. .push-14 { margin: 0 -560px 1.5em 560px; }   
  233. .push-15 { margin: 0 -600px 1.5em 600px; }   
  234. .push-16 { margin: 0 -640px 1.5em 640px; }   
  235. .push-17 { margin: 0 -680px 1.5em 680px; }   
  236. .push-18 { margin: 0 -720px 1.5em 720px; }   
  237. .push-19 { margin: 0 -760px 1.5em 760px; }   
  238. .push-20 { margin: 0 -800px 1.5em 800px; }   
  239. .push-21 { margin: 0 -840px 1.5em 840px; }   
  240. .push-22 { margin: 0 -880px 1.5em 880px; }   
  241. .push-23 { margin: 0 -920px 1.5em 920px; }   
  242. .push-24 { margin: 0 -960px 1.5em 960px; }   
  243.   
  244. .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float: rightright; position:relative;}   
  245.   
  246.   
  247. /* Misc classes and elements  
  248. -------------------------------------------------------------- */  
  249.   
  250. /* In case you need to add a gutter above/below an element */  
  251. .prepend-top {    
  252.   margin-top:1.5em;    
  253. }   
  254. .append-bottombottom {    
  255.   margin-bottom:1.5em;    
  256. }   
  257.   
  258. /* Use a .box to create a padded box inside a column.  */    
  259. .box {    
  260.   padding: 1.5em;    
  261.   margin-bottom: 1.5em;    
  262.   background: #E5ECF9;    
  263. }   
  264.   
  265. /* Use this to create a horizontal ruler across a column. */  
  266. hr {   
  267.   background: #ddd;    
  268.   color: #ddd;   
  269.   clear: both;    
  270.   float: none;    
  271.   width: 100%;    
  272.   height: .1em;   
  273.   margin: 0 0 1.45em;   
  274.   border: none;    
  275. }   
  276. hr.space {   
  277.   background: #fff;   
  278.   color: #fff;   
  279. }   
  280.   
  281.   
  282. /* Clearing floats without extra markup  
  283.    Based on How To Clear Floats Without Structural Markup by PiE  
  284.    [http://www.positioniseverything.net/easyclearing.html] */  
  285.   
  286. .clearfix:after, .container:after {   
  287.   content: "\0020";    
  288.   display: block;    
  289.   height: 0;    
  290.   clear: both;    
  291.   visibility: hidden;   
  292.   overflow:hidden;    
  293. }   
  294. .clearfix, .container {display: block;}   
  295.   
  296. /* Regular clearing  
  297.    apply to column that should drop below previous ones. */  
  298.   
  299. .clear { clear:both; }   

 

 

CSS代码
  1. /* --------------------------------------------------------------   
  2.      
  3.    ie.css  
  4.      
  5.    Contains every hack for Internet Explorer,  
  6.    so that our core files stay sweet and nimble.  
  7.      
  8.      
  9.    IE问题集  - -  
  10.    可以解决好多莫名其妙的IE兼容性问题  
  11. -------------------------------------------------------------- */  
  12.   
  13. /* Make sure the layout is centered in IE5   
  14. 兼容IE5...*/  
  15. body { text-align: center; }   
  16. .container { text-align: left; }   
  17.   
  18. /* Fixes IE margin bugs */  
  19. * html .column, * html div.span-1, * html div.span-2,    
  20. * html div.span-3, * html div.span-4, * html div.span-5,    
  21. * html div.span-6, * html div.span-7, * html div.span-8,    
  22. * html div.span-9, * html div.span-10, * html div.span-11,    
  23. * html div.span-12, * html div.span-13, * html div.span-14,    
  24. * html div.span-15, * html div.span-16, * html div.span-17,    
  25. * html div.span-18, * html div.span-19, * html div.span-20,    
  26. * html div.span-21, * html div.span-22, * html div.span-23,    
  27. * html div.span-24 { overflow-x: hidden; }   
  28.   
  29.   
  30. /* Elements  
  31. -------------------------------------------------------------- */  
  32.   
  33. /* Fixes incorrect styling of legend in IE6. */  
  34. * html legend { margin:0px -8px 16px 0; padding:0; }   
  35.   
  36. /* Fixes incorrect placement of ol numbers in IE6/7. */  
  37. ol { margin-left:2em; }   
  38.   
  39. /* Fixes wrong line-height on sup/sub in IE. */  
  40. sup { vertical-align: text-top; }   
  41. sub { vertical-align: text-bottom; }   
  42.   
  43. /* Fixes IE7 missing wrapping of code elements. */  
  44. html>body p code { *whitewhite-space: normal; }    
  45.   
  46. /* IE 6&7 has problems with setting proper <hr> margins. */  
  47. hr  { margin: -8px auto 11px; }   
  48.   
  49. /* Explicitly set interpolation, allowing dynamically resized images to not look horrible */  
  50. img { -ms-interpolation-mode: bicubic; }   
  51.   
  52. /* Clearing   
  53. -------------------------------------------------------------- */  
  54.   
  55. /* Makes clearfix actually work in IE */    
  56. .clearfix, .container {display: inline-block;}   
  57. * html .clearfix,   
  58. * html .container {height: 1%;}   
  59.   
  60.   
  61. /* Forms   
  62. -------------------------------------------------------------- */  
  63.   
  64. /* Fixes padding on fieldset */  
  65. fieldset {padding-top: 0;}   
  66.   
  67. /* Fixes rule that IE 6 ignores */  
  68. input.text, input.title {background-color:#fff;border:1px solid #bbb;}   
  69. input.text:focus, input.title:focus {border-color:#666;}   
  70. input.text, input.title, textarea, select {margin:0.5em 0;}   
  71. input.checkbox, input.radio {position:relative; top:.25em;}   
  72.   
  73. /* Fixes alignment of inline form elements */    
  74. form.inline div, form.inline p {vertical-align:middle;}   
  75. form.inline label {position:relative;top:-0.25em;}   
  76. form.inline input.checkbox, form.inline input.radio,   
  77. form.inline input.button, form.inline button {    
  78.   margin:0.5em 0;    
  79. }   
  80. button, input.button {position:relative;top:0.25em;}  

 

为打印作优化

 

CSS代码
  1. /* --------------------------------------------------------------   
  2.  
  3.    print.css  
  4.    * Gives you some sensible styles for printing pages.  
  5.    * See Readme file in this directory for further instructions.  
  6.         
  7.    Some additions you'll want to make, customized to your markup:  
  8.    #header, #footer, #navigation { display:none; }  
  9.      
  10. -------------------------------------------------------------- */  
  11.   
  12. body {   
  13.   line-height: 1.5;   
  14.   font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;   
  15.   color:#000;   
  16.   background: none;   
  17.   font-size: 10pt;   
  18. }   
  19.   
  20.   
  21. /* Layout  
  22. -------------------------------------------------------------- */  
  23. /*除去背景*/  
  24. .container {   
  25.   background: none;   
  26. }   
  27. /*加深水平线*/  
  28. hr {    
  29.   background:#ccc;    
  30.   color:#ccc;   
  31.   width:100%;   
  32.   height:2px;   
  33.   margin:2em 0;   
  34.   padding:0;   
  35.   border:none;   
  36. }   
  37. hr.space {   
  38.   background: #fff;   
  39.   color: #fff;   
  40. }   
  41.   
  42.   
  43. /* Text  
  44. -------------------------------------------------------------- */  
  45. /*这样的字体在印刷物上更清晰*/  
  46. h1,h2,h3,h4,h5,h6 { font-family: "Helvetica Neue", Arial, "Lucida Grande", sans-serif; }   
  47. code { font:.9em "Courier New", Monaco, Courier, monospace; }    
  48.   
  49. img { float:left; margin:1.5em 1.5em 1.5em 0; }   
  50. a img { border:none; }   
  51. p img.top { margin-top: 0; }   
  52.   
  53. blockquote {   
  54.   margin:1.5em;   
  55.   padding:1em;   
  56.   font-style:italic;   
  57.   font-size:.9em;   
  58. }   
  59.   
  60. .small  { font-size: .9em; }   
  61. .large  { font-size: 1.1em; }   
  62. .quiet  { color: #999; }   
  63. .hide   { display:none; }   
  64.   
  65.   
  66. /* Links  
  67. -------------------------------------------------------------- */  
  68. /*为链接加下划线*/  
  69. a:link, a:visited {   
  70.   background: transparent;   
  71.   font-weight:700;   
  72.   text-decoration: underline;   
  73. }   
  74. /*显示链接的链接地址*/  
  75. a:link:after, a:visited:after {   
  76.   content: " (" attr(href) ")";   
  77.   font-size: 90%;   
  78. }   
  79.   
  80. /* If you're having trouble printing relative links, uncomment and customize this:  
  81.    (note: This is valid CSS3, but it still won't go through the W3C CSS Validator)   
  82.     显示绝对地址  
  83.     但是不能通过W3C校验  
  84. */  
  85. /* a[href^="/"]:after {  
  86.   content: " (http://www.yourdomain.com" attr(href) ") ";  
  87. } */  

你可能感兴趣的:(解读Blueprint CSS framework)

  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • 读书||陶新华《教育中的积极心理学》1—28 流水淙淙2022
    读一本好书，尤如和一位高尚者对话，亦能对人的精神进行洗礼。但是若不能和实践结合起来，也只能落到空读书的状态。读书摘要与感想1、塞利格曼在《持续的幸福》一书中提出了幸福2.0理论，提出幸福由5个元素决定——积极情绪、投入的工作和生活、目标和意义、和谐的人际关系、成就感。2、人的大脑皮层在进行智力活动时，都伴有皮下中枢活动，对这些活动进行体验请假，并由此产生了情感解读。人的情绪情感体验总是优先于大脑的
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • Spring Boot中实现跨域请求 BABA8891 springboot后端java
    在SpringBoot中实现跨域请求（CORS，Cross-OriginResourceSharing）可以通过多种方式，以下是几种常见的方法：1.使用@CrossOrigin注解在SpringBoot中，你可以在控制器或者具体的请求处理方法上使用@CrossOrigin注解来允许跨域请求。在控制器上应用：importorg.springframework.web.bind.annotation.
  • 樊登读书人是如何学习的？ 恒如止水
    2021年11月10号早晨听书。这本书听完樊登老师的解读后，我觉得有必要自己好好的复盘写下来，真正想写的时候才发现我记住的没多少，那就按照叶武斌老师的说法，烂开始好结果，能记下多少复述多少，写下自己的感悟。人是如何学习的呢？第一点蝌蚪和鱼的故事，当蝌蚪变成青蛙后，告诉于外边的人是什么样的？牛是长什么样的？而与认为就是鱼身子，然后下面长了两条角，这样的样子是人。鱼的身体形状，它的鳍变成了4条腿，这样
  • 探索ASPICE V3.1：汽车行业软件开发的中文指南 阮懿同
    探索ASPICEV3.1：汽车行业软件开发的中文指南ASPICE_V3.1中文版.pdf.zip项目地址:https://gitcode.com/open-source-toolkit/422a2在汽车软件工程领域，高质量的标准对于确保行车安全和提升用户体验至关重要。今天，我们为您介绍一个珍贵的开源宝藏——ASPICEV3.1中文版资源。这是一篇专为国内汽车行业开发者、质量管理者准备的深度解读，旨
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 【Java】已解决：org.springframework.jdbc.datasource.lookup.DataSourceLookupFailureException 屿小夏 java开发语言
    文章目录一、分析问题背景问题背景描述出现问题的场景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项已解决：org.springframework.jdbc.datasource.lookup.DataSourceLookupFailureException在使用Spring框架进行开发时，数据源的配置和使用是非常关键的一环。然而，有时候我们可能会遇到org.springframewo
  • 《拖延心理学》（一）你为什么会拖延？|木盒笔记 纯se蓝调
    《拖延心理学》是帮助你向拖延症宣战的一本书，作者简·博克和莱诺拉·袁是全球知名的拖延症治疗专家。大概每个人或多或少总会有一点拖延症的行为。比如明天要叫论文了，今天你还没有写好，你一边在焦虑症怎么办，一边又拿着手机漫无目的的刷新闻；比如你想了很久准备减肥，但是迟迟又没有行动，想着今天晚上少吃一点吧、明天我就开始运动。今天分析的笔记来告诉你“你为什么会拖延？”，解读人杨坚。有人说拖延就像巨大的泥沼，让
  • JVM源码分析之堆外内存完全解读 HeapDump性能社区
    概述广义的堆外内存说到堆外内存，那大家肯定想到堆内内存，这也是我们大家接触最多的，我们在jvm参数里通常设置-Xmx来指定我们的堆的最大值，不过这还不是我们理解的Java堆，-Xmx的值是新生代和老生代的和的最大值，我们在jvm参数里通常还会加一个参数-XX:MaxPermSize来指定持久代的最大值，那么我们认识的Java堆的最大值其实是-Xmx和-XX:MaxPermSize的总和，在分代算法
  • 作业二十八：《佐贺的超级阿嬷》解读三：生活很难，但也要笑着活下去。 维伊的屋子
    晚上别提伤心事，难过的事情留到白天再说，也就不算什么了。——《佐贺的超级阿嬷》当今社会，竟争非常激烈，很多人难免会有这样的情绪：消极、悲观、失望、抱怨、挫败感……如果带这些情绪生活，日子就难熬今天我们学习超级阿嬷是如何把日子过的有滋有味，如何在平淡生活的鸡毛蒜皮里发现快乐？昭广用阿嬷的故事把答案告诉了我们，永远不要忘记发现生活的美好香乐趣。图片发自App一、不是每个人都能顺顺利利的度过一生，也不会
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • SpringBoot和SpringMVC是什么关系?SpringBoot替代SpringMVC了吗? 瑞金彭于晏 springboot后端javaMVCspring数据库
    SpringBoot和SpringMVC都是SpringFramework生态系统中的一部分，但它们各自扮演着不同的角色和提供不同的功能集。理解它们之间的关系，首先需要了解SpringFramework本身。SpringFrameworkSpringFramework是一个全面的、开源的应用程序开发框架，它提供了广泛的功能来支持企业应用开发的几乎所有方面。SpringFramework的核心特性之
  • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
  • 一文让你彻底搞懂什么是VR、AR、AV、MR 码上飞扬 vrarmrav
    随着科技的飞速发展，现实世界与虚拟世界的界限变得越来越模糊。各种与现实增强相关的技术如雨后春笋般涌现，令人眼花缭乱。本文将为你详细解读四种常见的现实增强技术：虚拟现实（VR）、增强现实（AR）、混合现实（MR）和增强虚拟（AV），让你彻底搞懂它们之间的区别与联系。一、虚拟现实（VR）1.什么是VR？虚拟现实（VirtualReality，简称VR）是一种通过计算机模拟生成的三维环境，使用户能够沉浸
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • 轻量级模型解读——轻量transformer系列 lishanlu136 #图像分类轻量级模型transformer图像分类
    先占坑，持续更新。。。文章目录1、DeiT2、ConViT3、Mobile-Former4、MobileViTTransformer是2017谷歌提出的一篇论文，最早应用于NLP领域的机器翻译工作，Transformer解读，但随着2020年DETR和ViT的出现(DETR解读，ViT解读)，其在视觉领域的应用也如雨后春笋般渐渐出现，其特有的全局注意力机制给图像识别领域带来了重要参考。但是tran
  • css2中的透明 琪33
    .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
    Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
    爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
  • Cut, Paste and Learn方法解读 wangxinwei2000 深度学习人工智能
    Abstract问题背景：标注数据的缺乏：在实例检测任务中，部署物体检测模型的一个主要障碍是缺乏大量标注数据。例如，在一个特定的厨房环境中找到包含实例的大型标注数据集是不太可能的。每当面对新的环境和新的物体实例时，都需要进行昂贵的数据收集和标注工作。研究贡献：解决方法：本文提出了一种简单的方法，可以以最小的努力生成大量标注的实例数据集。关键洞察：研究者的关键洞察是，仅仅确保“局部真实感”（patc
  • 【C#生态园】深度剖析：C#嵌入式开发工具大揭秘 friklogff C#生态园c#开发语言
    C#嵌入式开发：全面了解六大框架与库前言随着物联网和嵌入式系统的快速发展，越来越多的开发者开始关注使用C#语言进行嵌入式开发。本文将介绍几种用于C#的嵌入式开发框架和相关库，以及它们的核心功能、安装配置方法和API概览，帮助读者了解并选择适合自己项目的工具和资源。欢迎订阅专栏：C#生态园文章目录C#嵌入式开发：全面了解六大框架与库前言1.nanoFramework：一个用于C#的嵌入式开发框架1.
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • Spring @Async 深度解读：默认线程池执行器的配置与优化 小码快撩 springjava前端
    在Spring中，@Async注解用于异步执行方法。默认情况下，@Async注解的任务是由一个线程池执行的。然而，这个默认的线程池是如何初始化的呢？本文将深入探讨这一过程，帮助你理解Spring异步任务背后的线程池执行器的初始化原理。1.@Async的基本使用首先，让我们快速回顾一下@Async的基本用法。@Async通常用于标注在需要异步执行的方法上，比如：@Servicepublicclass
  • 软件测试/测试开发/全日制 |利用Django REST framework构建微服务 霍格沃兹-慕漓 django微服务sqlite
    霍格沃兹测试开发学社推出了《Python全栈开发与自动化测试班》。本课程面向开发人员、测试人员与运维人员，课程内容涵盖Python编程语言、人工智能应用、数据分析、自动化办公、平台开发、UI自动化测试、接口测试、性能测试等方向。为大家提供更全面、更深入、更系统化的学习体验，课程还增加了名企私教服务内容，不仅有名企经理为你1v1辅导，还有行业专家进行技术指导，针对性地解决学习、工作中遇到的难题。让找
  • 微信开发者验证接口开发 362217990 微信 开发者 token 验证
    微信开发者接口验证。 Token，自己随便定义，与微信填写一致就可以了。 根据微信接入指南描述 http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html 第一步：填写服务器配置 第二步：验证服务器地址的有效性 第三步：依据接口文档实现业务逻辑 这里主要讲第二步验证服务器有效性。 建一个
  • 一个小编程题-类似约瑟夫环问题 BrokenDreams 编程
            今天群友出了一题：         一个数列,把第一个元素删除,然后把第二个元素放到数列的最后,依次操作下去,直到把数列中所有的数都删除,要求依次打印出这个过程中删除的数。      &
  • linux复习笔记之bash shell (5) 关于减号-的作用 eksliang linux关于减号“-”的含义linux关于减号“-”的用途linux关于“-”的含义linux关于减号的含义
        转载请出自出处： http://eksliang.iteye.com/blog/2105677        管道命令在bash的连续处理程序中是相当重要的，尤其在使用到前一个命令的studout（标准输出）作为这次的stdin（标准输入）时，就显得太重要了，某些命令需要用到文件名，例如上篇文档的的切割命令（split）、还有
  • Unix(3) 18289753290 unix ksh
    1)若该变量需要在其他子进程执行，则可用"$变量名称"或${变量}累加内容 什么是子进程？在我目前这个shell情况下，去打开一个新的shell，新的那个shell就是子进程。一般状态下，父进程的自定义变量是无法在子进程内使用的，但通过export将变量变成环境变量后就能够在子进程里面应用了。 2)条件判断： &&代表and  ||代表or&nbs
  • 关于ListView中性能优化中图片加载问题 酷的飞上天空 ListView
    ListView的性能优化网上很多信息，但是涉及到异步加载图片问题就会出现问题。 具体参看上篇文章http://314858770.iteye.com/admin/blogs/1217594   如果每次都重新inflate一个新的View出来肯定会造成性能损失严重，可能会出现listview滚动是很卡的情况，还会出现内存溢出。 现在想出一个方法就是每次都添加一个标识，然后设置图
  • 德国总理默多克：给国人的一堂“震撼教育”课 永夜-极光 教育
    http://bbs.voc.com.cn/topic-2443617-1-1.html德国总理默多克：给国人的一堂“震撼教育”课　 安吉拉—默克尔，一位经历过社会主义的东德人，她利用自己的博客，发表一番来华前的谈话，该说的话，都在上面说了，全世界想看想传播——去看看默克尔总理的博客吧！ 　　德国总理默克尔以她的低调、朴素、谦和、平易近人等品格给国人留下了深刻印象。她以实际行动为中国人上了一堂
  • 关于Java继承的一个小问题。。。 随便小屋 java
    今天看Java 编程思想的时候遇见一个问题，运行的结果和自己想想的完全不一样。先把代码贴出来！ //CanFight接口 interface Canfight { void fight(); } //ActionCharacter类 class ActionCharacter { public void fight() { System.out.pr
  • 23种基本的设计模式 aijuans 设计模式
    Abstract Factory：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。 　　Adapter：将一个类的接口转换成客户希望的另外一个接口。A d a p t e r模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 　　Bridge：将抽象部分与它的实现部分分离，使它们都可以独立地变化。 　　Builder：将一个复杂对象的构建与它的表示分离，使得同
  • 《周鸿祎自述：我的互联网方法论》读书笔记 aoyouzi 读书笔记
    从用户的角度来看,能解决问题的产品才是好产品,能方便/快速地解决问题的产品,就是一流产品.   商业模式不是赚钱模式 一款产品免费获得海量用户后,它的边际成本趋于0,然后再通过广告或者增值服务的方式赚钱,实际上就是创造了新的价值链.   商业模式的基础是用户,木有用户,任何商业模式都是浮云.商业模式的核心是产品,本质是通过产品为用户创造价值. 商业模式还包括寻找需求
  • JavaScript动态改变样式访问技术 百合不是茶 JavaScriptstyle属性ClassName属性
      一:style属性 格式:  HTML元素.style.样式属性="值";   创建菜单:在html标签中创建 或者 在head标签中用数组创建   <html> <head> <title>style改变样式</title> </head> &l
  • jQuery的deferred对象详解 bijian1013 jquerydeferred对象
            jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。         每个版本都会引入一些新功能，从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。    &nb
  • 淘宝开放平台TOP Bill_chen C++c物流C#
    淘宝网开放平台首页：http://open.taobao.com/ 淘宝开放平台是淘宝TOP团队的产品，TOP即TaoBao Open Platform， 是淘宝合作伙伴开发、发布、交易其服务的平台。 支撑TOP的三条主线为：    1.开放数据和业务流程     * 以API数据形式开放商品、交易、物流等业务；  &
  • 【大型网站架构一】大型网站架构概述 bit1129 网站架构
    大型互联网特点 面对海量用户、海量数据 大型互联网架构的关键指标 高并发 高性能 高可用 高可扩展性 线性伸缩性 安全性 大型互联网技术要点   前端优化 CDN缓存 反向代理 KV缓存 消息系统 分布式存储 NoSQL数据库 搜索 监控 安全 想到的问题： 1.对于订单系统这种事务型系统，如
  • eclipse插件hibernate tools安装 白糖_ Hibernate
    eclipse helios(3.6)版 1.启动eclipse 2.选择 Help > Install New Software...> 3.添加如下地址： http://download.jboss.org/jbosstools/updates/stable/helios/ 4.选择性安装：hibernate tools在All Jboss tool
  • Jquery easyui Form表单提交注意事项 bozch jquery easyui
    jquery easyui对表单的提交进行了封装，提交的方式采用的是ajax的方式，在开发的时候应该注意的事项如下：         1、在定义form标签的时候，要将method属性设置成post或者get，特别是进行大字段的文本信息提交的时候，要将method设置成post方式提交，否则页面会抛出跨域访问等异常。所以这个要
  • Trie tree(字典树)的Java实现及其应用-统计以某字符串为前缀的单词的数量 bylijinnan java实现
    import java.util.LinkedList; public class CaseInsensitiveTrie { /** 字典树的Java实现。实现了插入、查询以及深度优先遍历。 Trie tree's java implementation.(Insert,Search,DFS) Problem Description Igna
  • html css 鼠标形状样式汇总 chenbowen00 htmlcss
    css鼠标手型cursor中hand与pointer  Example：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/>  Example：CSS鼠标手型效果 <a href="#" style=&qu
  • [IT与投资]IT投资的几个原则 comsci it
          无论是想在电商,软件,硬件还是互联网领域投资,都需要大量资金,虽然各个国家政府在媒体上都给予大家承诺,既要让市场的流动性宽松,又要保持经济的高速增长....但是,事实上,整个市场和社会对于真正的资金投入是非常渴望的,也就是说,表面上看起来,市场很活跃,但是投入的资金并不是很充足的......    
  • oracle with语句详解 daizj oraclewithwith as
    oracle with语句详解 转 在oracle中，select 查询语句，可以使用with,就是一个子查询，oracle 会把子查询的结果放到临时表中，可以反复使用 例子:注意，这是sql语句，不是pl/sql语句， 可以直接放到jdbc执行的 ----------------------------------------------------------------
  • hbase的简单操作 deng520159 数据库hbase
    近期公司用hbase来存储日志,然后再来分析 ,把hbase开发经常要用的命令找了出来. 用ssh登陆安装hbase那台linux后 用hbase shell进行hbase命令控制台! 表的管理 1）查看有哪些表 hbase(main)> list 2）创建表   # 语法：create <table>, {NAME => <family&g
  • C语言scanf继续学习、算术运算符学习和逻辑运算符 dcj3sjt126com c
    /* 2013年3月11日20:37:32 地点：北京潘家园 功能：完成用户格式化输入多个值 目的：学习scanf函数的使用 */ # include <stdio.h> int main(void) { int i, j, k; printf("please input three number:\n"); //提示用
  • 2015越来越好 dcj3sjt126com 歌曲
    越来越好 房子大了电话小了 感觉越来越好 假期多了收入高了 工作越来越好 商品精了价格活了 心情越来越好 天更蓝了水更清了 环境越来越好 活得有奔头人会步步高 想做到你要努力去做到 幸福的笑容天天挂眉梢 越来越好 婆媳和了家庭暖了 生活越来越好 孩子高了懂事多了 学习越来越好 朋友多了心相通了 大家越来越好 道路宽了心气顺了 日子越来越好 活的有精神人就不显
  • java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Tim feiteyizu mysql
    数据表中有记录的time字段（属性为timestamp）其值为：“0000-00-00 00:00:00” 程序使用select 语句从中取数据时出现以下异常： java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date   java.sql.SQLException: Valu
  • Ehcache（07）——Ehcache对并发的支持 234390216 并发ehcache锁ReadLockWriteLock
    Ehcache对并发的支持          在高并发的情况下，使用Ehcache缓存时，由于并发的读与写，我们读的数据有可能是错误的，我们写的数据也有可能意外的被覆盖。所幸的是Ehcache为我们提供了针对于缓存元素Key的Read（读）、Write（写）锁。当一个线程获取了某一Key的Read锁之后，其它线程获取针对于同
  • mysql中blob,text字段的合成索引 jackyrong mysql
      在mysql中，原来有一个叫合成索引的，可以提高blob,text字段的效率性能， 但只能用在精确查询，核心是增加一个列，然后可以用md5进行散列，用散列值查找 则速度快 比如： create table abc(id varchar(10),context blog,hash_value varchar(40)); insert into abc(1,rep
  • 逻辑运算与移位运算 latty 位运算逻辑运算
    源码：正数的补码与原码相同例+7 源码：00000111 补码 ：00000111 （用8位二进制表示一个数） 负数的补码： 符号位为1，其余位为该数绝对值的原码按位取反；然后整个数加1。   -7 源码： 10000111 ，其绝对值为00000111  取反加一：11111001 为-7补码 已知一个数的补码，求原码的操作分两种情况：
  • 利用XSD 验证XML文件 newerdragon javaxmlxsd
    XSD文件 （XML Schema 语言也称作 XML Schema 定义（XML Schema Definition，XSD）。 具体使用方法和定义请参看： http://www.w3school.com.cn/schema/index.asp java自jdk1.5以上新增了SchemaFactory类 可以实现对XSD验证的支持，使用起来也很方便。 以下代码可用在J
  • 搭建 CentOS 6 服务器(12) - Samba rensanning centos
    （1）安装 # yum -y install samba Installed: samba.i686 0:3.6.9-169.el6_5 # pdbedit -a rensn new password:123456 retype new password:123456 …… （2）Home文件夹 # mkdir /etc
  • Learn Nodejs 01 toknowme nodejs
    （1）下载nodejs https://nodejs.org/download/ 选择相应的版本进行下载     （2）安装nodejs 安装的方式比较多，请baidu下 我这边下载的是“node-v0.12.7-linux-x64.tar.gz”这个版本 （1）上传服务器 （2）解压 tar -zxvf  node-v0.12.
  • jquery控制自动刷新的代码举例 xp9802 jquery
    1、html内容部分  复制代码代码示例: <div id='log_reload'> <select name="id_s" size="1"> <option value='2'>-2s-</option> <option value='3'>-3s-</option
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他