CSS-hover

最新推荐文章于 2023-07-28 15:51:24 发布

weixin_30652491

最新推荐文章于 2023-07-28 15:51:24 发布

阅读量63

点赞数

原文链接：http://www.cnblogs.com/momo8238/p/7422755.html

版权

1. padding:0 10px; 表示上下边距是0，左右边距是10.

2. padding:0 10px 0 10px；上-右-下-左。（顺时针方向）

3. .pg-header .menu:hover；表示只要鼠标移动到当前标签上时，就会应用这个下面所定义的样式。

hover: 徘徊在.......的旁边的意思。

4. 模拟抽屉网的首页：

http://dig.chouti.com/

<!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;
        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">新鲜事</a>
            <a class="menu">热点</a>
        </div>

    </div>
    <div class="pg-body">
        <div class="w">asdf</div>
    </div>
</body>
</html>

运行结果：

抽屉网：

自己写的练习程序，完美达到了课上的效果：需要特别注意的地方：

1. height:48px; line-height:48px; 实现了文字上下居中。

2. margin-top:50px; 为了不与头部粘在一起，中间留了2px的间距。

3. 因为a标签是行内标签，所以无法修改高度等属性。需要display:inline-block;改成可编辑类型（块级标签）.

4. pg-header .menu:hover 只有鼠标点击的时候，才会生效。

5. margin:0 auto 实现自动左右居中。表示上下边界为0，左右则根据宽度自适应相同值（即居中）

6. 写程序的时候，一定要注意要用分号，否则很容易掉坑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <style>
        .pg-header{
        height:48px;
        line-height:48px;
        background-color:#2459a2;
        }
        .pg-body{
        margin-top:50px;
        }
        .pg-header .menu{
        display:inline-block;
        height:48px;
        width:48px;
        color:white;
        text-align:center;
        }

        .pg-header .menu:hover{
        background-color:green;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div style="width:960px;margin:0 auto;background-color:red;">
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">图片</a>
        </div>
    </div>
    <div class="pg-body"></div>
</body>
</html>

效果：

转载于:https://www.cnblogs.com/momo8238/p/7422755.html

weixin_30652491

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-hover

1. padding:0 10px; 表示上下边距是0，左右边距是10.2. padding:0 10px 0 10px；上-右-下-左。（顺时针方向）3. .pg-header .menu:hover；表示只要鼠标移动到当前标签上时，就会应用这个下面所定义的样式。hover: 徘徊在.......的旁边的意思。4. 模拟抽屉网的首页：http://dig.chout...
复制链接

扫一扫

CSS-hover

“相关推荐”对你有帮助么？