【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别
<!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区别的更多相关文章
- px、em、rem区别介绍
px.em.rem区别介绍 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能 ...
- CSS3- px、em、rem区别介绍
PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em ...
- css总结5:px、em、rem区别介绍
1 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. 浏览器无法调整px单位的字体,以em或rem为字体单位可调整字体. 2 EM em是相对长度单 ...
- 移动端em与rem区别
rem与em都是相对单位,我们使用它们的目的就是为了适应各种手机屏幕. rem是根据html根节点来计算的,而em是继承父元素的字体.比如下面一个demo <!doctype html> ...
- em,rem区别比较
rem是基于html元素的字体大小来决定,而em则根据使用它的元素的大小决定. 注意:很多人错误以为em是根据父类元素,实际上是使用它的元素继承了父类元素的属性才会产生的错觉. 主要区别 em 和 r ...
- em 与 rem 区别.
em 与自身 字体大小有关. rem 与 body 的字体大小有关..
- CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充
盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...
- em和rem区别
em大小依据父元素的字体大小的倍数 rem大小依据与根元素,即html标签的font-size大小
- CSS3:透明度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Android TextView属性大全
android:ems 设置TextView的宽度为N个字符的宽度. android:maxems 设置TextView的宽度为最长为N个字符的宽度.与ems同时使用时覆盖ems选项.android: ...
- 洛谷 P3391 【模板】文艺平衡树
题目背景 这是一道经典的Splay模板题--文艺平衡树. 题目描述 您需要写一种数据结构,来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4 ...
- [贪心][高精]P1080 国王游戏(整合)
题目描述 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这 n 位大臣排成一排,国王站在队伍的最 ...
- System.UnauthorizedAccessException 错误
给目录添加 "Authenticated Users" 这个用户的 读写权限
- 十二、Hadoop学习笔记————Hive的基本原理
一般用户用CLI(命令行界面)接口,元数据库含有表结构 单用户.多用户.远程服务 生成db文件,只能单客户端使用数据库 多用户是最常用的使用模式 配置与多用户一致 数据格式用户自定义 所有的表都存于改 ...
- 【微服务】之二:从零开始,轻松搞定SpringCloud微服务系列--注册中心(一)
微服务体系,有效解决项目庞大.互相依赖的问题.目前SpringCloud体系有强大的一整套针对微服务的解决方案.本文中,重点对微服务体系中的服务发现注册中心进行详细说明.本篇中的注册中心,采用Netf ...
- Thinkphp导入外部类的方法
相信很多人在使用TP时候都苦恼使用外部类各种不成功 下面为大家详细介绍下引用方法和注意细节 手动加载第三方类库 由于第三发类库没有具体的命名空间,所以需要使用以下几种方法手动导入 1.import方法 ...
- Django的ModelForm组件
创建类 from django.forms import ModelForm from django.forms import widgets as wd from app01 import mode ...
- cinder块存储 后端采用lvm、nfs安装配置
#cinder块存储 后端采用lvm.nfs安装配置 openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html #cinder ...
- CCF-201409-3-字符串匹配
问题描述 试题编号: 201409-3 试题名称: 字符串匹配 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给出一个字符串和多行文字,在这些文字中找到字符串出现的那些行.你 ...