css

亡梦爱人 提交于 2020-02-27 18:26:27

1、hover是鼠标移动到当前标签上时,对应的css属性生效。

padding是给a标签按上、右、下、左的顺序加上边框

hover下面的属性:

background-color: blue;当鼠标移动到使用hover的标签上时,该属性生效。
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .pg-header{        position:fixed;        top:0;        right:0;        left:0;        height:48px;        background-color:#2459a2;        line-height:48px;        }        .pg-body{        margin-top:50px;        }         .w{            width: 980px;            margin: 0 auto;        }        /*padding:给menu加上样式,左右各增加10px边框*/        .pg-header .menu{        display:inline-block;        padding:0 10px 0 10px;        color:white;        }        /*当鼠标移动到当前标签上时,以下css属性才生效*/        .pg-header .menu:hover{        background-color:blue;        }    </style></head><body>    <div class="pg-header">        <div class="w">            <a class="logo">抽屉新热榜</a>            <a class="menu">首页</a>            <a class="menu">专区</a>            <a class="menu">人类发布</a>            <a class="menu">视频</a>            <a class="menu">发现</a>            <a class="menu">话题</a>        </div>    </div>    <div class="pg-body">        <div>你问我答</div>    </div></body></html>

执行结果如下:

如以上结果:

“人类发布”左右两边多了边框,是给a标签使用display属性,使其可以改变边距;

在padding属性,给其加上边框;

当鼠标放置上面时,背景变绿,这是hover的作用。

 


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!