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指的是最大字符个数

 <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>
 &nbsp;
 </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>
 &nbsp;
 </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="确 定">
     &nbsp;
     <input class="tdStyle1" type="reset" value="取 消">
     </div>

 </form>

 </div>