<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <style type="text/css">

         div{

             width: 300px;

             height: 200px;/*浏览器默认字体大小16px*/

             margin:1em;/*em以父元素字体为基准*/

             padding: 1rem;/*rem以根元素字体大小为基准*/

             border:2px solid green;

             outline: 2px solid red;

             outline-offset: 2px;/*此为新增属性，不可写到复合属性outline中*/

             display: ;/*none：元素不显示。block:显示为块级元素，特点：换行，可设置宽高。inline:行内元素，特点大小自适应，不换行。*/

         }

         #div1{

             opacity: 0.5;/*元素及元素中的内容被设置透明*/

             background:rgb(80,70,60);

             cursor:nesw-resize;/*默认default或auto，其他值hand、pointer、crosshair、text、wait、e-resize（左右↔箭头）、ne-resize（左下↙右上↗箭头）、n-resize（上下箭头）、nw-resize（左上↖右下↘箭头）、w-resize同e-resize、sw-resize同ne-resize、s-resize同n-resize、se-resize同nw-resize*/

         }

         #div2{

             background:rgba(80,70,60,0.5);/*只有元素本身被设置透明*/

             cursor:;

         }

     </style>

 </head>

 <body>

     <div id="div1">opacity</div>

     <div id="div2">rgba()</div>

 </body>

 </html>

下拉菜单：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <nav>

         <ul class="ul1">

             <li>

                 <a href="">直辖市</a>

                 <ul class="ul2">

                     <li><a href="">北京</a></li>

                     <li><a href="">上海</a></li>

                 </ul>

             </li>

             <li>

                 <a href="">安徽</a>

                 <ul class="ul2">

                     <li><a href="">合肥</a></li>

                     <li><a href="">芜湖</a></li>

                     <li><a href="">马鞍山</a></li>

                 </ul>

             </li>

             <li>

                 <a href="">江苏</a>

                 <ul class="ul2">

                     <li><a href="">南京</a></li>

                     <li><a href="">苏州</a></li>

                 </ul>

             </li>

         </ul>

     </nav>

 </body>

 </html>
 *{

     margin:;

     padding:;

 }

 .ul1{

     margin:100px;

 }

 ul{

     list-style: none;/*去掉列表前的小图标*/

 }

 a{

     text-decoration: none;/*去掉超链接下划线*/

 }

 .ul1>li{/*子元素选择器，不包括孙元素*/

     width: 100px;

     height: 2rem;

     background:rgba(40,70,190,0.5);

     font-size: 21px;

     line-height: 2rem;/*此属性值会被子元素继承*/

     text-align: center;

     border-radius: 10px 10px 0 0;

     float: left;

     margin:1px;

 }

 .ul2{

     background:rgba(30,60,160,0.1);

     border-radius: 0 0 10px 10px;

     display: none;

 }

 .ul2>li>a:hover{

     background:rgba(30,200,30,0.7);

     display: inline-block;/*使行内元素变成行内块元素，以便能设置宽高。*/

     width: 80%;

     height: 1.5rem;

     line-height: 1.5rem;/*此技巧可使文字在背景色中上下剧中*/

     border-radius: 1em;

     font-weight: bold;

 }

 .ul1>li:hover>ul{

     display: block;

 }

【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别的更多相关文章

  1. px、em、rem区别介绍

    px.em.rem区别介绍 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能 ...

  2. CSS3- px、em、rem区别介绍

    PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em ...

  3. css总结5：px、em、rem区别介绍

    1 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. 浏览器无法调整px单位的字体,以em或rem为字体单位可调整字体. 2 EM em是相对长度单 ...

  4. 移动端em与rem区别

    rem与em都是相对单位,我们使用它们的目的就是为了适应各种手机屏幕. rem是根据html根节点来计算的,而em是继承父元素的字体.比如下面一个demo <!doctype html> ...

  5. em，rem区别比较

    rem是基于html元素的字体大小来决定,而em则根据使用它的元素的大小决定. 注意:很多人错误以为em是根据父类元素,实际上是使用它的元素继承了父类元素的属性才会产生的错觉. 主要区别 em 和 r ...

  6. em 与 rem 区别.

    em 与自身  字体大小有关. rem 与 body 的字体大小有关..

  7. CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

    盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...

  8. em和rem区别

    em大小依据父元素的字体大小的倍数 rem大小依据与根元素,即html标签的font-size大小

  9. CSS3:透明度

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 安卓自定义控件（四）实现自定义Layout

    本来我是不准备写这篇文章的,我实在想不出有什么样奇怪的理由,会去继承ViewGroup然后自定义一个布局,大概是我的项目经验还不够吧,想了好久,想到了这样一个需求: 需求 如图:在项目中经常有一个这样 ...

  2. 日志的艺术（The art of logging）

    程序员学习每一门语言都是从打印“hello world”开始的,日志也是新手程序员学习.调试程序的一大利器.当项目上线之后,也会有各种各样的日志,比如记录用户的行为.服务器的状态.异常情况等等.打印日 ...

  3. ES6这些就够了

    刚开始用vue或者react,很多时候我们都会把ES6这个大兄弟加入我们的技术栈中.但是ES6那么多那么多特性,我们需要全部都掌握吗?秉着二八原则,掌握好常用的,有用的这个可以让我们快速起飞. 接下来 ...

  4. Mysql--数据的操作

    1.插入数据 1.1 插入完整数据记录 语法1: 例子: 语法2: 例子: 1.2 插入数据记录一部分 语法: 例子: 1.3 插入多条数据记录 1.插入多条完整的数据 语法: 例子:   插入多条部 ...

  5. ubuntu实时显示网速cpu占用和内存占用率

    ubuntu实时显示网速cpu占用和内存占用率 大家在使用ubuntu的时候,有没有想让它实时显示网速,内存占用率,或者cpu占用率呢?现在我就教大家怎么实现,就像下面这样 1. 添加indicato ...

  6. 【原创精品】程序员最强大的利器——电子笔记本的思考（1）（ver0.3）

    [原创精品]程序员最强大的利器,本文以下内容全都是作者EverStenis(胡佳吉)的原创,未经授权不得转载,抄袭必究. 我想问大家一个问题,对于我们程序员来说,在我们的武器工具库中,最强大的一件利器 ...

  7. zanphp 初探----安装篇

    安装 zanphp 的安装详细步骤具体在 http://zanphpdoc.zanphp.io/,但是安装的时候,还是踩了一些坑,Mac 和 Ubuntu 我都安装过, 分享大家注意一下. PHP 版 ...

  8. gdb的多线程调试

    info threads 可以查看当前进程有哪些线程 thread ID 可以切换到线程ID bt 查看当前线程堆栈 set scheduler-locking on多线程调试过程中, 线程会来回切换 ...

  9. 10970 - Big Chocolate

    题意 :已知n*m的巧克力,问需要掰多少次能让巧克力成为最小的一块: #include<iostream> using namespace std; int main() { int n, ...

  10. Servlet与Jsp的结合使用实现信息管理系统二

    PS:前面说了抽取框架的搭建,接着就要我们开始进入网址的时候就要查到全部信息并显示在首页,我们用到的MySql数据库,具体步骤是: 创建数据库,创建表,添加信息 项目中调入mysql的jar包 mys ...