<!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 P5103 「JOI 2016 Final」断层 树状数组or线段树+脑子

    太神仙了这题... 原来的地面上升,可以倒着操作(时光倒流),转化为地面沉降,最后的答案就是每个点的深度. 下面的1,2操作均定义为向下沉降(与原题意的变换相反): 首先这个题目只会操作前缀和后缀,并 ...

  2. springcloud中常用的注解@

    @SpringBootApplication是springboot启动类,包括三个注解,他们的作用分别是: @Configuration:表示将该类作用springboot配置文件类 @EnableA ...

  3. java里如何实现两个等长度的字符串数组有多少个元素相同（从最左边开始，一旦遇到不同元素则跳出计数）

    不多说,直接上干货! package zhouls.bigdata.DataFeatureSelection.sim; public class test { public static int st ...

  4. Asp.NetCore 从控制台到WebApi

    一.新建一个.NetCore控制台程序 二.添加依赖项 三.添加Startup.cs文件 using Microsoft.AspNetCore.Builder; using Microsoft.Asp ...

  5. Cache 和 Buffer 区别是什么

    一 从常识来说,cache叫缓存,buffer叫缓冲. 二 尴尬的是缓存是什么?缓冲是什么? 缓冲,缓和冲击.也就是100次保存数据库,先把操作保存到本地,然后满10次才保存到数据库. 缓存,就是缓冲 ...

  6. bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

    答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field $( ...

  7. 微信小程序：从本地相册选择图片或使用相机拍照。

    wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 示例代码: wx.chooseImage({ count: 1, // 默认9 sizeTyp ...

  8. 构建第一个Spring Boot2.0应用之RequestMapping（四）

    在学习controller的时候,测试了在RequestMapping中,value参数中配置集合,实现不同的URL访问同一方法. 本章继续学习和测试RequestMapping的其他特性. 一.Pa ...

  9. 模块详解及import本质

    一.模块的定义 用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能) 本质就是.py结尾的Python文件(文件名test.py,对应的模块名:test) 包:用来从逻辑上组织模块的 ...

  10. zabbix-3.4-服务监控

    服务监控 总览 服务监控(services monitoring)旨在帮助那些想要高级(业务)基础设施的监控的人.在许多情况下,我们关注的不是底层细节,比如磁盘空间不足.CPU 负载高等.我们关注的是 ...