【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 width: 300px; 9 height: 200px;/*浏览器默认字体大小16px*/ 10 margin:1em;/*em以父元素字体为基准*/ 11 padding: 1rem;/*rem以根元素字体大小为基准*/ 12 border:2px solid green; 13 outline: 2px solid red; 14 outline-offset: 2px;/*此为新增属性，不可写到复合属性outline中*/ 15 display: ;/*none：元素不显示。block:显示为块级元素，特点：换行，可设置宽高。inline:行内元素，特点大小自适应，不换行。*/ 16 } 17 #div1{ 18 opacity: 0.5;/*元素及元素中的内容被设置透明*/ 19 background:rgb(80,70,60); 20 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*/ 21 } 22 #div2{ 23 background:rgba(80,70,60,0.5);/*只有元素本身被设置透明*/ 24 cursor:; 25 26 } 27 </style> 28 </head> 29 <body> 30 <div id="div1">opacity</div> 31 <div id="div2">rgba()</div> 32 </body> 33 </html>
下拉菜单：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <nav> 10 <ul class="ul1"> 11 <li> 12 <a href="">直辖市</a> 13 <ul class="ul2"> 14 <li><a href="">北京</a></li> 15 <li><a href="">上海</a></li> 16 </ul> 17 </li> 18 <li> 19 <a href="">安徽</a> 20 <ul class="ul2"> 21 <li><a href="">合肥</a></li> 22 <li><a href="">芜湖</a></li> 23 <li><a href="">马鞍山</a></li> 24 </ul> 25 </li> 26 <li> 27 <a href="">江苏</a> 28 <ul class="ul2"> 29 <li><a href="">南京</a></li> 30 <li><a href="">苏州</a></li> 31 </ul> 32 </li> 33 </ul> 34 </nav> 35 </body> 36 </html>
1 *{ 2 margin:0; 3 padding: 0; 4 } 5 .ul1{ 6 margin:100px; 7 } 8 ul{ 9 list-style: none;/*去掉列表前的小图标*/ 10 } 11 a{ 12 text-decoration: none;/*去掉超链接下划线*/ 13 } 14 .ul1>li{/*子元素选择器，不包括孙元素*/ 15 width: 100px; 16 height: 2rem; 17 background:rgba(40,70,190,0.5); 18 font-size: 21px; 19 line-height: 2rem;/*此属性值会被子元素继承*/ 20 text-align: center; 21 border-radius: 10px 10px 0 0; 22 float: left; 23 margin:1px; 24 } 25 .ul2{ 26 background:rgba(30,60,160,0.1); 27 border-radius: 0 0 10px 10px; 28 display: none; 29 } 30 .ul2>li>a:hover{ 31 background:rgba(30,200,30,0.7); 32 display: inline-block;/*使行内元素变成行内块元素，以便能设置宽高。*/ 33 width: 80%; 34 height: 1.5rem; 35 line-height: 1.5rem;/*此技巧可使文字在背景色中上下剧中*/ 36 border-radius: 1em; 37 font-weight: bold; 38 } 39 .ul1>li:hover>ul{ 40 display: block; 41 }
