index

来源：互联网发布：数据库管理系统是编辑：程序博客网时间：2024/06/08 17:24

1.测试页面

<head>    <meta charset="utf-8">    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />    <title></title>    <base target="content" />    <script type="text/javascript" src="js/jquery.min.js"></script>    <link rel="shortcut icon" href="favicon.ico">     <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">    <style>        body{            margin: 0;            padding: 0;            overflow: hidden;        }        .page{            position: absolute;            /*left: 300px;*/            width: 100%;            height: 100%;            background-color: lavender;        }        .top{            position: fixed;            width: 100%;            height: 60px;            background-color: royalblue;            z-index: 500;        }        .mybtn{            margin-top: 15px;            margin-left: 15px;            color: #FFFFFF;            font-size: 28px;        }        .mybtn:hover{            cursor: pointer;        }        .backimg{            position: absolute;            width: 100%;            height: 100%;            z-index: 1000;            background-color: black;            opacity: 0.3;            display: none;        }        .right-dh{            border: 1px solid #000000;            position: absolute;            left: -300px;            background-color: black;            width: 300px;            height: 100%;            z-index: -10;        }        .right-dh-tx{            text-align: center;        }        .right-dh-tx img{            display: block;            width: 110px;            border-radius: 50%;            border: 3px solid #FFFFFF;            margin: 100px auto 30px;        }        .right-dh-tx span{            color: #FFFFFF;        }        .cont iframe{            position: absolute;            top: 65px;            width: 100%;            height: 100%;            border: 0px;            /*background-color: brown;*/        }        .dh-btn{            margin-top: 50px;            /*border-top: 1px solid gray;*/        }        .dh-btn a{            display: block;            color: #FFFFFF;            text-decoration: none;            /*border-bottom: 1px solid gray;*/            height: 60px;            line-height: 60px;            text-indent: 20px;        }        hr{            width: 200px;            color: gainsboro;            opacity: 0.3;            margin-top: 50px;        }    </style>    <script>        $(document).ready(function(){            //侧滑按钮点击事件            $(".mybtn").click(function(){                //页面整体侧滑                $(".page").animate({                    left:'300px'                });                //显示透明度div层                $(".backimg").css({                    "display":"block"                });                //左侧导航右滑                $(".right-dh").animate({                    left:'0px'                });            });            //还原点击事件            $(".backimg").click(function(){                //页面整体左滑动                $(".page").animate({                    left:'0px'                });                //显示透明度div层隐藏                $(".backimg").css({                    "display":"none"                });                //左侧导航右滑                $(".right-dh").animate({                    left:'-300px'                });            });            //栏目选择事件            $(".dh-btn a").click(function(){                //页面整体左滑动                $(".page").animate({                    left:'0px'                });                //显示透明度div层隐藏                $(".backimg").css({                    "display":"none"                });                //左侧导航右滑                $(".right-dh").animate({                    left:'-300px'                });            });        });    </script></head><body>    <!--右侧导航-->    <div class="right-dh">        <!--右侧导航头像-->        <div class="right-dh-tx">            <img src="img/tx.jpg" />            <span>刘德华</span>        </div>        <hr />        <!--导航栏-->        <div class="dh-btn">            <a class="dj" href="grzl.html">                <i class="fa fa-bars"></i>&nbsp;&nbsp;个人资料            </a>            <a href="zpzs.html">                <i class="fa fa-bank"></i>&nbsp;&nbsp;作品展示            </a>            <a href="ysxz.html">                <i class="fa fa-beer"></i>&nbsp;&nbsp;艺术写真            </a>            <a href="yyjl.html">                <i class="fa fa-bold"></i>&nbsp;&nbsp;演绎经历            </a>        </div>    </div>    <!--左侧界面-->    <div class="page">        <div class="backimg"></div>        <div class="top">            <!--向右滑动按钮-->            <i class="mybtn fa fa-user"></i>        </div>        <!--主要内容-->        <div class="cont">            <iframe name="content" src="shouye.html"></iframe>        </div>    </div></body>

2.个人资料

个人资料

3.首页

    这是首页</body>

4.艺术写真

艺术写真

5.演艺经历

演艺经历

阅读全文

0 0