首页 > 代码库 > 【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别

【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别

2024-09-18 16:18:54   215人阅读

 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 }

 

【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别


联系
我们