<!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. Python——正则表达式特殊符号及用法

    由于正则表达式的内容比较多,所以单独写成一系列文章,主要内容是根据小甲鱼所讲的内容综合一下正则表达式的笔记. 贴上小甲鱼的<Python3 如何优雅地使用正则表达式>系列可观看的博客地址: ...

  2. LuaJavaBridge - Lua 与 Java 互操作的简单解决方案

    http://dualface.github.io/blog/2013/01/01/call-java-from-lua/ 最近在游戏里要集成中国移动的 SDK,而这些 SDK 都是用 Java 编写 ...

  3. DP 网易内推：合唱团

    链接:https://www.nowcoder.com/questionTerminal/661c49118ca241909add3a11c96408c8来源:牛客网 [编程题]合唱团 热度指数:18 ...

  4. 使用语句清除sqlserver数据库日志文件

    修改其中的3个参数(数据库名,日志文件名,和目标日志文件的大小),运行即可 SET NOCOUNT ON DECLARE @LogicalFileName sysname, @MaxMinutes I ...

  5. LogCook 一个简单实用的Android日志管理工具

    众所周知,日志的管理是软件系统很重要的一部分,千万不可忽略其重要性.完整的日志将会在系统维护中起着异常重要的作用,就好像磨刀不误砍柴工一样,日志就像对系统进行分析的工具,工具便捷了,对系统分析起来就能 ...

  6. Servlet之初始化参数和传递数据（ServletConfig，ServletContext ）

    ServletConfig 容器初始化一个Servlet的时候,会为这个Servlet建一个唯一的Servletconfig的对象(Servlet的配置对象) 容器会从部署的描述文件(web.xml) ...

  7. gcc & gdb & make 定义与区别

    GCC 通常所说的GCC是GUN Compiler Collection的简称,除了编译程序之外,它还含其他相关工具,所以它能把易于人类使用的高级语言编写的源代码构建成计算机能够直接执行的二进制代码. ...

  8. Centos7.0 安装 oracle 11g 以及相关问题解决

    参考其他的资源和自己实践内容总结出来的流程

  9. SubTool 电影字幕下载程序

    项目地址 https://github.com/backtracker/SubTool 程序说明 作为一个高清电影爱好者,找字幕的痛苦懂的人自然会懂.我在网上找了很久,并没有找到好用的字幕下载程序,于 ...

  10. 缓存与ABP Redis Cache

    缓存与ABP Redis Cache 为什么要用缓存 为什么要用缓存呢,说缓存之前先说使用缓存的优点. 减少寄宿服务器的往返调用(round-trips). 如果缓存在客户端或是代理,将减少对服务器的 ...