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 }
时间： 2024-11-05 21:48:51