<!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;

        }

        /*当鼠标移动到当前标签时 css属性才生效*/

        .pg-header .menu:hover{

            background-color: #f25022;

        }

    </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>

padding 扩大边距 margin-top 与页面顶部的距离 hover鼠标移动到上面出现背景色CSS的更多相关文章

  1. HTML页面滚动时获取离页面顶部的距离2种实现方法

    获取离滚动页面的顶部距离有两种方法一是DOM:而是jquery,具体的实现如下,感兴趣的朋友可以尝试操作下     方法一:DOM 复制代码 代码如下: <script> window.o ...

  2. 获取DOM元素到页面顶部的距离，亲测有效版本（转载）

    原文:https://blog.csdn.net/u013764814/article/details/83825479 干脆点(博客就应该干脆,少扯皮) DOM元素有一个属性是offsetTop,表 ...

  3. 用jquery实现小火箭到页面顶部的效果

    恩,不知道之前在哪看过一个页面效果就是如果页面被滑动了就出现一个小火箭,点击这个小火箭就可以慢慢回到页面顶部,闲的没事,自己搞了一下 需要引入jquery 代码和布局都很简单 <!DOCTYPE ...

  4. css盒子模型、边框border、外边距margin、填充padding、轮廓outline

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  5. padding(内边距)、margin(外边距)、border(边框)

    元素的 padding 控制元素内容 content和元素边框 border 之间的距离. 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,如果你将一个元素的 mar ...

  6. 边框(border)边距(margin)和间隙(padding)属性的区别

    边框属性(border):用来设定一个元素的边线.边距属性(margin):用来设置一个元素所占空间的边缘到相邻元素之间的距离.间隙属性(padding):用来设置元素内容到元素边界的距离.这三个属性 ...

  7. jquery让页面滚动条top，滚动条 顶部

    jquery让页面滚动条top,滚动条 顶部$(document).scrollTop(0);

  8. jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度

    在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取 ...

  9. CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系

    一.基本知识 padding:元素内边距,指的是元素内边框到元素中内容的距离. 用法: padding:长度|百分比 padding-top:长度|百分比 padding-bottom:长度|百分比 ...

随机推荐

  1. List和json数组的转换（赋源代码）

    public class a11111111 { //参数obj可以是 json对象,字符串, list public static void fun(Object obj){ JSONArray d ...

  2. benthos 几个方便的帮助命令

    benthos 的命令行帮助做的是比较方便的,基本上就是一个自包含的帮助文档 全部命令 benthos --help 查询系统支持的caches benthos -list-caches 说明 使用帮 ...

  3. sql 语句执行顺序

    一.sql语句的执行步骤: 1)语法分析,分析语句的语法是否符合规范,衡量语句中各表达式的意义. 2) 语义分析,检查语句中涉及的所有数据库对象是否存在,且用户有相应的权限. 3)视图转换,将涉及视图 ...

  4. smarty学习——基本概念

    学习一种框架,我们最基本的就是掌握框架的思想,同时了解框架的基本语法. 1.对于定界符的了解 有的smarty模板标签都被加上了定界符. 默认情况下是 { 和},但它们是可被改变的.例如,我们假定你在 ...

  5. enjoy dollar vs cash dollar

    當 enJoy 卡 客 戶 憑 enJoy 卡 於 enJoy 卡 「 特 約 商 戶 」 簽 賬 消 費 , 累 積 之 enJoy Dollars 及 Cash Dollars 可 在 同 一 交 ...

  6. Qt treewidget样式的自定义（转）

    这个treewidget样式真是写得让人心碎,主因是那个天杀的表头,真是块古里古怪的硬骨头,令人抓狂,一直找不到给表头设定背景图的方法,让我一度决定弃用tree. 后来表头的属性找到了,下拉条又找不到 ...

  7. java Scanner中的hasNext()方法

    hasNext()方法判断输入(文件.字符串.键盘等输入流)是否还有下一个输入项,若有,返回true,反之false. Scanner sc = new Scanner(new File(" ...

  8. Action<T>和Func<T>委托

    Action<T>和Func<T>委托 泛型Action<T>委托和Func<T>委托是系统定义的两个泛型委托. Action<T>委托表示 ...

  9. select选中事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. flutter初探

    这两天看了下flutter,感觉这两年可能会爆发,所以尝试在mac和win10上面跑了下hello world... 移动技术简介 原生开发 跨平台技术简介 H5+原生(Cordova.Ionic.微 ...