DIV盒模型和伪类-tap选项

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值