1. z-index  层级   div 层

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

       /* .test {

            width: 150px;

            height: 300px;

            border: 1px solid #ccc;

            margin-top: 100px;

            float: left;

            margin-left: -1px;

        }

        .test:hover {

            border: 1px solid #f40;

            position: relative;

        } */

        .test {

            width: 150px;

            height: 300px;

            border: 1px solid #ccc;

            margin-top: 100px;

            float: left;

            margin-left: -1px;

            position: relative;

        }

        .test:hover {

            border: 1px solid #f40;

            z-index: 1;

        }

    </style>

</head>

<body>

<div class="test"></div>

<div class="test"></div>

<div class="test"></div>

<div class="test"></div>

<div class="test"></div>

</body>

</html>

2.背景半透明

CSS3

background: rgba(0,0,0,0.5);

opacity: 0.5; 让盒子半透明   里面的内容也半透明

CSS实战3的更多相关文章

  1. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  2. DIV+CSS实战(三)

    一.说明 在上篇博客<DIV+CSS实战(二)>中,实现了头部以及Tab标签卡,下面开始实现内容区域,要实现的效果如下: 二.内容最外层的设计(边框) 给最外层加边框,并且设置高度随着里面 ...

  3. DIV+CSS实战(二)

    一.说明 在DIV+CSS实战(一)中,已经把框架搭建起来了,现在就需要往框架里面添加内容了.需要实现的内容如下图: 二.头部的设计(全媒体订阅) 左侧是一张图片+标题 ,右侧是登录名 和上次登录的时 ...

  4. CSS实战中经常出现的问题。

    如果你把这些当做文章来看,那你始终是学不会,而是应该当做手册来看,这些也是自己在写网站遇到的问题.转载请出处. 追梦子前端博客. 1. logo添加内容给h1设置text-index:-9999px的 ...

  5. 第一天CSS实战培训及笔记及感想

    首先,我很激动...... 3点了,凌晨3点了,我居然还没睡.总共不到3个小时的视频消化了6个小时,今天是培训班第一天,一下子就来高强度的讲课,整个上过基础班的都听得东倒西歪,更别说我这个没上基础班滴 ...

  6. CSS 权威指南 CSS实战手册 第四版（阅读笔记）

    前言: 对于程序员,学习是无止境的,知识淘换非常快,能够快速稳固掌握一门新技术,是一个程序员应该具备的素质.这里将分析本人一点点不成熟的心得. 了解一门语言,了解它的概念非常重要,但是一些优秀的设计思 ...

  7. css实战——第一天

    1.  开发前的准备 1.1配置开发环境   sublime  webstorm  vscode  Hbuilder  atom 1.2建立项目文件夹 主页或是首页    index.html   d ...

  8. DIV+CSS实战(四)

    一.说明 在上篇博文<DIV+CSS(三)>中,一个页面基本上展示出来了!下面实现以下页面上的一些功能,比方批量删除等功能.这里以批量删除为例,批量禁止,批量启用和批量删除差不多,只不过一 ...

  9. DIV+CSS实战(一)

    一.说明 作为一个后台的程序员,我也是很少写前端,最近有一个项目,前端主要是由我来负责,就把我在项目中所学到的东西,记录下来!我的页面要嵌入到另一个系统中,所以,并不是按照传统的top,left,co ...

  10. DIV+CSS实战（五）

    一.说明 前面实现了关键词订阅模块,现在实现站点订阅模块,主要实现的是站点添加界面.站点添加界面里面实现一个提示框不在提示的功能(保存到cookie中),还有就是实现一个站点的选择框,包括输入文字自动 ...

随机推荐

  1. 读《Wireshark网络分析就这么简单》读书笔记

    晚上花了两个多小时看完这本书,记录下一些看书过程中的笔记. 一.问题:A和B 是否能正常通信? 两台服务器A和服务器B的网络配置 A                                  ...

  2. SQLServer 2016 Express 安装部署，并配置支持远程连接

    在项目中需要用到SQLServer,于是安装部署了SQLServer,部署的过程中遇到了一下问题,记录一下以便之后遇到同样问题能快速解决. 一.安装包下载 首先下载必要的安装包: 1.SQLServe ...

  3. 封装http请求键值对的js函数

    //封装http请求键值对的函数 function Map() { this.keys = new Array(); this.data = {}; //添加键值对 this.put = functi ...

  4. XML入门介绍（什么是XML及XML格式）

    什么是 XML? XML 指可扩展标记语言(EXtensible Markup Language). XML 是一种很像HTML的标记语言. XML 的设计宗旨是传输数据,而不是显示数据. XML 标 ...

  5. zookeeper入门教程

    zookeeper使用场景,不是很难了解,感觉zk监听节点变化,这个功能比较厉害.zk存储的节点组织结构有点像unix文件系统 1.安装zk 运行环境 centos 7 java 8 zookeepe ...

  6. 使用Anaconda管理环境

    Anaconda指的是一个开源的python发行版本,其包含了conda.Python等180多个科学包及其依赖项. Anaconda是一个开源的包.环境管理器,可以用于在同一个机器上安装不同版本的软 ...

  7. CRM——销售与客户

    一.销售与客户——表结构 1.客户类型 (1)公共客户(公共资源) 必备条件:没有报名: 在必备条件满足的情况下,满足以下任意条件都是公共客户: 3天没有跟进:15天没有成单. (2)我的客户 原销售 ...

  8. 阿里云服务器Linux常用命令

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  9. C++基础--static的用法

    首先,看看变量的存储: int global ; int main() { int stackStore ; int heapStore* = (int *)malloc(sizeof(int)); ...

  10. ArcGIS Engine从服务器(ArcSDE geodatabases)读取数据

    从远程服务器读取数据进行处理,直接贴代码: public class ConnectDB { private static String SERVER = "xxx.xxx.xxx.xxx& ...