<!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. StreamSets 相关文章

    相关streamsets 文章(不按顺序) 学习视频-百度网盘 StreamSets 设计Edge pipeline StreamSets Data Collector Edge 说明 streams ...

  2. SQL语言：DDL/DML/DQL/DCL

    SQL (Structure Query Language)语言是数据库的核心语言. SQL 的发展是从1974年开始的,其发展过程如下: 1974年-----由Boyce和Chamberlin提出, ...

  3. Kibana 基础入门

    原文地址:Kibana 基础入门 博客地址:http://www.extlight.com 一.前言 Kibana 是一个开源的分析和可视化平台,旨在与 Elasticsearch 合作.Kibana ...

  4. java工具类-FreeMarker

    package com.huawei.it.citools.utils; import java.io.File;import java.io.IOException;import java.io.S ...

  5. 多线程执行顺序诡异现象谈，你不知道的pthread_create

    引文:学而时习之,不亦说乎.总是忙于具体项目,业务功能的实现:关于编程本身的技能都要有些生疏了,于是就选择了几个专题做了一次温习,重点放在了多线程和多进程上,跑了一个实例,居然有新的发现: (1)多个 ...

  6. SpringCloud统一配置笔记

    Server端: pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...

  7. bzoj3871: [Neerc2013 C]Cactus Automorphisms || 3899: 仙人掌树的同构

    Description 给定一个N,N<=50 000个节点的仙人掌,其是指每条边最多在一个环中的无向图,求仙人掌有多少种自同构.自同构是指得是图的顶点集合V到V的变换M, 以P1^a1*P2^ ...

  8. openstack 环境搭建

    python单步调试配置(eclipse+pydev+keystone-2014.1.b2),catch捕获异常的时候eclipse里面也会中断的:建议搞个全新的eclipse解压缩副本,专门调试op ...

  9. python selenium-5根据unittest组织测试用例

    driver:浏览器driver存放地址 testcase:测试用例目录 report:测试结果保存目录 runtest.py:执行文件 test_search1.py搜索selenium,test_ ...

  10. img atl和a title

    今天发现一个有趣的现象.   <a href="#" title="a"><img src="xxx.jpg" alt=& ...