div、ul、li页面布局及css

<div id="layerControl" class="layerControl">
    <div class="title"><label></label></div>
    <ul>
        <li>
            <select id="xj_type" class="xj_type">
                <option value="anquan" selected>安全</option>
                <option value="shengchan">生产</option>
            </select>
        </li>
        <li>
            <input placeholder="巡检时间" id="routeDay" type="text" readonly="readonly"
                   onClick="WdatePicker()" class="xj_time"/>
            <button onclick="findRouteBytime();" class="xj_but">查询</button>
        </li>
    </ul>
    <div id="time1" onclick="initRouteInfo(0,riqi)" class="xj_div">
        <ul class="xj_ul">
            <li class="xj_li">
                <label>巡检日期:</label>
                <input id="xjrq1" style="width:130px" disabled="disabled"/>
                <label>已巡检数</label>
                <input id="yxjs1" style="width:50px" disabled="disabled"/>
            </li>
            <li class="xj_li">
                <label>巡检时间</label>
                <input id="xjsj1" style="width:130px" disabled="disabled"/>
                <label>未巡检数</label>
                <input id="wxjs1" style="width:50px" disabled="disabled"/>
            </li>
        </ul>
    </div>
    <div id="time2" onclick="initRouteInfo(1,riqi)" class="xj_div">
        <ul class="xj_ul">
            <li class="xj_li">
                <label>巡检日期</label>
                <input id="xjrq2" style="width:130px" disabled="disabled"/>
                <label>已巡检数</label>
                <input id="yxjs2" style="width:50px" disabled="disabled"/>
            </li>
            <li class="xj_li">
                <label>巡检时间</label>
                <input id="xjsj2" style="width:130px" disabled="disabled"/>
                <label>未巡检数</label>
                <input id="wxjs2" style="width:50px" disabled="disabled"/>
            </li>
        </ul>
    </div>
    <div id="time3" onclick="initRouteInfo(2,riqi)" class="xj_div">
        <ul class="xj_ul">
            <li class="xj_li">
                <label>巡检日期</label>
                <input id="xjrq3" style="width:130px" disabled="disabled"/>
                <label>已巡检数</label>
                <input id="yxjs3" style="width:50px" disabled="disabled"/>
            </li>
            <li class="xj_li">
                <label>巡检时间</label>
                <input id="xjsj3" style="width:130px" disabled="disabled"/>
                <label>未巡检数</label>
                <input id="wxjs3" style="width:50px" disabled="disabled"/>
            </li>
        </ul>
    </div>
    <div id="time4" onclick="initRouteInfo(3,riqi)" class="xj_div">
        <ul class="xj_ul">
            <li class="xj_li">
                <label>巡检日期</label>
                <input id="xjrq4" style="width:130px" disabled="disabled"/>
                <label>已巡检数</label>
                <input id="yxjs4" style="width:50px" disabled="disabled"/>
            </li>
            <li class="xj_li">
                <label>巡检时间</label>
                <input id="xjsj4" style="width:130px" disabled="disabled"/>
                <label>未巡检数</label>
                <input id="wxjs4" style="width:50px" disabled="disabled"/>
            </li>
        </ul>
    </div>
    <div id="time5" onclick="initRouteInfo(4,riqi)" class="xj_div" style="display: none">
        <ul class="xj_ul">
            <li class="xj_li">
                <label>巡检日期</label>
                <input id="xjrq5" style="width:130px" disabled="disabled"/>
                <label>已巡检数</label>
                <input id="yxjs5" style="width:50px" disabled="disabled"/>
            </li>
            <li class="xj_li">
                <label>巡检时间</label>
                <input id="xjsj5" style="width:130px" disabled="disabled"/>
                <label>未巡检数</label>
                <input id="wxjs5" style="width:50px" disabled="disabled"/>
            </li>
        </ul>
    </div>

</div>

<style>
    body,html {
        margin: 0px;
        padding: 0px;
    }
    .layerControl {
        position: absolute;
        bottom: 5px;
        min-width: 580px;
        max-height: 1031px;
        left: 20px;
        top: 75px;
        z-index: 2001;
        /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
        color: #00ff00;
        background-color: #999999;
        background: url("${pageContext.request.contextPath}/resources/lib/gislib/imgs/xj_newframe.png");
        border-width: 10px;
        /*边缘的宽度*/
        border-radius: 10px;
        /*圆角的大小 */
        border-color: #000 #000 #000 #000;
        /*边框颜色*/
    }

    .layerControl .title {
        font-weight: bold;
        font-size: 18px;
        color: #00CC00;
        margin: 10px;
    }

    .layerTree li {
        list-style: none;
        margin: 5px 10px;
    }
    /* 鼠标位置控件层样式设置 */
    #mouse-position {
        float: left;
        position: absolute;
        bottom: 5px;
        width: 200px;
        height: 20px;
        z-index: 2000;
    }

    /*巡检相关样式*/
    .xj_but{
        width: 60px;
        height: 42px;
        size: 20px;
        margin-left: 50px;
        /*圆角的大小 */
        border-radius: 8px;
        /*背景颜色*/
        background-color: #00FF00;
        /*边框颜色*/
        border-color: #00FF00 #00FF00 #00FF00 #00FF00;
    }

    .xj_type{
        width: 300px;
        height: 45px;
        size: 40px;
        font-size: 30px;
        margin-left: 55px;
        margin-top: 10px;
        /*圆角的大小 */
        border-radius: 8px;
    }

    .xj_time{
        width: 300px;
        height: 42px;
        size: 40px;
        font-size: 30px;
        margin-left: 55px;
        margin-top: 10px;
        /*圆角的大小 */
        border-radius: 8px;
    }
    .xj_ul{
        font-size: 25px;
        margin-left: 70px;
    }
    .xj_div{
        width: 580px;
        height: 150px;
        /*margin-top: -13px;*/
        padding-top: 18px;
    }
    .xj_li{
        margin-top: 30px;
    }
    .xj_test {
        position: absolute;
        bottom: 5px;
        min-width: 580px;
        max-height: 1031px;
        right: 20px;
        top: 75px;
        z-index: 2001;
        /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
        color: #00ff00;
        background-color: #999999;
        background: url("${pageContext.request.contextPath}/resources/lib/gislib/imgs/xj_frame.png");
        border-width: 10px;
        /*边缘的宽度*/
        border-radius: 10px;
        /*圆角的大小 */
        border-color: #000 #000 #000 #000;
        /*边框颜色*/
    }
</style>

 

实现的页面效果如图: