<!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. JavaScript学习笔记（八）——变量的作用域与解构赋值

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  2. 【Java进阶】---map集合排序

    map集合排序         这篇文章讲的不仅仅是map排序,比如把对象按某一属性排序,它都可以解决这些问题.   比如,有N个对象,每个对象有个属性就是成绩,成绩分:优秀,良好,合格.那我们如何按 ...

  3. Mac OS X更新VirtualBox以后Genymotion无法启动的一种情况

    这两天VirtualBox更新到5.0了,于是乎就升级了.结果升级后就中了个大奖,Genymotion起不来了.我用的是Genymotion 2.5,不久前刚升级的,因为官网打不开,不知是不是最新版. ...

  4. 并行设计模式（一）-- Future模式

    Java多线程编程中,常用的多线程设计模式包括:Future模式.Master-Worker模式.Guarded Suspeionsion模式.不变模式和生产者-消费者模式等.这篇文章主要讲述Futu ...

  5. Qt---Xml文件解析

    本文我们通过一个读取Xml文件的小例子来学习QXmlStreamReader. Xml 简介 Xml的全称是可扩展标记语言(EXtensible Markup Language),同HTML一样是一种 ...

  6. Session、Cookie 学习笔记

    在开始今天的博文之前首先为自己庆祝一下自己有了三个粉丝,也有了同僚的评论,说实话因为这个开心了好久!哈哈,好了在开始今天的正题之前,首先大家需要了解以下几点: a. HTTP 协议是无状态的协议,WE ...

  7. Linux服务器病毒清理实践

    背景:客户服务器被挂载木马病毒用以挖矿(比特币). 本次清理通过Linux基本命令完成.其原理也比较简单,通过ps命令查看服务器异常进程,然后通过lsof命令定位进程访问的文件,找到异常文件删除之,最 ...

  8. JavaScript：彻底理解同步、异步和事件循环(Event Loop)

    一. 单线程 我们常说"JavaScript是单线程的". 所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个.不妨叫它主线程. 但是实际上还存在其他 ...

  9. zzuli 1816: 矩形 排序思维

    1816: 矩形 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 179  Solved: 54 SubmitStatusWeb Board Descr ...

  10. spring mvc 复杂参数注入

    过了这么久,又重新把博客拾起来了 来上海工作也已经有将近两周的时间了, 今天在整理项目的时候,遇到了一个关于参数注入的问题 背景: 我的开发前台用的是extjs4,在对后台spring mvc提交表单 ...