div+css登陆界面案例

浏览数：19 / 时间：2015年06月09日

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body{
            margin: 0px;
            padding:0px;
            font-size:12px;
            background-color: #1873aa;
            text-align: center;
            overflow: hidden;
        }
        #style1{
            background-image: url(images/left1.gif);
            width:165px;
            height: 28px;
            
            color: #FFFFFF;
            padding-top: 1px;
        }
        #style1 div{
            margin-top:7px;
            margin-left: -15px;
        }
        #container{
            width:165px;
            height: 500px;
            background-color: #FFFFFF;
            margin-left: 7px;
        }
        .style211{
            background-image: url(images/left2.gif);
            width: 152px;
            height: 23px;
            margin-left: 9px;
            padding-top: 1px;

        }
        .style211 div{
            margin-top: 2px;
            color: #FFFFFF;
            margin-left: -25px;
            
        }
        .style211 div a{
            text-decoration: none;
            color: #FFFFFF;
            font-size: 13px;
            
        }
        .style212{
            border: 1px solid #95d6e4;
            height: 120px;
            width: 151px;
            color: #033d61;
            text-align: left;
            font-size:15px;
            margin-left: 7px;
        }
        .style212 li{
            padding: 3px;
            margin-left: -5px;
        }
        .style212 ul li a{
            text-decoration: none;
            color: #033d61;
        }
        .style212 ul li a:hover{
            text-decoration: underline;
            font-size: 16px;
        }
    </style>
    <script type="text/javascript">
        function hiddenDiv(div){
            div.style.display=(div.style.display == ‘none‘?‘block‘:‘none‘);
        }
    </script>
</head>
<body>
    <div id="container">
        <div id="style1">
            <div>管理菜单</div>
        </div>

        <div id="style2">
            <div class="style21">
                <div class="style211">
                    <div><a href="javascript:void(0)" onclick="hiddenDiv(document.getElementById(‘style212‘))">业务中心</a></div>
                </div>
                <div class ="style212" id="style212">
                    <ul>
                        <li><a href="">短信群发</a></li>
                        <li><a href="">短信群发</a></li>
                        <li><a href="">短信群发</a></li>
                        <li><a href="">短信群发</a></li>
                    </ul>
                </div>
            </div>
            <div class="style21">
                <div class="style211">
                    <div><a href="javascript:void(0)" onclick="hiddenDiv(document.getElementById(‘style213‘))">业务中心</a></div>
                </div>
                <div class ="style212" id="style213">
                    <ul>
                        <li><a href="">短信群发</a></li>
                        <li><a href="">短信群发</a></li>
                        <li><a href="">短信群发</a></li>
                        <li><a href="">短信群发</a></li>
                    </ul>
                </div>
            </div>

            <div class="style21">
                <div class="style211">
                    <div><a href="javascript:void(0)" onclick="hiddenDiv(document.getElementById(‘style214‘))">业务中心</a></div>
                </div>
                <div class ="style212" id="style214">
                    <ul>
                        <li><a href="">短信群发</a></li>
                        <li><a href="">短信群发</a></li>
                        <li><a href="">短信群发</a></li>
                        <li><a href="">短信群发</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>