HTML5定位实例

来源：互联网发布：勇士队球员得分数据编辑：程序博客网时间：2024/04/29 15:20
幽灵按钮—知识点：定位
<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style type="text/css">            html,body{                margin: 0;                padding: 0;                /*width: 100%;                height: 100%;*/                background: black;            }            #box{                width: 930px;                height: 400px;                margin: 0 auto;                background: black;            }            #box div{                width: 300px;                height: 400px;                float: left;                /*background: gray;*/            }            #box_center,#box_right{                margin-left: 15px;            }            #box div i{                /*display：block 把行级元素转换为块级元素*/                display: block;                /*这里可以用百分比是因为父元素有固定的值*/                width: 100%;                height: 70%;                /*过渡时间 1.5s*/                transition: 1.5s;            }            .mission{                background: url(img/mission.png) no-repeat center;            }            .play{                background: url(img/play.png) no-repeat center;            }            .touch{                background: url(img/touch.png) no-repeat center;            }            .btn{                display: block;                color: white;                width: 100%;                height: 70px;                /*每个单词在按钮的y轴位置*/                line-height: 70px;                /*文本对齐 居中 有很多值，自己试                text-align: center;*/                /*dashed 虚线  soild 实线  dotted 点组成的线*/                border: 2px black solid;                padding-left: 75px;                /* 让盒子的尺寸保持原来的边框的大小*/                box-sizing: border-box;                /*1-500 不加粗  6-9粗， 可以用bold来加粗*/                font-weight: 600;                /*180px 背景在x轴的偏移， center 在y轴的偏移*/                background: url(img/allow.png) no-repeat 195px center;                position: relative;                transition: 0.6s;            }            i:hover{                transform: rotate(360deg);            }            .btn:hover{                /*箭头在按钮中x轴的位置，此处在y轴上自动居中*/                background-position-x: 210px;            }            .line_top{                display: block;                height: 2px;                width: 0px;                background: white;                position: absolute;                top: -2px;                left: -100px;                transition: 1.5s            }            /* 。。。：hover当鼠标悬浮到。。。上面时，触发什么效果*/            /*当鼠标悬浮到btn的时候，让line_top 怎么变化*/            .btn:hover .line_top{                width: 100%;                left: 0px;            }            .line_right{                display: block;                width: 2px;                height: 0px;                position: absolute;                background: white;                right: -2px;                top: -130px;                transition: 1.5s;            }            .btn:hover .line_right{                height: 100%;                top: 0px;            }            .line_left{                display: block;                width: 2px;                height: 0px;                position: absolute;                background: white;                left: -2px;                top: 200px;                transition: 1.5s;            }            .btn:hover .line_left{                height: 100%;                top: 0px;            }            .line_buttom{                display: block;                height: 2px;                width: 0px;                background: white;                position: absolute;                top: 66px;                right: -120px;                transition: 1.5s            }            .btn:hover .line_buttom{                width: 100%;                right: 0px;            }        </style>    </head>    <body>        <div id="box">            <div id="box_left">                <!--此处span标签仅起分格作用,用其他的也行-->                <!--之后改为了i 标签在这里只是一个节点的作用     容器是装东西的，网页中容器可以是节点，节点也可以是容器-->                <i class="mission">                </i>                <a class="btn">                    <span class="line_top"></span>                    <span class="line_right"></span>                    <span class="line_buttom"></span>                    <span class="line_left"></span>                    MISSION</a>            </div>            <div id="box_center">                <i class="play">                    </i>                <a class="btn">                    <span class="line_top"></span>                    <span class="line_right"></span>                    <span class="line_buttom"></span>                    <span class="line_left"></span>                    PLAY</a>            </div>            <div id="box_right">                <i class="touch">                </i>                <a class="btn">                    <span class="line_top"></span>                    <span class="line_right"></span>                    <span class="line_buttom"></span>                    <span class="line_left"></span>                    TOUCH</a>            </div>        </div>    </body></html>
效果如下：（当鼠标悬浮在play上面时，箭头会右移，4条线会滑进组成边框）
这里写图片描述
0 0