css 设计总结
一、背景图片的拉伸: backgroud-size
说明： http://www.w3school.com.cn/cssref/pr_background-size.asp
效果： http://www.w3school.com.cn/tiy/c.asp?f=css_background-size&p=7
css兼容性解决方法：前缀+样式。
-webkit /*Chrome/Safari*/
-moz /*Firefox*/
-ms /*IE*/
-o /*Opera*/
背景图片拉伸兼容IE8以下的css方法
.bg{
/*css3支持全屏拉伸图片，支持IE9+,firefox,chrome*/
background: url("image/map1.jpg");
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
background-repeat: no-respeat9;
background-image: none9;
/*css3支持全屏拉伸图片，支持IE9+,firefox,chrome*/
/*ie7,ie8滤镜支持全屏拉伸,注：ie7，ie8图片路径必须是据对路径或者相对于根目录的路径*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/map1.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/map1.jpg', sizingMethod='scale')";
}
2、、div 居中对齐：http://www.divcss5.com/jiqiao/j633.shtml
3、
水平内边距padding、边框border都会影响行内距，即width,
但其外边距设置过小时，一般不会影响到其行内距，margin无论设置多大，都不能
影响显示with字体的显示占用的最小空间。
垂直内边距、边框和外边距不影响行内框的高度,即height
一个table的水平宽度里包含了border、padding、width的总大小
<table width=50%>
border的三种设置方式
1、有边框有颜色
2、无边框无颜色 border-sytle:none;
3、有边框无颜色 border-width:30px;border-color:transparent; 其颜色被背景颜色所覆盖
border,padding的所在区域都被填充为背景颜色，如果border无指定颜色。
padding,border占据空间而不显示，背景颜色不设置即可
当div设置内容不足以放置合适的文字内容，而margin:auto或默认时，会以文字能正常显示大小为主，
margin:auto居中。
当margin:200px类似这种字体大小时，则div会被扩充，其div设置的width内容无效
<div style="margin:auto"> 当没有指定width时,margin无效果,
<div style="margin:auto; width:50%"> 则会实现居中
当width不足以支持其字体显示，会向外扩充，但会保持居中，如果有指定margin:auto居中
表单元素input, label, select, option, textarea, button, fieldset, legend不继承上一层的属性，
需要手工指定style
maxlength指的是最大字符个数
1 <style type="text/css" media="screen"> 2 .tableStyle1{ 3 /*背景 红色*/ 4 background-color:#F00C99; 5 /*文本*/ 6 text-align:justify; 7 /*字体*/ 8 font-family:Georgia,serif; 9 font-style:normal; 10 font-size:10px; 11 font-weight:bolder; 12 /*黑色*/ 13 color:#000F0B; 14 /*定位*/ 15 margin:auto; 16 border-width:50px; 17 border-style:solid; 18 /*粉红 如果不设则为灰色*/ 19 border-color:#CE1AD4; 20 border-color:transparent; 21 padding:50px; 22 23 } 24 .tdStyle1{ 25 /*背景 浅绿*/ 26 background-color:#09D6F8; 27 /*文本*/ 28 text-align:center; 29 /*字体*/ 30 font-family: Times,Sans-serif,Fantasy; 31 font-style:normal; 32 33 /*字体浅灰*/ 34 color:#40308A; 35 font-size:20px; 36 /*定位*/ 37 margin:auto; 38 border-style:none; 39 border-width:5px; 40 /*粉红*/ 41 border-color:#DE2AD3; 42 43 /*border:1px solid #FFFFFF;*/ 44 /* border-width:1px; 45 border-style:solid; 46 border-color:#FFFFFF;*/ 47 /* padding:0px;*/ 48 49 } 50 .inputStyle{ 51 font-size:15px; 52 color:#F51515; 53 padding:0px; 54 } 55 56 </style> 57 58 <div style="margin:auto; width:80%;align:center"> 59 60 61 <form action="post_form.php" method="post"> 62 <table class="tableStyle1" width="50%" align="center"> 63 <tr> 64 <td class="tdStyle1" width="50%" nowrap>公司名称:</td> 65 <td class="tdStyle1" width="50%" nowrap> 66 <input type="text" class="inputStyle" name="arr[]" id="company" maxlength="10px"> 67 </td> 68 </tr> 69 <tr> 70 <td class="tdStyle1" nowrap> 姓名:</td> 71 <td class="tdStyle1" nowrap> 72 <input type="text" class="inputStyle" name="arr[]" id="name"> 73 </td> 74 </tr> 75 <tr> 76 <td class="tdStyle1" nowrap>年龄:</td> 77 <td class="tdStyle1" nowrap> 78 <input type="text" class="inputStyle" name="arr[]" id="age"> 79 </td> 80 </tr> 81 </table> 82 <p> 83 84 </p> 85 <table width="60%" class="tableStyle1" > 86 <tr> 87 <td class="tdStyle1" nowrap>公司名称:</td> 88 <td class="tdStyle1" nowrap> 89 <input type="text" name="arr1[work][]" id="company"> 90 </td> 91 <td nowrap class="tdStyle1">姓名:</td> 92 <td nowrap class="tdStyle1"> 93 <input type="text" name="arr1[work][]" id="name"> 94 </td> 95 <td class="tdStyle1" nowrap>年龄:</td> 96 <td class="tdStyle1" nowrap> 97 <input type="text" name="arr1[work][]" id="age"> 98 </td> 99 </tr> 100 <tr> 101 <td class="tdStyle1" nowrap>学校:</td> 102 <td class="tdStyle1" nowrap> 103 <input type="text" name="arr1[student][]" id="school"> 104 </td> 105 106 <td class="tdStyle1" nowrap>专业:</td> 107 <td class="tdStyle1" nowrap> 108 <input type="text" name="arr1[student][]" id="professor"> 109 </td> 110 111 <td class="tdStyle1" nowrap>班级:</td> 112 <td class="tdStyle1" nowrap> 113 <input type="text" name="arr1[student][]" id="grade"> 114 </td> 115 </tr> 116 <tr> 117 <td> 118 <input class="tdStyle1" type="radio" name="arr1[student][]" value="0" id="sex">男 119 </td> 120 <td> 121 <input class="tdStyle1" type="radio" name="arr1[student][]" value="1" id="sex">女 122 </td> 123 </tr> 124 </table> 125 126 <p> 127 128 </p> 129 130 <table class="tableStyle1"> 131 <tr> 132 <td class="tdStyle1" nowrap>工作地点</td> 133 <td class="tdStyle1" nowrap> 134 <input type="text" name="arr2[work][workplace]" id="workplace"> 135 </td> 136 <td class="tdStyle1" nowrap>工作内容</td> 137 <td class="tdStyle1" nowrap> 138 <input type="text" name="arr2[work][content]" id="content"> 139 </td> 140 <td class="tdStyle1" nowrap>上班时间</td> 141 <td class="tdStyle1" nowrap> 142 <input type="text" name="arr2[work][worktime]" id="worktime"> 143 </td> 144 </tr> 145 </table> 146 147 <p> 148 149 150 <div align="center"> 151 <input class="tdStyle1" type="submit" value="确 定"> 152 153 <input class="tdStyle1" type="reset" value="取 消"> 154 </div> 155 156 </form> 157 158 </div> 159