div+css登陆界面案例

<!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>

 

你可能感兴趣的:(div+css)