<!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. 模仿J2EE的session机制的App后端会话信息管理

    此文章只将思想,不提供具体完整实现(博主太懒,懒得整理),有疑问或想了解的可以私信或评论 背景 在传统的java web 中小型项目中,一般使用session暂存会话信息,比如登录者的身份信息等.此机 ...

  2. MongoDB中的MapReduce介绍与使用

    一.简介 在用MongoDB查询返回的数据量很大的情况下,做一些比较复杂的统计和聚合操作做花费的时间很长的时候,可以用MongoDB中的MapReduce进行实现 MapReduce是个非常灵活和强大 ...

  3. 运行java web项目时报错：Several ports (8005, 8080, 8009) required

    运行java web项目时报错:Several ports (8005, 8080, 8009) required 如下图 之所以报上面的错误是因为安装Tomcat的时候,已经把端口8005,8080 ...

  4. Serializable 都这么牛逼了，Parcelable 还要你何用？

    一些闲聊 距离上一篇文章似乎又是很久了,看起来也没有很多反馈,催更就更不用说了.哈哈,放弃了. 话说最近公司在招聘一批至少 5 年开发经验的 Android 开发工程师,我也是忙开了花,激动得不行呀. ...

  5. 用Vim 加密文本

    Vim强大就在于 可以干任何想要做的事情,比如加密.Fedora 18上给大家做一个测试.首先安装 vim: sudo yum install vim -y然后检验模块是否有加密: vim --ver ...

  6. C#.Net与MATLAB集成

    在数学分析工具方面,MATLAB无疑是佼佼者,除了作为软件工具外,MATLAB的自定义编程语言以及混合编程的支持,使其可以与Python.R之类数学分析语言媲美.尤其是在一些传统领域的研究,由于其研究 ...

  7. LINQ学习系列-----3.1 查询非泛型集合

    一.问题起源 LINQ to object在设计时,是配合IEnumerable<T>接口的泛型集合类型使用的,例如字典.数组.List<T>等,但是对于继承了IEnumera ...

  8. PHP设置环境变量

    如果提示php命令不存在.说明未设置.设置方法如下 方法一:直接运行命令 [PHP] 纯文本查看 复制代码 ? 1 export PATH=$PATH:/usr/local/xxxx/php/bin ...

  9. PHP扩展代码结构详解

    PHP扩展代码结构详解: 这个是继:使用ext_skel和phpize构建php5扩展  内容 (拆分出来) Zend_API:深入_PHP_内核:http://cn2.php.net/manual/ ...

  10. 团队合作-如何避免JS冲突

    解决JS冲突的演化过程 1.用匿名函数将脚本包裹起来,可以有效控制全局变量,避免冲突隐患 (function(){})(): 2.定义一个全局作用域的变量str,可以帮助我们在不同匿名函数间通信 严格 ...