zoukankan      html  css  js  c++  java

  • 021 CSS高级特性

    一：元素的显示与影藏

    1.比较常见的单词

    　　dispaly，visibility，overflow

    　　

    2.display案例

    　　如果影藏了，这个元素就看不见了，然后也不保留位置

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 200px;
 9             height: 100px;
10             background-color: pink;
11             /*display: none;*/
12         }
13     </style>
14 </head>
15 <body>
16     <div></div>
17     <h3>123</h3>
18 </body>
19 </html>

    　　效果：

    　　

    　　影藏：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 200px;
 9             height: 100px;
10             background-color: pink;
11             display: none;
12         }
13     </style>
14 </head>
15 <body>
16     <div></div>
17     <h3>123</h3>
18 </body>
19 </html>

    　　效果：

    　　

    3.visibility

    　　参数有

    　　inherit

    　　visible

    　　hidden

    　　

    4.visibility案例

    　　影藏之后，位置会留下来。

    　　显示案例：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 200px;
 9             height: 100px;
10             background-color: pink;
11             visibility: visible;
12             /*visibility: hidden;*/
13         }
14     </style>
15 </head>
16 <body>
17     <div></div>
18     <h3>123</h3>
19 </body>
20 </html>

    　　效果：

    　　

    　　影藏案例：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 200px;
 9             height: 100px;
10             background-color: pink;
11             /*visibility: visible;*/
12             visibility: hidden;
13         }
14     </style>
15 </head>
16 <body>
17     <div></div>
18     <h3>123</h3>
19 </body>
20 </html>

    　　效果：

    　　

    5.实践

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         a {
 8             display: block;
 9             width: 445px;
10             height: 320px;
11             margin: 50px;
12             position: relative;
13         }
14         .mask {
15             display: none; /*先影藏*/
16             width: 100%;
17             height: 100%;
18             background: rgba(0,0,0,0.4) url(51.png) no-repeat center;
19             position: absolute;
20             top: 0;
21             left: 0;
22         }
23         a:hover .mask{
24             /*鼠标经过a的时候，里面的mask显示*/
25             display: block;
26         }
27     </style>
28 </head>
29 <body>
30     <a href="#">
31         <img src="237.png" width="445" height="320">
32         <div class="mask"></div>
33     </a>
34 </body>
35 </html>

    　　效果：

    　　

    　　鼠标经过：

    　　

    6.overflow溢出

    　　属性

    　　visible

    　　auto

    　　hidden：溢出影藏

    　　scroll：不管超出没超出都显示滚动条

    7.案例

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 200px;
 9             height: 200px;
10             border: 1px solid red;
11             /*overflow: scroll;*/
12             overflow: visible;
13         }
14     </style>
15 </head>
16 <body>
17     <div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
18 </body>
19 </html>

    　　效果：

    　　

    二：用户界面样式

    1.鼠标样式curcor

    　　属性

    　　defalt

    　　pointer：小手

    　　text：变成选择

    　　move：移动的，十字架

    2.案例

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         li {
 8             cursor: move;
 9         }
10     </style>    
11 </head>
12 <body>
13     <ul>
14         <li>11111111111</li>
15         <li>22222222222</li>
16         <li>333333333</li>
17     </ul>
18 </body>
19 </html>

    3.轮廓outline

    　　属性

    　　outline-color　

    　　outline-style

    　　outline-width

    4.案例

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         input {
 8             
 9         }
10     </style>    
11 </head>
12 <body>
13     <input type="text">
14 </body>
15 </html>

    　　效果：

    　　

    　　去除轮廓：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         input {
 8             outline: none;
 9         }
10     </style>    
11 </head>
12 <body>
13     <input type="text">
14 </body>
15 </html>

    　　效果：

    　　

    　　优化：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         input {
 8             outline: none;
 9             border: 1px solid #ccc;
10             width: 200px;
11             height: 25px;
12             background: url(resize.png) no-repeat 160px center;
13         }
14     </style>    
15 </head>
16 <body>
17     <input type="text">
18 </body>
19 </html>

    　　效果：

    　　

    5.textarea去掉拖拽

    　　案例：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <textarea name="" id="" cols="60" rows="10"></textarea>
 9 </body>
10 </html>

    　　效果：

    　　

    　　去除案例：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         textarea {
 8             resize: none;
 9         }
10     </style>
11 </head>
12 <body>
13     <textarea name="" id="" cols="60" rows="10"></textarea>
14 </body>
15 </html>

    　　效果：

    　　

    三：垂直居中

     1.vertical-align

    　　属性值

    　　baseline：默认，文字和图片基线对齐

    　　sub

    　　super

    　　top

    　　text-top

    　　middle　　

    　　bottom　　

    　　text-bottom

    2.和基线对齐

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div>
 9         my pictureg
10         <img src="237.png" alt="">
11     </div>
12 </body>
13 </html>

    　　效果：

    　　

    3. 居中

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         img {
 8             vertical-align: middle;
 9         }
10     </style>
11 </head>
12 <body>
13     <div>
14         my pictureg
15         <img src="237.png" alt="">
16     </div>
17 </body>
18 </html>

    4.去除图片底侧的空白缝隙

    　　因为图片会和基线对齐

    　　解决方式：

    　　vertical-align：top

    　　display:block

    　　案例：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         img {
 8             vertical-align: top;
 9         }
10         div {
11             border: 1px solid red;
12         }
13     </style>
14 </head>
15 <body>
16     <div>
17         my pictureg
18         <img src="237.png" alt="">
19     </div>
20 </body>
21 </html>

    　　效果：

    　　

    四：溢出文字隐藏

    1.white-space

    　　强制一行显示内容

    　　normal：默认方式

    　　nowrap：强制在一行显示文本，直到文字结束或者遭遇br换行

    2.案例

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 200px;
 9             height: 20px;
10             border: 1px solid red;
11             white-space: nowrap;
12         }
13     </style>
14 
15 </head>
16 <body>
17     <div>诺不移，情不变，才不会，用一生，绕一圈<br>
18     诺不移，情不变，才不会，用一生，绕一圈</div>
19 </body>
20 </html>

    3.效果

    　　

    4.文字溢出

    　　超出可以影藏：overflow：hideden

    　　还可以使用text-overflow

    　　属性有：

    　　clip：简单的裁切

    　　ellipsis：省略号，需要配合使用

    5.案例

    　　下面一行都不能少。

    11             text-overflow: ellipsis;
12             white-space: nowrap;
13             overflow: hidden;
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 215px;
 9             height: 20px;
10             border: 1px solid red;
11             text-overflow: ellipsis;
12             white-space: nowrap;
13             overflow: hidden;
14         }
15     </style>
16 
17 </head>
18 <body>
19     <div>诺不移，情不变，才不会，用一生，绕一圈<br>
20     诺不移，情不变，才不会，用一生，绕一圈</div>
21 </body>
22 </html>

    　　效果：

    　　

    　　

    　　

    　　

    　　
  • 相关阅读:
    在TreeView控件节点中显示图片
    PAT 甲级 1146 Topological Order (25 分)
    PAT 甲级 1146 Topological Order (25 分)
    PAT 甲级 1145 Hashing
    PAT 甲级 1145 Hashing
    PAT 甲级 1144 The Missing Number (20 分)
    PAT 甲级 1144 The Missing Number (20 分)
    PAT 甲级 1151 LCA in a Binary Tree (30 分)
    PAT 甲级 1151 LCA in a Binary Tree (30 分)
    PAT 甲级 1149 Dangerous Goods Packaging
  • 原文地址：https://www.cnblogs.com/juncaoit/p/10995313.html
Copyright © 2011-2022 走看看