Article From:https://www.cnblogs.com/sunshuhai/p/9060892.html

One, CSS global application

The parent tag div contains two sub labels div, and when the child tag DVI is all left float, the background color set by the parent tab is not displayed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a{
            background: red;
        }
        .div_a1,.div_a2{
            float: left;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1">div_a1</div>
        <div class="div_a2">div_a2</div>
    </div>
</body>
</html>

The parent label contains two left floating labels, and the parent label background color is not displayed.

If you want to display the background color of the parent tag, you can add another div to the child tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a{
            background: red;
        }
        .div_a1,.div_a2{
            float: left;
        }
        .div_a3{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1">div_a1</div>
        <div class="div_a2">div_a2</div>
        <div class="div_a3">div_a3</div>
    </div>
</body>
</html>

Display the background color of the parent by adding div in the child tag.

Imagine that if there are many such paternal div in a project and need to display the background color of the parent, it is very cumbersome that no Paterson block needs to be set up individually, so what is the way to solve it?

First, div:afer{content: “ABCD”} can add content to the back of the label, and in essence, the content added by the after also exists as an inline tag.

Therefore, the above results can be achieved through after.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a:after{
            content: "abcd";
            display: block;
            clear: both;
        }
        .div_a{
            background: red;
        }
        .div_a1,.div_a2{
            float: left;
        }
        .div_a3{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1">div_a1</div>
        <div class="div_a2">div_a2</div>
    </div>
</body>
</html>

Add content through after

Now we need to remove additional content and other parent child modules that can be applied:

visibility: hidden The module can be hidden and not occupied,display:noneIs to hide and occupy the original position

visibilityAdd to the afterheight:0px Can not occupy the position, otherwise it will occupy the position of the ABCD line.

Defining a generic module requires only one name to be customized in style.clearfixAclassCan,.clearfix{},Then if the same module wants to use this format, it only needs to add the attribute value of the label class.clearfixCan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after{
            content: "abcd";
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
        .div_a{
            background: red;
        }
        .div_a1,.div_a2{
            float: left;
        }
        .div_a3{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="div_a clearfix">
        <div class="div_a1">div_a1</div>
        <div class="div_a2">div_a2</div>
    </div>
</body>
</html>

General format

 Two, parent and subclass element hover style settings

 When the parent class contains subclasses, when the mouse is placed on the parent class element, the subclass of the parent class element changes, and how does this style be set?

First, look at an example of adding a border to the parent class:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a:hover{
            border: solid red 2px;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1">aaaaa</div>
        <div class="div_a2">vvvvv</div>
    </div>

</body>
</html>

The parent mouse hover to display the red border

So how does the subclass style change when the mouse is placed on the parent class?

You only need to select the parent element: hover selects the subclass element {color:red}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a:hover{
            border: solid red 2px;
        }
        .div_a:hover .div_a2{
            color: red;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1">aaaaa</div>
        <div class="div_a2">vvvvv</div>
    </div>

</body>
</html>

Subclass color style

The problem comes again. When the mouse is put up, two pixels are added to the frame, and the overall downshift causes the animation effect. If you don’t want to display the animation effect?

Solution: you can add a two pixel border to div in advance, so that the border can not be displayed transparently.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a{
            border:solid 2px white;
        }
        .div_a:hover{
            border: solid red 2px;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1">aaaaa</div>
        <div class="div_a2">vvvvv</div>
    </div>

</body>
</html>

Increase the border in advance to eliminate the effect of frame animation

 Three, mouse hover background color

Comparison before and after hover

Scenario: the trigger condition is that the mouse moves to the picture, so hover is needed.

After the mouse moves to the picture, the same size DIV covers the picture, and the size of the picture is changed. With the change of the covered DIV, the parent label is set to position: relative

The div of the image is set to: position:absolute, and the distance from top to bottom is 0, and transparency is set.

Note that the div of the parent class varies according to the height of the subclass. When the height of the parent class is less than the height of the subclass, the height will not work; it will be highly supported by the content of the subclass, but with the addition of overflow, it will only intercept the display part, so that in order to prevent the interface from being disturbed, any graph can be avoided.The film is recommended to add height, width, overflow: hidden

See the specific code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a{
            height: 262px;
            width: 403px;
            /*Note that the div of the parent class varies according to the height of the subclass. When the height of the parent class is less than the height of the subclass content, the height will not work.*/
            /*It will be highly supported by the content of the sub class, but with overflow, it will be able to intercept the display part only.*/
            /*Therefore, in order to prevent interface disturbances, all pictures are recommended to add height, width, overflow: hidden.*/
            overflow: hidden;
            position: relative;
        }
        .div_a2{
            /*The subclass position: absolute looks for the position: relative of the parent class. If the parent class does not go to the parent class of the parent class,*/
            /*If you can't find it all the time, it's the position of relative HTML*/
            position: absolute;
            top:0;
            right: 0;
            bottom:0;
            left: 0;
            background: black;
            opacity: 0.5;  /*Transparency can also be used: background-color: RGBA (0,0,0,0.5).*/
            color: white;
            visibility: hidden;
        }
        .div_a:hover .div_a2{
            visibility: visible;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1"><img src="shoes.png"></div>
        <div class="div_a2">Hello</div>
    </div>
</body>
</html>

Hover picture shadow display

The results are shown below.

 Four, CSS drawing direction triangle Icon

In the web page, you will often see some small icons, small icons can be pictures, of course, with CSS, you can simply draw them.

boderThe width, the solid line and the background color are set on the upper, the right, the lower and the left, and are set to inlie-block styles.

Then you can get the triangle by setting the transparent color on the other side. The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .up{
            border-top:30px solid red;
            border-right: 30px solid black;
            border-bottom:30px solid green;
            border-left: 30px solid blue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="up"></div>
</body>
</html>

borderRealizing the triangle of painting

For example, if you want to draw a downward triangle, you just need to set the background color of the other edges to transparent color: transparent, the code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .down{
            border-top:30px solid red;
            border-right: 30px solid transparent;
            border-bottom:30px solid transparent;
            border-left: 30px solid transparent;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="down"></div>
</body>
</html>

Downward triangle

As shown in the picture.

You can also divide the lower triangle of the figure above, so you only need to annotate the left and the left boder. The code is as follows.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .down{
            border-top:30px solid red;
            border-right: 30px solid transparent;
            /*border-bottom:30px solid transparent;*/
            /*border-left: 30px solid transparent;*/
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="down"></div>
</body>
</html>

Down triangulation

As shown in the picture.

 If the triangle is going down, how can we turn the mouse into an upward direction once it is pointed?

Solution: when the mouse is pointing, it will be displayed downwards and hidden up. The square will move up to several pixels as a whole.

Design: add a parent label, the child label in the parent label is boder inverted triangle, the upper edge of the sub label is 30px, the mouse moves to the label, the upper margin is 0, the sub label bottom triangle displays, the other is hidden.

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .down{
            margin:30px 0;
            border-top:30px solid red;
            border-right: 30px solid transparent;
            border-bottom:30px solid transparent;
            border-left: 30px solid transparent;
            display: inline-block;
        }
        .down:hover{
            margin: 0;
            border-top:30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom:30px solid red;
            border-left: 30px solid transparent;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>
        <div class="down"></div>
    </div>
</body>
</html>

Dynamic variation of trigonometric direction

 Five. Several ways of icons

1、Front end engineer, professional drawing, cut through, insert by picture.

2、Made by way of CSS, such as the triangle icon above.

3、By plug-in, this way can generally meet the demand. Font Awesome, official website: http://www.fontawesome.com.cn/

1)Download the plug-in through the official website, download and decompress it, then place the directory where html is located.

2)&lt is introduced through link; link rel= “stylesheet” href= “font-awesome/css/font-awesome.css” >

3) It can then be referenced by the attribute value of calss: < span class= “Fa fa-bicycle” > < /span>

 The code follows a bicycle icon as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
    <span class="fa fa-bicycle"></span>
</body>
</html>

Plug-in Icon

Six. File catalogues

1、appDirectory: store HTML files. Such as: s1.html s2.html

2、cssDirectory: store CSS files. For example, commons.css

3、scriptDirectory: store JS files. For example, conmmons.js

4、pluginDirectory: a plug-in for third parties. Such as: bootstrap bxslider and so on

 

 Seven, import changes the priority of CSS execution

cssIt is performed from top to bottom, so when the same property is set up, it will come into effect closest to the CSS, and if you want the previous code to take effect, you just need to add it to the property! Important is OK.

The following code shows the background color of the final div as red:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height: 200px;
            background-color: red !important;
        }
        .div1{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="div1">

    </div>
</body>
</html>

important

 Eight. The layout of the backstage management

The layout of the backstage management is shown as shown in the picture.

The B area shown above is fixed, so the question is how C area changes with the size of the screen.

Solution: after the B area is fixed, then the C area position:absolute is set, and the C zone is 0 from the left to the left and the distance to the right distance is 0. The distance from the upper side is the height of the A area, then the C zone will automatically stretch the size.

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .pg-head{
            height: 48px;
            background-color: #396bb3;
        }
        .pg-body-left{
            width: 100px;
            height: 200px;  /*In order to show*/
            background-color: #c0cddf;
        }
        .pg-body-right{
            position: absolute;
            height: 200px; /*In order to show*/
            background-color: antiquewhite;
            top:48px;
            right: 0;
            left: 100px;


        }
    </style>
</head>
<body>
    <div class="pg-head"></div>
    <div class="pg-body">
        <div class="pg-body-left"></div>
        <div class="pg-body-right"></div>
    </div>
</body>
</html>

Automatic drawing of backstage layout

The results are as follows:

 Then there is another question. If we want to achieve A zone and B area, C area can scroll down, so what should we do?

Solution: set up overflow:auto in C area, then position:absolute, bottom:0

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .pg-head{
            height: 48px;
            background-color: #396bb3;
        }
        .pg-body-left{
            width: 100px;
            height: 200px;  /*In order to show*/
            background-color: #c0cddf;
        }
        .pg-body-right{
            position: absolute;
            background-color: antiquewhite;
            top:48px;
            right: 0;
            left: 100px;
            bottom: 0;
            overflow: auto;  /*If the height is exceeded, the div itself adds scrollbars.*/
        }
    </style>
</head>
<body>
    <div class="pg-head"></div>
    <div class="pg-body">
        <div class="pg-body-left"></div>
        <div class="pg-body-right">
            <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
            <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
            <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
            <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        </div>
    </div>
</body>
</html>

A\BArea invariable, C zone rolling

 Nine, edge prompt box

As shown in the figure below, how do we decide and cancel?

Idea: TD adds a parent div, and then contains a subset of div, and the div of the subset contains the determination and Cancel buttons, then the parent position:relative, the subset of position:absolute, via left and topLocation position

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a{
            position: relative;
        }
        .div_a1{
            position: absolute;
            left: 107px;
            top: -4px;
        }
        .div_a1>input{
            display: block;
            float: left;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr><td>First lines</td><td>First lines</td><td>First lines</td>
            <td>
                <div class="div_a">
                    First lines, fourth columns<div class="div_a1">
                        <input type="button" value="Determine ">
                        <input type="button" value="Cancel ">
                    </div>
                </div>
            </td>
        </tr>
        <tr><td>Second lines</td><td>Second lines</td><td>Second lines</td><td>Second lines</td></tr>
        <tr><td>Third lines</td><td>Third lines</td><td>Third lines</td><td>Third lines</td></tr>
        <tr><td>Fourth lines</td><td>Fourth lines</td><td>Fourth lines</td><td>Fourth lines</td></tr>
    </table>
</body>
</html>

Edge prompt box

 

 

 

 

 

 

 

 

 

 

 

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *