Advanced skills of CSS (7)

Time:2021-7-16

Display and hide of elements

Display show (hide)

Show and hide

Display: none (hidden)
    Display: block (display)

characteristic

  • Hide elements first
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            margin: 20px 20px;
            background-color: blue;
        }
        
        .box1 {
            background-color: yellow;
            display: none;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

Advanced skills of CSS (7)

Visibility (show and hide)

    visibility:hidden
    visibility:visible

characteristic

  • Hide elements first
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            
        }
        
        div {
            width: 200px;
            height: 200px;
            margin: 20px 20px;
            background-color: blue;
        }
        
        .box1 {
            background-color: yellow;
            /*Setting the display and hide of elements*/
            visibility: hidden;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

Advanced skills of CSS (7)

Overflow (show and hide elements)

  • Overflow: visible neither cuts content nor displays scrollbars
  • Overflow: hidden content will be clipped if it exceeds
  • Overflow: scroll always shows the scroll bar
  • Overflow: Auto scroll bar will not be displayed if it exceeds the display limit
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 400PX;
            height: 200PX;
            border: 1px solid red;
            /*If the value exceeds the specified value, other attribute values will be automatically clipped. Please see the description*/
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box">
        After slowly rising, carefully move the saplings to the hole dug in advance, then two workers straighten the saplings, and another worker waves a spade to fill the soil. Transplanting, supporting seedlings, filling, cofferdam, watering, in one morning, the workers planted more than 50 seedlings, such as Sophora japonica, Xifu Begonia, etc. According to the relevant person in charge of Mentougou District Urban Management Committee, the landscape improvement project mainly focuses on the Mentougou section of line S1, with a total green area of about 110000 square meters. It mainly selects such plants as Sophora japonica, Fatong, Pinus tabulaeformis, Xifu Begonia, Lagerstroemia indica, hickory and Ligustrum lucidum to create a landscape effect with flowers in three seasons and scenery in four seasons.

        After slowly rising, carefully move the saplings to the hole dug in advance, then two workers straighten the saplings, and another worker waves a spade to fill the soil. Transplanting, supporting seedlings, filling, cofferdam, watering, in one morning, the workers planted more than 50 seedlings, such as Sophora japonica, Xifu Begonia, etc. According to the relevant person in charge of Mentougou District Urban Management Committee, the landscape improvement project mainly focuses on the Mentougou section of line S1, with a total green area of about 110000 square meters. It mainly selects such plants as Sophora japonica, Fatong, Pinus tabulaeformis, Xifu Begonia, Lagerstroemia indica, hickory and Ligustrum lucidum to create a landscape effect with flowers in three seasons and scenery in four seasons.

    </div>
</body>

</html>

Advanced skills of CSS (7)

Summary of show and hide

Advanced skills of CSS (7)

Show and hide cases

Analysis: there was a translucent mask inside the box, which was hidden and displayed when the mouse passed by. In special cases, a link can put a div tag

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        
            .box {
                position: relative;
                width: 600px;
                height: 337px;
                margin: auto;
                border: 1px solid red;
            }
           
            .box a {
            display: block;
             }

            .box img {
                width: 100%;
            }

            .box .mask {
                display: none;
                position: absolute;
                width: 600px;
                height: 337px;
                Background: RGBA (0, 0, 0, 0.3) URL (1. Show and hide elements / image / arr.png) no repeat center;

            }
            .box a:hover .mask {
                display: block;
            }

            .box
        </style>
    </head>
    <body>
        <div class="box">
            <a href="">
                <!--  Mask layer -- >
                <div class="mask"></div>
                <img>
            </a>
        </div>
    </body>
</html>

Advanced skills of CSS (7)

CSS user interface styles

Mouse style

Advanced skills of CSS (7)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            li {
                width: 200px;
                height: 200px;
                margin: 20px auto;
                list-style: none;
                line-height: 200px;
                text-align: center;
                font-weight: bold;
                color: white;
                background-color: #0000FF;
            }
            li:nth-child(1) {
                cursor: default;
            }

            li:nth-child(2) {
                cursor: pointer;
            }
            
            li:nth-child(3) {
                cursor: move;
             }

            li:nth-child(4) {
                cursor: text;
            }

            li:nth-child(5) {
                cursor: not-allowed;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>Default mouse state</li>
            <li>Small hand state</li>
            <li>Mobile state</li>
            <li>Text status</li>
            <li>Forbidden state</li>

        </ul>
    </body>
</html>

Advanced skills of CSS (7)

Contour line

In the real development and application, the contour line is removed directly

    outline:none
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin:0;
                padding: 0;
            }
            
            input {
                outline: none;
            
            
        </style>
    </head>
    <body>
        Account number: < input type = "text" >
    </body>
</html>

Advanced skills of CSS (7)

Prevent text field dragging

    resize:none
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                paddding: 0;
            }

            textarea {
                width: 200px;
                height: 200px;
                outline: 0;
                resize: none;
            }
        </style>
    </head>
    <body>
        <h2>Message board</h2>
        <textarea rows="" cols="">

        </textarea>
    </body>
</html>

Advanced skills of CSS (7)

User interface style summary

Advanced skills of CSS (7)

Vertical center

Note that it works only for inline elements and inline block elements

Vertical align: top, middle, baseline, bottom
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            img {
                vertical-align: middle;
            }
    
        </style>
    </head>
    <body>
        
        <img > hello word
    </body>
</html>

Advanced skills of CSS (7)

Two methods of removing image gaps

  • Use the vertical align attribute as long as it is not baseline
  • Using display: block can also solve this problem

Before removing the gap at the bottom of the picture

Advanced skills of CSS (7)

After removing the image gap

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            .box {
                border: 1px solid red;
            }
            img {
                /*The first method to remove the gap at the bottom of the picture*/
                /* vertical-align: bottom; */
                /*The second method to remove the gap at the bottom of the picture*/
                display: block;
            }
            
        </style>
    </head>
    <body>
        <div class="box">
            <img>
        </div>
    </body>
</html>

Advanced skills of CSS (7)

Ellipsis of words

White space: nowrap forces one line to display, and the default attribute value is normal

Overflow: Hidden hidden element

Text overflow: ellipsis text overflow. The default attribute value is clip

Note: no less of the three steps

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box {
                width: 200px;
                height: 20px;
                border: 1px solid #ccc;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body>
        My name is Yao Zimo. Nice to meet you
    </body>
</html>

Advanced skills of CSS (7)

Sprite Technology

The purpose of Sprite

It reduces the times of server request and acceptance, and improves the loading speed of the page

How to make a sprite map

  1. Accurately measure the size and position of each background image
  2. When you set the width and height of the box to specify a small background image, the position is usually negative

Case study: spell your surname with Sprite Technology

Image with name

Advanced skills of CSS (7)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
                
            }

            div {
                float: left;
                background: url(image/name.jpg) no-repeat;

            }

            .box1 {
                width: 116px;
                height: 106px;
                background-position: -365px -557px;
            }

            .box2 {
                width: 110px;
                height: 110px;
                background-position: 0px -9px;
            }

            .box3 {
                width: 108px;
                height: 108px;
                background-position: -370px -280px;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

Advanced skills of CSS (7)

How to make your own sprite map

Each sprite should be placed neatly with a resolution of 72pt, the background should be transparent and the format should be PNG
Advanced skills of CSS (7)

Sliding door technology

In order to make a variety of special shape of the background to adapt to the amount of text content, sliding door technology appeared

Core technology: using CSS sprite and padding inner margin

Some points for attention

  1. A for the left background span for the right background
  2. A contains span because the navigation bar is full of links
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            display: inline-block;
            height: 33px;
            line-height: 33px;
            padding-left: 15px;
            color: white;
            text-decoration: none;
            background: url(image/ao.png) no-repeat left center;
        }
        
        a span {
            display: inline-block;
            height: 33px;
            background: url(image/ao.png) no-repeat right center;
            padding-right: 15px;
        }
    </style>
</head>

<body>
    <a href="#">
        <span>Home page</span>
    </a>

</body>

</html>

Advanced skills of CSS (7)

Wechat navigation bar case

Note the use of sliding door technology

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: url(./image/wx.jpg) repeat-x;
        }
        
        .nav {
            margin-top: 20px;
        }
        
        .nav li {
            list-style: none;
            float: left;
            margin: 0px 20px;
        }
        
        .nav a {
            display: inline-block;
            height: 33px;
            color: white;
            line-height: 33px;
            padding-left: 15px;
            background: url(./image/to.png) no-repeat left;
        }
        
        .nav a span {
            display: inline-block;
            height: 33px;
            padding-right: 15px;
            background: url(./image/to.png) no-repeat right;
        }
        
        .nav a:hover {
            background-image: url(./image/ao.png);
        }
        
        .nav a:hover span {
            background-image: url(./image/ao.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span>Home page</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>Help and feedback</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>Public platform</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>Home page</span>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

Advanced skills of CSS (7)

matters needing attention

The beauty of negative margin

You can merge borders with a negative margin value

Before the merger

Advanced skills of CSS (7)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            div {
                float: left;
                height: 400px;
                width: 400px;
                border: 1px solid red;
                /*You can merge borders with a negative margin value*/
                margin-left: -1px;
                margin-top: -1px;
                
            }
            
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

Merged border

Advanced skills of CSS (7)

A negative margin value highlights the beauty of a box

  • Positioning can lift the box to the top
  • The box with negative margin can be displayed through Z-index
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            div {
                /*Positioning can lift the box to the top*/
                position: relative;
                float: left;
                height: 400px;
                width: 400px;
                border: 1px solid red;
                /*You can merge borders with a negative margin value*/
                margin-left: -1px;
                margin-top: -1px;
                
            }
            div:hover {
                border: 1px solid blue;
                /*The box with negative margin can be displayed through Z-index*/
                z-index: 1;
            }
            
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

Advanced skills of CSS (7)

The beauty of CSS triangle

case

The steps are as follows

  1. The width and height are all 0
  2. The color of needed triangles should be kept, and the color of unnecessary triangles can be set as transparent
  3. Take care of compatibility, line height: 0, font size: 0
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 0;
                height: 0;
                border: 10px solid transparent;
                border-left: 10px solid #000000;
                /*Take care of compatibility*/
                line-height: 0;
                font-size: 0;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

Advanced skills of CSS (7)

Triangle case

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        
            div {
                position: relative;
                width: 600px;
                height: 600px;
                background-color: #0000FF;
                margin: 200px  auto;
            }
            p {
                position: absolute;
                left: 50%;
                /*Half the distance between two triangles, so - 50px*/
                margin-left: -50px;
                /*The distance between the two triangles is - 100px*/
                margin-top: -100px;
                width: 0px;
                height: 0px;
                border:50px solid transparent;
                border-bottom:50px solid black;
                
                
            }
            
        </style>
    </head>
    <body>
        <div>
            <p></p>
        </div>
    </body>
</html>

Advanced skills of CSS (7)

Recommended Today

Implementation example of go operation etcd

etcdIt is an open-source, distributed key value pair data storage system, which provides shared configuration, service registration and discovery. This paper mainly introduces the installation and use of etcd. Etcdetcd introduction etcdIt is an open source and highly available distributed key value storage system developed with go language, which can be used to configure sharing […]