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>