<!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. SICK激光雷达LMS511测量数据说明

    帧结构说明 LMS511的官方手册存在几个版本,在<Laser Measurement Systems of the LMS500 Product Family>的英文手册中,对单次(连续 ...

  2. C语言系列之printf和%12d的用法（三）

    看C语言程序的时候,往往会遇到printf函数输出,在此,我想总结一下printf的一般用法以及%12d是什么意思 printf函数的一般格式为 printf(格式控制,输出列表): 例如: prin ...

  3. IIS发布网站浏览之后看到的是文件目录 & Internal Server Error 处理程序“ExtensionlessUrlHandler-ISAPI-4.0_64bit”在其模块列表中有一个错误模块“IsapiModule” 解决方法 & App_global.asax.pduxejp_.dll”--“拒绝访问。 ”

    Q:IIS发布网站浏览之后看到的是文件目录 A:它出现了一个说到.NET4.0 更高框架什么的错误,所以我将 .NTE CRL版本由4.0改为2.0了,改为2.0后就出现了只能浏览文件目录了.改为4. ...

  4. 为你解读2017年Java开发前景如何

    社会上普遍认为程序员是一份高薪职业,确实,相较于其他行业,大多数工作1-3年的程序员年收入都在10-20万.据权威机构统计,在所有的软件开发类人才中对Java开发人才的需求量最大,达到了60%-70% ...

  5. JavaScript的兼容

    兼容总结 如果两个都是属性,用逻辑 || 做兼容 如果有一个是方法,用三元做兼容 如果多个属性或方法,封装函数做兼容 获取class属性值的兼容 function getClass (obj){ if ...

  6. TFboy养成记 简单小程序（Variable & placeholder）

    学习参考周莫烦的视频. Variable:主要是用于训练变量之类的.比如我们经常使用的网络权重,偏置. 值得注意的是Variable在声明是必须赋予初始值.在训练过程中该值很可能会进行不断的加减操作变 ...

  7. thinkphp3.2.3的使用心得之i方法（零）

    从模板传参到控制器 模板中代码: <volist name="list" id="vo"> <a href="__CONTROLLE ...

  8. selenium实现自动下载文件

    #coding:utf-8'''说明:导出'''from selenium import webdriverfrom public.highlightElement import highlightf ...

  9. 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上

    .table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6r ...

  10. 天梯赛 L2-019. 悄悄关注 map

    L2-019. 悄悄关注 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 新浪微博上有个"悄悄关注",一个用 ...