CSS基礎-行快屬性，hover

Adinsclay發表於2021-11-14
CSS

CSS基礎

1.行快屬性

在css中有很多標籤，分為行內標籤，塊標籤，標籤行內塊標籤，他們有著不同的屬性。

    塊標籤
        div,ul,li,ol,h1~h6,p
        可以設定寬高
        不可以與別人共處一行
        不設定寬度的時候，預設寬度是100%
    行內標籤
        span,strong,a
        不可以設定寬高
        可以與別人共處一行
        其寬高由內容撐開
    行內塊標籤
        img,input
        可以設定寬高
        可以與別人共處一行
 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: 300px;
10             background: lightblue;
11             display: inline-block;
12             /*display: inline;轉換為行內元素  display: block; 轉化為塊元素
13             display: inline-block轉換為行內塊元素*/
14         }
15         span{
16             width: 300px;
17             height: 300px;
18             background: lightgreen;
19             display: inline-block;
20         }
21         input{
22             width: 400px;
23             height: 50px;
24         }
25     </style>
26 </head>
27 <body>
28 
29     <div>我是div</div>    <div>我是div</div>
30     <span>我是span</span>  <span>我是span</span>
31     <input type="text" name="">
32     <input type="text" name="">
33 </body>
34 </html>

效果圖：

 

 

 2.hover

hover 是滑鼠游標移動到標籤上的變化屬性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #div1{
 8             width: 300px;
 9             height: 300px;
10             background: red;
11         }
12         #div1:hover{/*游標移動到div1時的變化*/
13             background: #00b38a;
14         }
15         #div2{
16             width: 100px;
17             height: 100px;
18             background: green;
19         }
20         #div1:hover>#div2{/*游標移動到div1時子集div2的變化*/
21             background: #3388ff;
22         }
23 
24         #div3{
25             height: 50px;
26             width: 50px;
27             background: yellow;
28         }
29         #div1:hover #div3{
30             background: #555555;
31         }
32         #div4{
33             height: 200px;
34             width: 200px;
35             background: blue;
36         }
37         #div1:hover+#div4{
38             background: black;
39         }
40     </style>
41 </head>
42 <body>
43 <div id="div1">
44     <div id="div2">
45         <div id="div3"></div>
46     </div>
47 </div>
48 
49 <div id="div4"></div>
50 
51 </body>
52 </html>

效果圖：

原圖：

 

 

游標移動到上面：

 

 

 

相關文章