zoukankan      html  css  js  c++  java
  • 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

      

  • 相关阅读:
    kettle初探
    ECLIPSE 不能连接MYSQL 8 的现象
    easyreport 安装手记
    eclipse 下安装 lombok.jar
    mysql 8 安装及更改密码
    转:Python的这几个技巧,简直屌爆了
    转:通用缩写表
    检查webpack版本
    vue-cli脚手架项目按需引入elementUI
    webstorm “Unterminated statement”
  • 原文地址:https://www.cnblogs.com/juncaoit/p/10850105.html
Copyright © 2011-2022 走看看