<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .pg_head{

             background-color: #2459a2;

             position: fixed;

             top: 0;

             right: 0;

             left: 0;

             height: 48px;

             line-height:48px;

         }

         .pg_body{

             margin-top: 50px;

         }

         .w{

            width: 980px;

             margin: 0 auto;

         }

         .menu{

             display: inline-block;

             padding: 0 10px 0 10px;

             color: white;

         }

          /*当鼠标移动到标签上时以下属性才会应用*/

         .menu:hover{

             background-color: #5e81ca;

         }

     </style>

 </head>

 <body>

 <div class="pg_head">

     <div class="w">

         <a class="logo">logo</a>

         <a class="menu">全部</a>

         <a class="menu">42区</a>

         <a class="menu">笑话</a>

         <a class="menu">图片</a>

     </div>

 </div>

 <div class="pg_body">

     <div class="w">f</div>

 </div>

 </body>

 </html>

效果如下图
 

抽屉head部分，hover应用，鼠标放上变色的更多相关文章

  1. js选中变色，不选中鼠标放上变色

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  2. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  3. css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；

    css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...

  4. 鼠标放上时显示隐藏的div或者其他代码的“jquery”的三种写法和“JavaScript”的一种写法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 动态创建div（鼠标放上显示二维码）

    最近的微信大行其道.各个网站上都给出的微信验证码,进行手机扫描加入. 怎么创建类似与点击鼠标弹出一个浮动的div显示二维码的这种效果. 1.首先制作好这样的图片,写css样式 <style ty ...

  6. td里的内容宽度自适应 及 鼠标放上显示标题div title

    td里的内容自适应宽度, 用 width:100%控制 strRight+="<td bordercolor='#DEDEDE' width='500px' height='50px' ...

  7. easyui 单元格超出鼠标放上弹出全部

    其他方式:https://www.cnblogs.com/raitorei/p/9878192.html onLoadSuccess : function(data) { //单元格超出部分隐藏并鼠标 ...

  8. jq div鼠标放上、离开马上展开、收缩方法

    <body> <div id="aa" style="width:500px; height:30px; border:1px solid #000&q ...

  9. 用CSS做长度超过长度显示‘...’，当鼠标放上时显示全部内容

    <!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku ...

随机推荐

  1. Luogu P3546 [POI2012]PRE-Prefixuffix 神奇的递推+哈希

    设$f[i]$表示切掉前$i$位和后$i$位后,即剩下$s[i+1]到s[n-i]$,的公共前后缀长度.此时我们发现,$f[i-1]$相对于$f[i]$少切了两个$char$,所以有$f[i-1]\l ...

  2. 非关系型数据库---Memcached

    一.概述 1.Memcached是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库的负载: 2.Memcached通过 在内存中缓存对象和数据 来减少读取数据库的次数,从而提升网站的 ...

  3. Docker | 第七章：Docker Compose服务编排介绍及使用

    前言 前面章节,我们学习了如何构建自己的镜像文件,如何保存自己的镜像文件.大多都是一个镜像启动.当一个系统需要多个子系统进行配合时,若每个子系统也就是镜像需要一个个手动启动和停止的话,那估计实施人员也 ...

  4. ORACLE比较两个数据库的表结构

    create table ESPACE_TABLE( TABLE_NAME VARCHAR2(100) not null) create table ESPACE_COLUMN( TABLE_NAME ...

  5. 关于Arduino项目的构建思想-转自openbook开源杂志

  6. OpenStack Ocata Telemetry 数据收集服务

    1 安装配置计算服务 在所有计算节点上: 1.1 安装配置组件 安装包: # yum install -y openstack-ceilometer-compute 编辑配置文件/etc/ceilom ...

  7. let和const命令整理

    一.let命令 基本用法 ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. for循环的计数器,就很合适使用let命令. for循环还 ...

  8. 【经验总结】datagrid锁定列后重新加载时出现错位问题的解决

    [问题描述]:有时候datagrid设置了锁定列后,在重新加载datagrid数据时,出现锁定列与非锁定列数据错位的问题,如图: [问题分析]:查看css样式我们发现,锁定的列和非锁定的列属于两个不同 ...

  9. Activiti20180624

    1.工作流介绍 工作流(WorkFlow),是对工作流程及其各操作步骤之间业务规则的抽象.概括.描述.工作建模,即将工作流程中的工作如何前后组织在一起的逻辑和规则,在计算机中以恰当的模型进行表示并对其 ...

  10. Wince 6.0获取设备的分辨率 自动设置窗体位置

    调用微软提供给wince的API  “coredll.dll” [DllImport("coredll.dll")] public static extern int GetSys ...