<!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. springMVC form表单提交多个对象集合--使用ajax提交--前台json格式数据封装方法

    (function ($) { $.fn.serializeJson = function () { var jsonData1 = {}; var serializeArray = this.ser ...

  2. maven 引入本地项目jar报红线错误解决方法

    问题:本地创建了2个项目,A和B,A引入B,A的pom如下: <dependency> <groupId>com.ebc</groupId> <artifac ...

  3. Win10创建还原点

    Win + E打开任务管理器 右击此电脑,选择属性 单击高级系统设置 选择系统保护 单击系统还原 按照提示操作,OK.

  4. Spark编程模型(下)

    创建Pair RDD 什么是Pair RDD 包含键值对类型的RDD类型被称作Pair RDD: Pair RDD通常用来进行聚合计算: Pair RDD通常由普通RDD做ETL转化而来. Pytho ...

  5. 个人整理的jsp、EL表达式、JSTL标签库的笔记，少概念多实用，需要的留下邮箱，会第一时间分享原稿PDF给大家！

    jsp 第一章 jsp介绍及对比servlet 作用: 动态网页技术,动态的从数据库获取数据 jsp和servlet的优缺点: jsp优点:页面表现方便,利于写html代码 jsp缺点:业务逻辑处理麻 ...

  6. 基于android-uitableview扩展-uilistview项目

    这个项目是正如标题说的那样,是基于uitableview项目为基础进行二次封装的,目的是实现更多的展现形式,项目地址:点击打开 不过,这个使用起来你还必须得会用uitableview扩展(项目地址:点 ...

  7. Java 打印PDF文档的3种情况

    以下内容归纳了通过Java程序打印PDF文档时的3种情形.即: 静默打印 显示打印对话框打印 打印PDF时自定义纸张大小 使用工具:Spire.PDF for Java Jar导入: 方法1:通过官网 ...

  8. NIO（一）缓冲区

    I/O的基本概念 同步和异步的概念: 所谓的同步就是在发出一个请求的时候,如果没有得到结果,就不返回.即调用者主动等待返回结果. 所谓的异步:调用之后直接返回结果,一般通过回调函数来处理这个应用. 阻 ...

  9. Pixel XL 刷机及Root详细方法

    需要准备的文件: 获取 Google USB 驱动程序并安装 https://developer.android.com/studio/run/win-usb 下载Google官方镜像文件 [8.1. ...

  10. Nodejs入门边读边想边记（-）

    Node入门>>一本全面的Node.js教程网站地址:http://www.nodebeginner.org/index-zh-cn.html 本文记录我在阅读上面这个网站的过程中得到的一 ...