表单样式简单设计

　　虽然作为后端程序员,简单的CSS样式还是要会滴,备份下

1.直接贴代码吧：

@{
    ViewBag.Title = "Index";
    Layout = null;
}
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style type="text/css">
    .box-wrap {
        padding: 20px;
        width: 2000px;
    }

        .box-wrap > div {
            padding: 0 0 10px;
            font-size: 14px;
            color: #333;
        }
            .box-wrap > div span {
                display: inline-block;
                margin-right: 5px;
            }

            .box-wrap > div label {
                display: inline-block;
            }

            .box-wrap > div input {
                border-radius: 3px;
                padding: 4px 10px;
                font-size: 14px;
                width: 200px;
                border: 1px solid #e0e0e0;
            }

            .box-wrap > div select {
                border: 1px solid #e0e0e0;
                padding: 4px;
                margin-right: 5px;
                min-width: 100px;
            }

        .box-wrap .box-checkbox label {
            margin-bottom: 10px;
            margin-right: 10px;
            width: 330px;
        }

        .box-wrap .box-checkbox input {
            width: auto;
            vertical-align: baseline;
            margin-right: 3px;
        }

    .btnSave button {
        border: none;
        background: #507fff;
        width: 150px;
        height: 35px;
        line-height: 35px;
        color: #fff;
        border-radius: 3px;
        font-size: 16px;
        margin: auto;
        display: block;
        margin-top: 30px;
    }
</style>
<div class="box-wrap">

    <div><span>级别：</span><label>3</label></div>
    <div><span>标题：</span><label><input id="txtName"></label></div>
    <div>
        <span>子级：</span>
        <label>
            <select id="twoSelect">
                <option value="-1">请选择0 级车型库</option>
            </select>
            <select id="twoSelect">
                <option value="-1">请选择1级车型库</option>
            </select>
            <select id="threeSelect">
                <option value="-1">请选择2级车型库</option>
            </select>
        </label>
    </div>
    <div id="content">
        <div class="box-checkbox">
        </div>
    </div>
    <div class="btnSave"><button id="btnSave">保存</button></div>
</div>

<script>
    $(function () {
        var getId = $(this).val();
        var r = { "success": true, "fourList": [{ "fourId": 18637, "fourName": "2014款 Sportback 35 TFSI 自动进取型" }, { "fourId": 18638, "fourName": "2014款 Sportback 35 TFSI 自动时尚型" }, { "fourId": 18639, "fourName": "2014款 Sportback 35 TFSI 自动舒适型" }, { "fourId": 16571, "fourName": "2014款 Sportback 35 TFSI 自动豪华型" }, { "fourId": 20245, "fourName": "2014款 Limousine 35 TFSI 自动进取型" }, { "fourId": 20246, "fourName": "2014款 Limousine 35 TFSI 自动时尚型" }, { "fourId": 20247, "fourName": "2014款 Limousine 35 TFSI 自动舒适型" }, { "fourId": 20248, "fourName": "2014款 Limousine 35 TFSI 自动豪华型" }, { "fourId": 18658, "fourName": "2015款 Sportback 35 TFSI 手动进取型" }, { "fourId": 21567, "fourName": "2015款 Sportback 40 TFSI 自动舒适型" }, { "fourId": 21568, "fourName": "2015款 Sportback 40 TFSI 自动豪华型" }, { "fourId": 21598, "fourName": "2015款 Limousine 35 TFSI 手动进取型" }, { "fourId": 21569, "fourName": "2015款 Limousine 40 TFSI 自动舒适型" }, { "fourId": 21570, "fourName": "2015款 Limousine 40 TFSI 自动豪华型" }, { "fourId": 22883, "fourName": "2015款 Sportback 35 TFSI 百万纪念智领型" }, { "fourId": 22884, "fourName": "2015款 Limousine 35 TFSI 百万纪念智领型" }, { "fourId": 22885, "fourName": "2015款 Sportback 35 TFSI 百万纪念舒享型" }, { "fourId": 22886, "fourName": "2015款 Limousine 35 TFSI 百万纪念舒享型" }, { "fourId": 22887, "fourName": "2015款 Sportback 35 TFSI 百万纪念乐享型" }, { "fourId": 22888, "fourName": "2015款 Limousine 35 TFSI 百万纪念乐享型" }, { "fourId": 25898, "fourName": "2016款 Sportback 35 TFSI 进取型" }, { "fourId": 25899, "fourName": "2016款 Sportback 35 TFSI 领英型" }, { "fourId": 25900, "fourName": "2016款 Sportback 35 TFSI 风尚型" }, { "fourId": 25901, "fourName": "2016款 Sportback 40 TFSI 风尚型" }, { "fourId": 25902, "fourName": "2016款 Sportback 40 TFSI 豪华型" }, { "fourId": 25903, "fourName": "2016款 Limousine 35 TFSI 进取型" }, { "fourId": 25904, "fourName": "2016款 Limousine 35 TFSI 领英型" }, { "fourId": 25905, "fourName": "2016款 Limousine 35 TFSI 风尚型" }, { "fourId": 25906, "fourName": "2016款 Limousine 40 TFSI 风尚型" }, { "fourId": 25907, "fourName": "2016款 Limousine 40 TFSI 豪华型" }, { "fourId": 27076, "fourName": "2016款 Sportback 35 TFSI 特别版" }, { "fourId": 27078, "fourName": "2016款 Limousine 35 TFSI 特别版" }] };
        var html = '';
        $.each(r.fourList, function (index, ele) {
            html += '<label>' + ele.fourName + '<input name="idck" type="checkbox" id="' + ele.fourId + '"/></label>';
        })
        $(".box-checkbox").html(html);
    })
</script>

2.效果：