一、背景图片的拉伸: 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指的是最大字符个数
<style type="text/css" media="screen">
.tableStyle1{
/*背景 红色*/
background-color:#F00C99;
/*文本*/
text-align:justify;
/*字体*/
font-family:Georgia,serif;
font-style:normal;
font-size:10px;
font-weight:bolder;
/*黑色*/
color:#000F0B;
/*定位*/
margin:auto;
border-width:50px;
border-style:solid;
/*粉红 如果不设则为灰色*/
border-color:#CE1AD4;
border-color:transparent;
padding:50px; }
.tdStyle1{
/*背景 浅绿*/
background-color:#09D6F8;
/*文本*/
text-align:center;
/*字体*/
font-family: Times,Sans-serif,Fantasy;
font-style:normal; /*字体浅灰*/
color:#40308A;
font-size:20px;
/*定位*/
margin:auto;
border-style:none;
border-width:5px;
/*粉红*/
border-color:#DE2AD3; /*border:1px solid #FFFFFF;*/
/* border-width:1px;
border-style:solid;
border-color:#FFFFFF;*/
/* padding:0px;*/ }
.inputStyle{
font-size:15px;
color:#F51515;
padding:0px;
} </style> <div style="margin:auto; width:80%;align:center"> <form action="post_form.php" method="post">
<table class="tableStyle1" width="50%" align="center">
<tr>
<td class="tdStyle1" width="50%" nowrap>公司名称:</td>
<td class="tdStyle1" width="50%" nowrap>
<input type="text" class="inputStyle" name="arr[]" id="company" maxlength="10px">
</td>
</tr>
<tr>
<td class="tdStyle1" nowrap> 姓名:</td>
<td class="tdStyle1" nowrap>
<input type="text" class="inputStyle" name="arr[]" id="name">
</td>
</tr>
<tr>
<td class="tdStyle1" nowrap>年龄:</td>
<td class="tdStyle1" nowrap>
<input type="text" class="inputStyle" name="arr[]" id="age">
</td>
</tr>
</table>
<p>
</p>
<table width="60%" class="tableStyle1" >
<tr>
<td class="tdStyle1" nowrap>公司名称:</td>
<td class="tdStyle1" nowrap>
<input type="text" name="arr1[work][]" id="company">
</td>
<td nowrap class="tdStyle1">姓名:</td>
<td nowrap class="tdStyle1">
<input type="text" name="arr1[work][]" id="name">
</td>
<td class="tdStyle1" nowrap>年龄:</td>
<td class="tdStyle1" nowrap>
<input type="text" name="arr1[work][]" id="age">
</td>
</tr>
<tr>
<td class="tdStyle1" nowrap>学校:</td>
<td class="tdStyle1" nowrap>
<input type="text" name="arr1[student][]" id="school">
</td> <td class="tdStyle1" nowrap>专业:</td>
<td class="tdStyle1" nowrap>
<input type="text" name="arr1[student][]" id="professor">
</td> <td class="tdStyle1" nowrap>班级:</td>
<td class="tdStyle1" nowrap>
<input type="text" name="arr1[student][]" id="grade">
</td>
</tr>
<tr>
<td>
<input class="tdStyle1" type="radio" name="arr1[student][]" value="0" id="sex">男
</td>
<td>
<input class="tdStyle1" type="radio" name="arr1[student][]" value="1" id="sex">女
</td>
</tr>
</table> <p>
</p> <table class="tableStyle1">
<tr>
<td class="tdStyle1" nowrap>工作地点</td>
<td class="tdStyle1" nowrap>
<input type="text" name="arr2[work][workplace]" id="workplace">
</td>
<td class="tdStyle1" nowrap>工作内容</td>
<td class="tdStyle1" nowrap>
<input type="text" name="arr2[work][content]" id="content">
</td>
<td class="tdStyle1" nowrap>上班时间</td>
<td class="tdStyle1" nowrap>
<input type="text" name="arr2[work][worktime]" id="worktime">
</td>
</tr>
</table> <p> <div align="center">
<input class="tdStyle1" type="submit" value="确 定">
<input class="tdStyle1" type="reset" value="取 消">
</div> </form> </div>
