010 伪类选择器

一：伪类选择器

1.描述

　　是以：为开头

2，链接伪类选择器

　　:link：未访问的链接

　　:visited：已访问的链接

　　:hover：鼠标移动到链接上

　　:active：选定的连接

3.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         a:link {
 8             color: #3c3c3c;
 9             font-size: 25px;
10             text-decoration: none;
11             font-weight: 700;
12         }
13         a:visited {
14             color: orange;
15         }
16         a:hover {
17             color: #f10215;
18         }
19         a:active {
20             color: green;
21         }
22         
23     </style>
24 </head>
25 <body>
26     <a href="http://www.baidu.com">链接1</a>
27 </body>
28 </html>

二：Subline快捷键

1.快捷键

　　tab

　　div*3：显示三个div

　　div>p：则嵌套

　　div+p：div与p并列

　　:属性：展示整个

三：标签的显示模式

1.lock-level

　　ol,li,p,div,h1

2.行内块

　　img，input，tdt

3.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div{
 8             width: 900px;
 9             height: 400px;
10             background-color: red;
11         }
12     </style>
13 </head>
14 <body>
15     <div>222</div>
16     <div>333</div>
17     <div>111</div>
18 </body>
19 </html>

4.转换

　　块转行：display:inline

　　行转块：block

　　行内块：line-block

猜你喜欢