<!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. Winwos Server 2012发布ASP.NET MVC5 项目

    一.本文实验环境: Windows Server 2012 R2 Visual Studio 2015 项目为:ASP.NET MVC 5.0,使用的是SQL SERVER 2008 R2数据库 二. ...

  2. KMP - LeetCode #459 Repeated Substring Pattern

    复习一下KMP算法 KMP的主要思想是利用字符串自身的前缀后缀的对称性,来构建next数组,从而实现用接近O(N)的时间复杂度完成字符串的匹配 对于一个字符串str,next[j] = k 表示满足s ...

  3. [最短路]P1828 香甜的黄油 Sweet Butter

    题目描述 农夫John发现做出全威斯康辛州最甜的黄油的方法:糖.把糖放在一片牧场上,他知道N(1<=N<=500)只奶牛会过来舔它,这样就能做出能卖好价钱的超甜黄油.当然,他将付出额外的费 ...

  4. webpack 3.X学习之Babel配置

    Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: ...

  5. Unity与iOS原生代码之间的相互调用

    1.Unity调用iOS: 1.1.在Unity C#中: [ DllImport( "__Internal" )] private static extern int _show ...

  6. 为什么大家觉得自学HTML5难?

    互联网发展到今天,越来越多的技术岗位人才出现了稀缺的状态,就拿当前的HTML5来讲,基本成为了每家互联网公司不可缺少的人才.如果抓住这个机会,把HTML5搞好,那么前途不可限量,而且这门行业是越老越吃 ...

  7. C#学习笔记---数据库连接与异常

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  8. centos7下部署Django(nginx+uwsgi+python3+django)

    系统版本 centos7 python版本 使用官方python3.6.3正式版 django版本 使用本文发布时最新的1.11.7 uwsgi版本 使用本文发布时最新的2.0.15 nginx版本 ...

  9. Android Lint的使用

    一.概述 Android Lint是在ADT 16(和 Tools 16)引入的一个新工具,可以扫描Android 项目源码中潜在的bug .例如: 缺少翻译(和未使用的翻译)布局性能问题(老的lay ...

  10. NodeJS网络爬虫

      原文地址:NodeJS网络爬虫   网上有很多其他语言平台版本的网络爬虫,比如Python,Java.那怎么能少得了我们无所不能的javascript呢