<!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. RAC2——11g Grid Infrastructure的新机制

    版权声明:本文为博主原创文章,未经博主允许不得转载. 可以看到,最初CRS(Cluster Ready Services)名词的起源就是因为10.1中作为集群软件的原因.后来经历了Clusterwar ...

  2. 【android】android 常用adb 和 adb shell 命令

    db是SDK自带的工具,可实现桥接功能:adb shell 可以与手机系统建立交互,是基于andoid Linux系统下的操作 ADB常用命令: 1. 查看设备         adb  device ...

  3. hyperledger fabric各类节点及其故障分析

    1.Client节点 client代表由最终用户操作的实体,它必须连接到某一个peer节点或者orderer节点上与区块链网络通信.客户端向endorser提交交易提案,当收集到足够背书后,向排序服务 ...

  4. 转Python 和C#的交互

    http://www.cnblogs.com/wilber2013/category/708919.html IronPython和C#交互   IronPython是一个.NET平台上的Python ...

  5. C# OracleBulkCopy 批量插入oracle数据库的方法

    只有安装了oracle 11G客户端的机器上才可以用,要用到ODP.NET组件中的oracleDataAccess.DLL,命名空间引用为Oracle.DataAccess.Client; 引用:Or ...

  6. 【Spring学习笔记-MVC-1.1--】@PathVariable与@RequestParam、@CookieValue等比较

    作者:ssslinppp       1. 摘要 本文结构如下: 2. @RequestMapping 通配符方式: 3. @PathVariable URL请求时,使用占位符: 4. @Reques ...

  7. jackson快速实现对象与json之间的转换

    Maven依赖: <dependency> <groupId>com.fasterxml.jackson.dataformat</groupId> <arti ...

  8. python 用到的函数记录

    1. ctime() 获取当前的时间 2. import  random random.randint(0,99) 随机产生0到99之间的数值 (包含0和99) (整数!!) 3. 往列表添加数值 l ...

  9. 用几分钟了解R语言入门知识

    第一篇——用几分钟了解R语言入门知识 第二篇——用几分钟了解R语言入门知识(续) 关于数据分析学习笔记的计划(以及目录)

  10. linux 添加secondary ip

    linux下ip地址除了primary外,还有两种:1. ip alias(子接口)2. secondary ip(辅助ip) 都可在一块物理网卡上添加,alias由ifconfig添加,ifconf ...