Home Explore Help
Register Sign In
PerfectEquation
/
GZ
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: db155e2997
Branches Tags
GZ
/
nwyj
/
.svn
/
pristine
/
aa
/
aa6ece7bdcb6fe92ca74256f07b7a7e70413503a.svn-base

aa6ece7bdcb6fe92ca74256f07b7a7e70413503a.svn-base 8.5 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    5. 

  5. <title></title>
    6. 

  6. <!--框架必需start-->
    7. 

  7. <script type="text/javascript" src="../../libs/js/jquery.js"></script>
    8. 

  8. <script type="text/javascript" src="../../libs/js/language/cn.js"></script>
    9. 

  9. <script type="text/javascript" src="../../libs/js/framework.js"></script>
    10. 

  10. <link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
    11. 

  11. <link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
    12. 

  12. <link rel="stylesheet" type="text/css" id="customSkin"/>
    13. 

  13. <!--框架必需end-->
    14. 

  14. </head>
    15. 

  15. <body>
    16. 

  16.   <div class="box2" panelTitle="控制基本布局、宽高、颜色、字号、缩进等（basic.css）">	
    17. 

  17. 		<table class="tableStyle">
    18. 

  18. 			<tr><th colspan="2">浮动</th></tr>
    19. 

  19. 			<tr><td>float_left</td><td>向左浮动</td></tr>
    20. 

  20. 			<tr><td>float_right</td><td>向右浮动</td></tr>
    21. 

  21. 			<tr><td>clear</td><td>清除浮动（设置了浮动后最后要清除浮动，否则后面的元素也会受到浮动影响）</td></tr>
    22. 

  22. 			<tr><th colspan="2">对齐</th></tr>
    23. 

  23. 			<tr><td>ali01</td><td>水平靠左</td></tr>
    24. 

  24. 			<tr><td>ali02</td><td>水平居中</td></tr>
    25. 

  25. 			<tr><td>center</td><td>水平居中(FireFox下有些情况ali02无法实现居中，这时用center)</td></tr>
    26. 

  26. 			<tr><td>ali03</td><td>水平靠右</td></tr>
    27. 

  27. 			<tr><td>ver01</td><td>垂直靠上</td></tr>
    28. 

  28. 			<tr><td>ver02</td><td>垂直居中</td></tr>
    29. 

  29. 			<tr><td>ver03</td><td>垂直靠下</td></tr>
    30. 

  30. 			<tr><th colspan="2">宽、高与间距（这里的命名原则：英文后面直接加数字代表百分比，英文后加下划线再加数字代表像素值）</th></tr>
    31. 

  31. 			<tr><td>width100</td><td>宽度100%</td></tr>
    32. 

  32. 			<tr><td>height100</td><td>高度100%</td></tr>
    33. 

  33. 			<tr><td>minHeight_100</td><td>最小高度为100px</td></tr>
    34. 

  34. 			<tr><td>minHeight_150</td><td>最小高度为150px</td></tr>
    35. 

  35. 			<tr><td>minHeight_200</td><td>最小高度为200px</td></tr>
    36. 

  36. 			<tr><td><span class="text_slice">height_0、height_1到height_50</span></td><td>元素高度，从0px,1px到10px,15px,20px到50px(10以后每个间隔5px)。用法见下面：</td></tr>
    37. 

  37. 			<tr><td colspan="2">
    38. 

  38. 				可以用来设置两个垂直排列的元素的垂直间距（代替br）
    39. 

  39. 效果：<br />
    40. 

  40. <input type="button" value=" 确 定 "/><div class="height_10"></div>
    41. 

  41. <input type="button" value=" 取 消 "/>
    42. 

  42. 				</td></tr>	
    43. 

  43. 			<tr><td><span class="text_slice">spacer_0、spacer_1到spacer_50</span></td><td>元素间距，从0px,1px到10px,15px,20px到50px(10以后每个间隔5px)。用法见下面：</td></tr>
    44. 

  44. 			<tr><td colspan="2">
    45. 

  45. 				可以用来设置两个水平排列的元素的间距（代替空格）
    46. 

  46. 效果：<br />
    47. 

  47. <input type="button" value=" 确 定 " style="float:left"/><div class="spacer_10"></div>
    48. 

  48. <input type="button" value=" 取 消 " style="float:left"/><div class="clear"></div>
    49. 

  49. 				</td></tr>	
    50. 

  50. 			<tr><th colspan="2">行高</th></tr>
    51. 

  51. 			<tr><td>lineHeight100</td><td>行高100%</td></tr>
    52. 

  52. 			<tr><td>lineHeight150</td><td>行高150%</td></tr>
    53. 

  53. 			<tr><td>lineHeight200</td><td>行高200%</td></tr>
    54. 

  54. 			<tr><th colspan="2">边框</th></tr>
    55. 

  55. 			<tr><td>border_gray</td><td>灰色1像素边框</td></tr>
    56. 

  56. 			<tr><td>border_red</td><td>红色1像素边框</td></tr>
    57. 

  57. 			<tr><td>border_blue</td><td>蓝色1像素边框</td></tr>
    58. 

  58. 			<tr><td>border_green</td><td>绿色1像素边框</td></tr>
    59. 

  59. 			<tr><td>border_black</td><td>黑色1像素边框</td></tr>
    60. 

  60. 			<tr><td>border_white</td><td>白色1像素边框</td></tr>
    61. 

  61. 			<tr><th colspan="2">背景颜色</th></tr>
    62. 

  62. 			<tr><td>white_bg</td><td>白色背景</td></tr>
    63. 

  63. 			<tr><td>trans_bg</td><td>背景透明</td></tr>
    64. 

  64. 			<tr><th colspan="2">字符间距</th></tr>
    65. 

  65. 			<tr><td><span class="text_slice">letter_space0、letter_space1到letter_space5</span></td><td>字符间距为0em到5em，1em为一个12像素字的宽度</td></tr>
    66. 

  66. 			<tr><th colspan="2">文字颜色（设为链接后也不会变色）</th></tr>
    67. 

  67. 			<tr><td>black</td><td>文字颜色为黑色</td></tr>
    68. 

  68. 			<tr><td>white</td><td>文字颜色为白色</td></tr>
    69. 

  69. 			<tr><td>red</td><td>文字颜色为红色</td></tr>
    70. 

  70. 			<tr><td>blue</td><td>文字颜色为蓝色</td></tr>
    71. 

  71. 			<tr><th colspan="2">字体大小（这里的字体大小命名原则：英文后加下划线再加数字代表像素值）</th></tr>
    72. 

  72. 			<tr><td>font_12</td><td>字体大小为12px</td></tr>
    73. 

  73. 			<tr><td>font_13</td><td>字体大小为13px</td></tr>
    74. 

  74. 			<tr><td>font_14</td><td>字体大小为14px</td></tr>
    75. 

  75. 			<tr><td>font_16</td><td>字体大小为16px</td></tr>
    76. 

  76. 			<tr><td>font_18</td><td>字体大小为18px</td></tr>
    77. 

  77. 			<tr><td>font_20</td><td>字体大小为20px</td></tr>
    78. 

  78. 			<tr><td>font_25</td><td>字体大小为25px</td></tr>
    79. 

  79. 			<tr><th colspan="2">字体粗细</th></tr>
    80. 

  80. 			<tr><td>font_normal</td><td>文字强制不加粗</td></tr>
    81. 

  81. 			<tr><td>font_bold</td><td>文字加粗</td></tr>
    82. 

  82. 			<tr><td>font_specal</td><td>白色微软雅黑字体，并有阴影特效。注意IE浏览器需要为文字容器加宽度才有效</td></tr>
    83. 

  83. 			<tr><th colspan="2">文字缩进</th></tr>
    84. 

  84. 			<tr><td><span class="text_slice">font_ind0、font_ind1到font_ind50</span></td><td>文字缩进，从0px,1px到10px,15px,20px到50px(10以后每个间隔5px)</td></tr>
    85. 

  85. 			<tr><th colspan="2">其他</th></tr>
    86. 

  86. 			<tr><td>text_slice</td><td>截取文字出省略号，使用方法参考“文本>>文本单行截取”相关内容</td></tr>
    87. 

  87. 			<tr><td>text_break</td><td>强制文字折行，使用方法参考“API必备知识>>文字折行处理”相关内容</td></tr>
    88. 

  88. 			<tr><td>text_singleLine</td><td>强制文字不换行</td></tr>
    89. 

  89. 			<tr><td>imgFix</td><td>大图修正</td></tr>
    90. 

  90. 			<tr><td>hand</td><td>强制鼠标显示为手型</td></tr>
    91. 

  91. 			<tr><td>underLine</td><td>文字有下划线</td></tr>
    92. 

  92. 			<tr><td>groupTitle</td><td>div设置该样式并且嵌套span，标题样式</td></tr>
    93. 

  93. 			<tr><td>formTable</td><td>table设置该样式，设置了每一行元素上下的间距，用于自定义表单布局</td></tr>
    94. 

  94. 		</table>
    95. 

  95. 	</div>
    96. 

  96. 	
    97. 

  97. 	<div class="box2" panelTitle="控制定位（position.css）">
    98. 

  98. 		<table class="tableStyle">
    99. 

  99. 			<tr><th colspan="2">padding定位（在可能的情况下尽量用padding定位而不用margin定位）</th></tr>
    100. 

  100. 			<tr><td><span class="text_slice">padding0、padding1到padding50</span></td><td>设置该容器的子内容距该容器的偏移距离，从上、右、下、左4个方向作同样的偏移。从0px,1px到10px,15px,20px到50px(10以后每个间隔5px)</td></tr>
    101. 

  101. 			<tr><td><span class="text_slice">padding_top0、padding_top1到padding_top50</span></td><td>设置该容器的内容距该容器的上方偏移距离。从0px,1px到10px,15px,20px到50px(10以后每个间隔5px)</td></tr>
    102. 

  102. 			<tr><td><span class="text_slice">padding_right0、padding_right1到padding_right50</span></td><td>设置该容器的内容距该容器的右方偏移距离。从0px,1px到10px,15px,20px到50px(10以后每个间隔5px)</td></tr>
    103. 

  103. 			<tr><td><span class="text_slice">padding_bottom0、padding_bottom1到padding_bottom50</span></td><td>设置该容器的内容距该容器的下方偏移距离。从0px,1px到10px,15px,20px到50px(10以后每个间隔5px)</td></tr>
    104. 

  104. 			<tr><td><span class="text_slice">padding_left0、padding_left1到padding_left50</span></td><td>设置该容器的内容距该容器的左方偏移距离。从0px,1px到10px,15px,20px到50px(10以后每个间隔5px)</td></tr>
    105. 

  105. 			<tr><th colspan="2">margin定位</th></tr>
    106. 

  106. 			<tr><td><span class="text_slice">margin0、margin1到margin50</span></td><td>设置该容器距父容器的偏移距离，从上、右、下、左4个方向作同样的偏移。从0px,1px到10px,15px,20px到50px(10以后每个间隔5px)</td></tr>
    107. 

  107. 			<tr><td><span class="text_slice">margin_top0、margin_top1到margin_top50</span></td><td>设置该容器距父容器上方的偏移距离。从0px,1px到10px,15px,20px到50px(10以后每个间隔5px)</td></tr>
    108. 

  108. 			<tr><td><span class="text_slice">margin_right0、margin_right1到margin_right50</span></td><td>设置该容器距父容器右方的偏移距离。从0px,1px到10px,15px,20px到50px(10以后每个间隔5px)</td></tr>
    109. 

  109. 			<tr><td><span class="text_slice">margin_bottom0、margin_bottom1到margin_bottom50</span></td><td>设置该容器距父容器下方的偏移距离。从0px,1px到10px,15px,20px到50px(10以后每个间隔5px)</td></tr>
    110. 

  110. 			<tr><td><span class="text_slice">margin_left0、margin_left1到margin_left50</span></td><td>设置该容器距父容器左方的偏移距离。从0px,1px到10px,15px,20px到50px(10以后每个间隔5px)</td></tr>
    111. 

  111. 		</table>
    112. 

  112. 	</div>
    113. 

  113. </body>
    114. 

  114. </html>
    115.