zoukankan      html  css  js  c++  java
  • css 伪类

    a标签 必须按顺序写

              link  链接未访问的时候的样式

              visited 链接访问后的样式

              hover  鼠标放上去的样式

              active 链接在访问时的样式

    after

    before

    nth-of-type(2n)  选择属于其父级下面第n个元素
    隔行换色:
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         p:nth-of-type(2n){
     8             background: red;
     9         }
    10         p:nth-of-type(2n-1){
    11             background-color: gold;
    12         }
    13     </style>
    14 </head>
    15 <body>
    16     <p>1</p>
    17     <p>2</p>
    18     <p>3</p>
    19     <p>4</p>
    20     <p>5</p>
    21     <p>6</p>
    22 </body>
    23 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         div{
     8             width: 980px;
     9             margin: 0 auto;
    10             overflow: auto;
    11         }
    12         span{
    13             float: left;
    14             width: 300px;
    15             height: 300px;
    16             background-color: red;
    17             margin:10px ;
    18         }
    19         span:nth-of-type(3n-1){
    20             margin-left: 10px;
    21             margin-right: 10px;
    22         }
    23     </style>
    24 </head>
    25 <body>
    26 <div>
    27     <span>1</span>
    28     <span>2</span>
    29     <span>3</span>
    30     <span>4</span>
    31     <span>5</span>
    32     <span>6</span>
    33     <span>7</span>
    34     <span>8</span>
    35     <span>9</span>
    36     <span>10</span>
    37     <span>11</span>
    38     <span>12</span>
    39 </div>
    40 </body>
    41 </html>
    View Code
    变换transform
        
    translateX 位移
        
    translateY   位移
    rotate 旋转
    scale 缩放
        
    skewX 斜切
    
    
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         div{
     8             height: 300px;
     9             width: 980px;
    10             border: 1px solid red;
    11         }
    12         span{
    13             width: 200px;
    14             height: 200px;
    15             background-color: yellow;
    16             border: 1px solid red;
    17             float: left;
    18             transition: 1s;
    19         }
    20         span:hover{
    21             /*transform: translateX(100px) rotate(45deg);*/
    22             /*transform:scale(1.3);*/
    23             transform: skewX(45deg);
    24         }
    25     </style>
    26 </head>
    27 <body>
    28 <div>
    29     <span></span>
    30 </div>
    31 </body>
    32 </html>
    View Code
    
    
    
     
     
     
  • 相关阅读:
    [AST Babel] Babel Template
    [HTML5] Layout Reflow & thrashing
    [Cypress] Combine Custom Cypress Commands into a Single Custom Command
    errno , perror,strerror
    使用RMAN和控制文件备份删除归档日志的SHELL脚本--RED HAT 5 LINUX 64
    Documentation/ABI/testing/sysfs-block.txt
    003java面试笔记——【java基础篇】从团八百失败面试总结的java面试题(未完待续)
    How Many Tables
    NTP for Linux
    如何通过预加载器提升网页加载速度
  • 原文地址:https://www.cnblogs.com/koushuige/p/8323668.html
Copyright © 2011-2022 走看看