<!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. chapter09

    import java.io.File import java.nio.file._ import scala.collection.mutable.ArrayBuffer/** * Created ...

  2. Jmeter4.0----HTTP Cookie管理器_抓取cookie中的参数（13）

    1.说明 请求结束后,要通过登录用户的JSESSIONID判断用户是否登录成功 2.步骤 第一步:添加 HTTP Cookie管理器 录制前,创建”线程组”,线程组=>配置元件=>HTTP ...

  3. Linux Shell 中数组的语法及应用

    #!/bin/sh## 数组的声明与初始化方法# 先声明后赋值:declare -a arrayarray=(one two three) # 声明并初始化:array_1=(1 2 3 four) ...

  4. MVC中 Remote的用法

    一.web.config加入  <appSettings>    <add key="ClientValidationEnabled" value="t ...

  5. python中*args, **kwargs理解

    先来看个例子: def foo(*args, **kwargs): print 'args = ', args print 'kwargs = ', kwargs print '----------- ...

  6. 导入maven多模块项目 出现的问题

    近日导入maven多模块项目 出现的问题以及解决过程2017年12月04日 20:43:04 守望dfdfdf 阅读数:815 标签: jdkmavenmaven pom.xml 更多个人分类: 工作 ...

  7. Linux - 数值运算

    Shell - 数值运算 因为shell脚本是属于弱语言,没有变量类型的概念,所以定义变量会默认为字符串.就算看上去是一个数字,当直接进行计算时,就会出错: x=1 echo $x+=1 # 输出1+ ...

  8. linux下的tomcat开机自启动(亲测),更改静态ip

    开机自启动Tomcat: 1.修改脚本文件rc.local:vim /etc/rc.d/rc.local 这个脚本是使用者自定的开机启动程序,可以在里面添加想在系统启动之后执行的脚本或者脚本执行命令 ...

  9. Unity3d 游戏中集成Firebase 统计和Admob广告最新中文教程

    之前写过俩相关的教程,最近发现插件官方更新了不少内容,所以也更新一篇Firebase Admob Unity3d插件的教程,希望能帮到大家. Firebase Admob Unity3d插件是一个Un ...

  10. Jscript 命名规范

    变量命名都以类型前缀+有意义的单词组成,用驼峰式命名法增加变量和函式的可读性.例如:sUserName,nCount. 前缀规范:每个局部变量都需要有一个类型前缀,按照类型可以分为:s:表示字符串.例 ...