5、overflow、hover

一、overflow

1、属性介绍

说明:
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。


##
visible    默认值。内容不会被修剪,会呈现在元素框之外。
hidden    内容会被修剪,并且其余内容是不可见的。
scroll    内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto    如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit    规定应该从父元素继承 overflow 属性的值。


2、应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 200px; width: 300px; overflow: scroll">
        <img src="test.jpg">
    </div>
</body>
</html>


二、hover

1、属性介绍

##
选择鼠标指针浮动在其上的元素,并设置其样式;
hover 选择器可用于所有元素,不只是链接。


2、应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height: 48px;
            background-color: #2459a2;
            line-height: 48px;
        }

        .pg-body{
            margin-top: 50px;
        }

        .w{
            width: 980px;
            margin: 0 auto;
        }

        .pg-header .menu{
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
        }

        .pg-header .menu:hover{
            background-color: blue;
        }
    </style>

</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>

    <div class="pg-body">
        <div class="w">a</div>
    </div>
</body>
</html>
posted @ 2019-05-19 23:55  米兰的小铁將  阅读(314)  评论(0编辑  收藏  举报