HTMLCSS--案例| 超链接美化 | 模态框

HTMLCSS--案例| 超链接美化 | 模态框 | tab栏选项卡

一、超链接美化

二、模态框

三、tab栏选项卡

--------------------------------------------

一、超链接美化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航块超链接美化</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 960px;
            overflow: hidden;
            background-color: purple;
            margin: 100px auto 0;
            border-radius: 5px;  /*倒圆角*/
        }
        .nav ul{
            list-style: none;   /*清除列表前面的圆点*/
        }
        .nav ul li{
            float: left;
            width: 160px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        /*颜色只能在a里设，不能被继承*/
        .nav ul li a{
            width: 160px;
            height: 40px;
            display: block;
            color: white;
            text-decoration: none;

        }
        .nav ul li a:hover{
            background-color: red;
            font-size: 22px;
        }
    </style>
</head>
<body style="margin: 0 auto;">
    <div class="nav">
        <ul>
            <li>
                <a href="#">网站导航</a>
            </li>
            <li>
                <a href="#">网站导航</a>
            </li>
            <li>
                <a href="#">网站导航</a>
            </li>
            <li>
                <a href="#">网站导航</a>
            </li>
            <li>
                <a href="#">网站导航</a>
            </li>
            <li>
                <a href="#">网站导航</a>
            </li>
        </ul>
    </div>
</body>
</html>

二、模态框

模态框用的是固定定位设置z-index值来实现，
要注意z-index的值，要始终保持模态框的对话框z-index是在最大。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用模态框</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            visibility: hidden;
        }
        .bg{
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.3);
            z-index: 1000;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
        .dialog-box{
            position: fixed;
            width: 300px;
            height: 300px;
            background-color: white;
            top: 50%;
            left: 50%;
            transform: translate(-150px,-150px);
            z-index: 1001;
            border-radius: 5px;
        }
        .exit{
            width: 30px;
            height: 30px;
            float: right;
            background-color: darkgreen;
            border-radius: 5px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
        .exit:hover{
            background-color: red;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <button id="btn">点击出现模态框</button>
    <div id="container" class="container">
        <div class="bg"></div>
        <div class="dialog-box">
            <a id="exit" class="exit">x</a>
        </div>
    </div>
</body>
</html>

<script type="text/javascript">
    function $(id) {
        return document.getElementById(id);
    }
    window.onload=function () {
        $('btn').onclick=function () {
            $('container').style.visibility='visible';
        };
        $('exit').onclick=function () {
            $('container').style.visibility='hidden';
        };
    }
</script>

三、tab栏选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .clearfix:after{  content:'.';  clear:both;  display:block; visibility:hidden;  height:0  }
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;

        }
        ul li{
            float: left;
            width: 100px;
            height: 30px;
            cursor: pointer;
        }
        .container{
            width: 300px;
        }
        .container p{
            width: 100%;
            height: 100px;
            display: none;
        }
        li.active{
            background-color: red;
            color: white;
        }
        p.active{
            background-color: indianred;
            color: white;
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
       <ul id="ul" class="clearfix">
            <li class="active">导航</li>
            <li>购买</li>
            <li>促销</li>
        </ul>
        <p class="active">导航导航导航导航导航导航导航导航导航</p>
        <p>买买买买买买买买买买买买</p>
        <p>促销促销促销促销促销促销</p>
    </div>
</body>
    <script type="text/javascript">
        function $(id) {
            return document.getElementById(id);
        }
        var li_objs=$('ul').children;
        var p_objs=document.getElementsByTagName('p');


        for(var i=0;i<li_objs.length;i++){
            //i是全局的，这里给每个标签存一个i
            li_objs[i].index = i;
            li_objs[i].onmouseover=function () {
                for(var j=0;j<li_objs.length;j++){
                    li_objs[j].className='';
                    p_objs[j].className='';
                }
                this.className='active';
                p_objs[this.index].className='active';
            }
        }
    </script>
</html>