1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          .pg_head{
  8.              background-color: #2459a2;
  9.              position: fixed;
  10.              top: 0;
  11.              right: 0;
  12.              left: 0;
  13.              height: 48px;
  14.              line-height:48px;
  15.          }
  16.          .pg_body{
  17.              margin-top: 50px;
  18.          }
  19.          .w{
  20.             width: 980px;
  21.              margin: 0 auto;
  22.          }
  23.  
  24.          .menu{
  25.              display: inline-block;
  26.              padding: 0 10px 0 10px;
  27.              color: white;
  28.          }
  29.           /*当鼠标移动到标签上时以下属性才会应用*/
  30.          .menu:hover{
  31.              background-color: #5e81ca;
  32.          }
  33.      </style>
  34.  </head>
  35.  <body>
  36.  
  37.  <div class="pg_head">
  38.      <div class="w">
  39.          <a class="logo">logo</a>
  40.          <a class="menu">全部</a>
  41.          <a class="menu">42区</a>
  42.          <a class="menu">笑话</a>
  43.          <a class="menu">图片</a>
  44.      </div>
  45.  </div>
  46.  <div class="pg_body">
  47.      <div class="w">f</div>
  48.  
  49.  </div>
  50.  
  51.  </body>
  52.  </html>
  53.  
  54. 效果如下图
  1.  

抽屉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. Luogu P2290 [HNOI2004]树的计数 Prufer序列+组合数

    最近碰了$prufer$ 序列和组合数..于是老师留了一道题:P2624 [HNOI2008]明明的烦恼 qwq要用高精... 于是我们有了弱化版:P2290 [HNOI2004]树的计数(考一样的可 ...

  3. 弹层组件文档 - layui.layer

    http://www.layui.com/doc/modules/layer.html

  4. 非局部均值去噪（NL-means）

    非局部均值(NL-means)是近年来提出的一项新型的去噪技术.该方法充分利用了图像中的冗余信息,在去噪的同时能最大程度地保持图像的细节特征.基本思想是:当前像素的估计值由图像中与它具有相似邻域结构的 ...

  5. C. Glass Carving 正着做或者倒着做都可以

    http://codeforces.com/problemset/problem/527/C 这题总体思路就是,每画一条线,然后就找到x间距的最max值和y间距的最max值,相乘就是当前的ans 那么 ...

  6. 台州OJ 3709: Number Maze （数组越界不报RE，报WA坑爹）

    http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=3709 You are playing on ...

  7. mac下远程win8.1时提示"桌面连接无法验证您希望连接的计算机的身份"的解决办法

    在os x下使用远程桌面到win8.1,总出现“远程桌面连接无法验证您希望连接的计算机的身份”的提示. 解决方法:1.网上各种解释,包括防火墙是否打开,是否去掉“仅允许运行使用网络级别身份验证的远程计 ...

  8. AJPFX关于面向对象之封装，继承，多态 （上）

    Java是一种面向对象的语言,这是大家都知道的,他与那些像c语言等面向过程语言不同的是它本身所具有的面向对象的特性--封装,继承,多态,这也就是传说中的面向对象三大特性 一:从类和对象开始说起: Oo ...

  9. hibernate课程 初探单表映射1-7 hibernate配置文件新建

    hibernate  配置文件新建 1 右键src==>new==>other==>hibernate configuration File==>next==>next= ...

  10. 自定义HashMap的键

    用自定义的类型作为HashMap的key,必须同时重载hashCode()和equals(),才可以实现在HashMap中的查找自定义键. 例如自定义Point类: public class Poin ...