css+div布局案例

给最外层的div命名一个class

有针对性的进行css布局。

<div class="joinus-info">
        <div class="form-title">填写表格</div>
        <form action="{sh::U('Index/joinus')}" class="smart-green"  onsubmit="return checkform();" method="post" id="myform">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="addTable">
            <tr>
                <td height="48" align="right"><strong>姓名：</strong></td>
                <td colspan="3" class="lt"><input type="text" name="name" id="name" class="" size="45" value=""/></td>
            </tr>
            <tr>
                <td height="48" align="right"><strong>手机：</strong></td>
                <td colspan="3" class="lt"><input type="text" name="phone" id="phone" class="" size="45" onkeyup="value=value.replace(/[^\d]/g,'')" value=""/></td>
            </tr>
            <tr>
                <td height="48" align="right"><strong>行业：</strong></td>
                <td colspan="3" class="lt">
                <select name="business" id="business">
                    <option value="">-请选择-</option>
                    <option value="LS">零售</option>
                    <option value="CY">餐饮</option>
                    <option value="QT">其他</option>
                </select>
                </td>
            </tr>
            <tr>
                <td height="48" align="right"><strong>地址：</strong></td>
                <td colspan="3" class="lt">
                    <div id='s_city'>
                        <select name="province" class="prov set_disabled"></select>
                        <select name="city" class="city " disabled="disabled"></select>
                        <select name="district" class="dist " disabled="disabled"></select>
                    </div>
                </td>
            </tr>
            <tr>
                <td height="48" align="right"><strong>详细地址：</strong></td>
                <td colspan="3" class="lt">
                    <input type="text" name="address" id="address" class="address" value=""/>
                </td>
            </tr>

            <tr>
                <td height="48" align="right"><strong>选择代理商：</strong></td>
                <td colspan="3" class="lt" style="width: 80%;">
                    <volist name="agentData" id="vo" mod="3" key="k" empty="暂时没有数据">
                    <div style="display:inline-block;width:280px;margin:3px;">
                    <input type="radio" class="regular-radio" value="{sh:$vo.agent_id}" name="agent_id" id="agent_{sh:$k}" <eq name="k" value="1">checked="checked"</eq>><label for="agent_{sh:$k}"></label><span style="display:inline-block;padding:0px 0px 5px 5px;">{sh:$vo.name} 电话({sh:$vo.tel})</span>
                    </div>
                    <eq name="mod" value="2"><br/></eq>
                    </volist>
                </td>
            </tr>
            <tr>
                <td height="48" align="right"><strong>备注：</strong></td>
                <td colspan="3" class="lt"><textarea name="remarks" class="" placeholder="请输入备注信息..." style="width:300px;height:80px;"></textarea></td>
            </tr>
            <tr>
                <td></td>
                <td class="lt">
                <notempty  name="agentData"><input type="submit" name="submit" value="提交" class="button btn-success"/></notempty >
                </td>
            </tr>
        </table>
    </form>
    </div>

这里的joinus-info 就是最外层的class

css布局如下

.joinus-info{margin: 0 auto;width:100%;text-align: left;font-size: 16px;background-color:#EFEFEF;}
.joinus-info table{
    margin-left:10%;
}
.joinus-info .form-title{
    font-size: 20px;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    color:#FB780F;
}

div joinus-info中有一个form smart-green

可以针对form进行布局

.smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select {
color: #555;
height: 40px;
line-height:15px;
width: 40%;
padding: 0px 0px 0px 10px;
margin-top: 2px;
border: 1px solid #E5E5E5;
background: #FBFBFB;
outline:;
-webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
font: normal 14px/14px Arial, Helvetica, sans-serif;
}
.smart-green input[type="text"].address{width: 60%;} /*这里面存在一个执行顺序的问题class先执行，class下面的input后执行*/
.smart-green textarea{
height:100px;
padding-top: 10px;
}

.smart-green select{
    width: 15%;
}

.smart-green input[type="radio"]{
    margin-top: 10px;
}

.smart-green .button {
background-color: #9DC45F;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-border-radius: 5px;
border: none;
padding: 10px 25px 10px 25px;
color: #FFF;
text-shadow: 1px 1px 1px #949494;
}
.smart-green .button:hover {
background-color:#80A24A;
}

这样布局，不会对其他的模块造成影响。而且目标明确。有意思。

这样form下的表单元素就会加入smart-green的样式了。