表单样式简单设计

  虽然作为后端程序员,简单的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.效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏c#开发者

使用javascript+xml实现分页

今天才开通我的csdn blog,把俺以前的帖子拿出来和大家分享。 基于web的技术中,分页是一个老的不能再老的,但大家津津乐道的问题,随着xml技术的日渐应用...

3578
来自专栏一“技”之长

iOS使用UIImagePickerController调用系统相机、相册与图库

        UIImagePickerController是系统封装好的一个导航视图控制器,使用其开发者可以十分方便的进行相机相册相关功能的调用。UIIma...

1811
来自专栏黑白安全

来做个Google Hack吗?

storemanager/contents/item.php?page_code=

5496
来自专栏娱乐心理测试

微信小程序语音聊天智能对话(demo)

3126
来自专栏ios 技术积累

ios 一款集成方便的二维码扫描

做项目要用到二维码扫描,在git上搜索到了LBXScan开源库很不错,详细的可以下载demo,我只是使用了部分功能因此pod中只导入了

2592
来自专栏ACM小冰成长之路

51Nod-1232-完美数

ACM模版 描述 ? 题解 这里要求数的值整除以所有位的值,除 0 以外,所以也就很容易想到,这个数一定是要整除这些位数的最小公倍数,而这些数范围是 1∼9 ,...

1998
来自专栏星流全栈

Bulma — 基于Flexbox的CSS框架

1836
来自专栏Android小菜鸡

Android语音录制,语音发送

这是一个录音的例子,可用于IM的语音发送,OA的语音留言等。 首先我们需要引入权限:

4422
来自专栏HansBug's Lab

2045: 双亲数

2045: 双亲数 Time Limit: 10 Sec  Memory Limit: 259 MB Submit: 659  Solved: 302 [Sub...

2747
来自专栏Android点滴积累

Android 短信拦截及用途分析

监听系统短信这个只能作为一个技术点来研究下,读者可能在工作中可能不会哦涉及到,一般的应用软件也不会有这个需求 但是作为程序员呢,多了解一下也是好的。 Andro...

3136

扫码关注云+社区

领取腾讯云代金券