DIV设计菜单栏

chap1:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>垂直居中</title>
    <style>
        html,body{
            width:100%;
            height:100%;
        }

        #d1 {
            width: 30%;
            height: 100%;
            display: table;
            text-align:center;
        }
        #d1 div{
            width:100%;
            height:30%;
            display :table-row;
        }
            #d1 div a {
                font-size:50px;
                height: 30%;
                width: 100%;
                display: table-cell;
                vertical-align: middle;
                
                text-decoration:none;
            }
        a:visited {
            color: #6495ED;
        }
    </style>
</head>
<body>
<div id="d1">
    <div><a style="background:#E1EBF5" href="#">1</a></div>
    <div><a style="background:#341d1d">2</a></div>
    <div><a style="background:#9c2c2c">3</a></div>
</div>
</body>
</html>

chap2:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>垂直居中</title>
    <style>
        html,body{
            width:100%;
            height:100%;
        }

        #d1 {
            width: 100%;
            height: 50%;
            display: table;
            text-align:center;
        }
        #d1 div{
            width:100%;
            height:100%;
            display :table-row;
        }

            #d1 div a{
                font-size: 50px;
                height: 100%;
                width: 30%;
                display: table-cell;
                vertical-align: middle;
                text-decoration: none;
            }

        a:visited {
            color: #6495ED;
        }

    </style>
</head>
<body>
<div id="d1">
    <div>
        <a style="background:#E1EBF5" href="#">1</a>
        <a style="background:#341d1d">2</a>
        <a style="background:#9c2c2c">3</a>
    </div>
</div>
</body>
</html>

猜你喜欢