DIV盒模型和伪类-tap选项

最新推荐文章于 2021-10-18 22:17:09 发布

Jack-小俊

最新推荐文章于 2021-10-18 22:17:09 发布

阅读量735

点赞数

分类专栏： css html 文章标签： div css class

本文链接：https://blog.csdn.net/garvisjack/article/details/54772754

版权

html 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

去年纯用DIV盒模型和伪类做的tap选项菜单系列，
当然编码规范上不够完整，比较冗余，用以收藏借鉴。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DIV盒模型练习</title>
    <style type="text/css">
    body{
    width:100%;
    height:650px;
    background-color: #2E5C6E;
    }
    h1{
    font-size: 45px;
    font-style:italic;
    color:#CB1B45;
    letter-spacing: 3px;
    text-align: center;
    }
    .b2{
    width:1000px;
    height:90px;
    border:1px dotted #ccc;
    border-radius:30px;
    background-color: #3A8FB7;
    position:relative;
    left:180px;
    top:5px;
    }   
    .menu {
        width:1000px;
        margin:50px 0;
        position:absolute;
        top:-25px;
        left:65px;
        z-index: 1000;
    }
    .menu ul{
        padding:0;
        margin:0;
        list-style-type:none;
    }
    .menu ul li{
        float:left;
        position:relative;   /* 向左浮动起来，后面有序排列 */
    }
    .menu ul li a,.menu ul li a:visited{
        display: block;
        border-radius:10px;
        width:140px;
        height:30px;
        border:4px solid #fff;
        border-width:0 1px 0 0;
        background-color: #FBE251;
        padding-top:15px;
        font-weight: bold;
        color:#CB1B45;
        text-align:center;/* 把链接变成块元素处理 */
        text-decoration: none;

    }
    .menu ul li ul{
        display: none;   /* 把子菜单通过display隐藏起来，在鼠标经过时再出现 */
    }
    .menu ul li:hover a{
        width:140px;
        border:1px solid #fff;
        background-color: #86c166;
        border-width:1px 0 1px 0;    /* 鼠标经过 显示背景颜色变色 */
    }
    .menu ul li:hover ul{
        display:block;
        width:140px;
        border:1px solid #fff;
        background-color: #86c166;
        border-width:0 0 1px 0;    /* 让隐藏的子菜单出现，并设置成块元素 */
    }
    .menu ul li:hover ul li a{
        display:block;
        width:140px;
        border:1px solid #fff;
        background-color: #86c166; /* 让子菜单一中的li标签改变样式，有动画感觉 */
        border-width:1px 0 1px 0;
    }
    .menu ul li:hover ul li a:hover{
        width:140px;
        border:1px solid #fff;
        background-color: #BDC0BA;
        border-width:1px 0 1px 0;
    }

    </style>

</head>
<body>
    <div class="b1"><h1>About me</h1></div>
    <div class="b2">
        <div class="menu">
            <ul>
                <li><a href="">故事背景</a>
                    <ul>
                        <li><a href="./aa.html">出生梅州</a></li>
                        <li><a href="./aa.html">深圳长大</a></li>
                    </ul>
                </li>
                <li><a href="">求学经历</a>
                    <ul>
                        <li><a href="./aa.html">珠光小学</a></li>
                        <li><a href="./aa.html">龙珠中学</a></li>
                        <li><a href="./aa.html">深圳中学</a></li>
                        <li><a href="./aa.html">深圳大学</a></li>
                    </ul>
                </li>
                <li><a href="">工作经验</a>
                    <ul>
                        <li><a href="./aa.html">中兴实习</a></li>
                        <li><a href="./aa.html">软件开发</a></li>
                        <li><a href="./aa.html">总裁助理</a></li>
                        <li><a href="./aa.html">PHP课程学习</a></li>
                    </ul>
                </li>
                    <li><a href="">兴趣爱好</a>
                    <ul>
                        <li><a href="./aa.html">篮球</a></li>
                        <li><a href="./aa.html">户外</a></li>
                        <li><a href="./aa.html">健身</a></li>
                        <li><a href="./aa.html">旅行</a></li>
                    </ul>
                </li>
                <li><a href="">情感历史</a>
                    <ul>
                        <li><a href="./aa.html">懵懵懂懂</a></li>
                        <li><a href="./aa.html">伤心往事</a></li>
                    </ul>
                </li>
                <li><a href="">未来展望</a>
                    <ul>
                        <li><a href="./aa.html">脚踏实地</a></li>
                        <li><a href="./aa.html">但求无悔</a></li>
                    </ul>
                </li>
            </ul>

            </div>
    </div>
    <div id="b4" >
        <div class="b5"></div>
        <div class="b6"></div>
        <div class="b7"></div>
        <div class="b8"></div>
        <div class="b9"></div>
        <div class="b10"></div>
        <div class="b11"></div>
        <div class="b12"></div>
    </div>
    <div class="b13"></div>
</body>
</html>