HTML+CSS front end learning notes

HTML tag notes

1. Standard format of HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2. Title label

<h1>Primary label<h1>
<h2>Secondary label<h2>
<h3>Tertiary label<h3>
<h4>Four level label<h4>
<h5>Five level label<h5>
<h6>Six level label<h6>

3. Paragraph labels and horizontal line labels

<p>A paragraph of text..............</p>
<hr/>   //Horizontal line label, in which you can set the properties of the horizontal line

4. Line breaks and div span labels

<br/>		//Wrap label
<div>div label</div>
<span>span label</span>

5. Text formatting label

<b>Text bold label</b>
<strong>Text bold label</strong>
-------------------------------
<i>Text Italic label</i>
<em>Text Italic label</em>
-------------------------------
<s>Delete line label</s>
<del>Delete line label</del>
-------------------------------
<u>Underline label</u>
<ins>Underline label</ins>

6. Image label

<img src="" title="" width="" />  //The src attribute represents the picture path, the title attribute represents the display text after the mouse is moved over the picture, and the width attribute describes the picture size

7. Link label

<a href="" target="_blank"></a>		//href attribute fill in the jump address. target = "_blank" means to open the link in the new interface
<a href="#"></a> 					// Indicates the jump of an empty link (there is no place to jump for the time being, so it can be written)
<a href="xxx.html"></a>				//Internal jump can also be performed

8. Anchor point positioning

//1. Use a tag and add herf="#+id" to herf of tag attribute
//2. Add an id attribute in the title to jump to correspond to the id in the link label above to realize the jump in the page.

9.base label

//1. The base tag is written in the < head > tag
//2. Function of base tag: set the open state of the overall link
<base target="_blank">		//In this way, you don't have to add the target attribute to each link label to set a new window to open the link

10. Special characters

describeCharacter code
Space character&nbsp；
Less than sign&lt；
Greater than sign&gt；
and&amp；
RMB&yen；
copyright&copy；
Registered trademark&reg；
centigrade&deg；
Sign&plusmn；
ride&times；
except&divide；
Square 2&sup2；
Cubic 3&sup3；

11. Note label

<!-- Here are the notes -->

12. Relative path and absolute path

//1. Same level path: files in the same folder
//To reference a file with the same level path, just enter the file name directly
<img src="xxx.jpg"/>
--------------------------------------------
//2. The reference of the next level file needs to be separated by "/". Take the directory where the current html file is located as the root, and use the "/" symbol to find the directory where the referenced file is located to complete the reference
<img src="images/xxx.jpg"/>		//The images folder is named according to the actual situation
--------------------------------------------
//3. Reference of upper level file: if the file to be referenced is in the upper level or several upper level directories of the current html file, use ".. /" to represent the upper level
<img src="../xxx.jpg"/>
//4. Absolute path: set the absolute path of the picture directly in src attribute
<img src="C:\Users\msi\Pictures\Gong Jun\IMG_2268(20210623-225601).JPG"/> //This is basically not used

13. List label

//1. Unordered list
<ul>
	<li>Junko </li>
    <li>Miss Zhang</li>
    <li>Cats and dogs love freedom</li>
    <li>Junzhe</li>
</ul>
---------------------------------------
//2. Ordered list
<ol>
    <li>Junko </li>
    <li>Miss Zhang</li>
    <li>Cats and dogs love freedom</li>
    <li>Junzhe</li>
</ol>
---------------------------------------
//3. Custom list
<dl>
    <dt>background</dt>
    <dd>describe dt label</dd>
    <dd>There can be more than one</dd>
    <dd>describe dt label</dd>
    <dd>describe dt label</dd>
</dl>

CSS

1. Syntax rules for writing CSS

  • The css code consists of a selector and a pair of curly braces
  • The curly braces consist of declaration statements one by one
  • Each sentence should be separated by a semicolon in English
  • Each statement consists of "attribute: value"
  • The values of attributes in css are generally not quoted
  • In css, if the attribute value is numeric data, you generally need to add units, and the unit is px (pixel)
  • HTML tags do not appear in css

2. Embedded

Embed css code into html file through a pair of

<style type="text/css">
    /*Write css code*/
    
</style>

Normally,

3. Outreach

  • Create to * * css * * file with extension

  • Associate css files within the head tag of html files

  • //The link tag needs to be written in the head tag of the html file
<link rel="stylesheet" href="one.css">		//The href attribute is filled in with the relative path of the css file to be imported

  • link tags can have multiple, that is, an html file can be associated with multiple css files

4. Inline

  • Write the css code in the style attribute of the html tag

  • <label style="">

5. Notes

/* Write notes in it */ 
//Don't write css comments in html, that is <! --- > This note

6. Selector

  • Basic selector

    selectorformatmeaninggive an example
    universal selector *{attribute: value;}Universal selector that will match all HTML tags
    tag chooser Tag name {attribute: value;}Tag selector to match the corresponding HTML tag
    Class selector . class attribute value {attribute: value;}Class selector to match the corresponding HTML tag
    Id selector#id attribute value {attribute: value;}The ID selector can specify a specific style for HTML elements marked with a specific ID and can only be used once. The ID selector is defined by "#"
  • /* universal selector  */
/* *{
    background-color: cadetblue;
} */

/* tag chooser  */
ul{
    color: paleturquoise;
}

/* Class selector  */
.text1{
    color: peru;
}

/* id selector */
/* id Your name must be unique */
#text2{
    color: seagreen;
}

7. Dimension style attribute

/* Set dimension style through class selector */
.text1{
    color: peru;
    width: 300px;
    height: 300px;
}

Width and height properties cannot be set for labels

8. Text attributes

/* color property */
color:red/rgb(255,0,0)/#ff0000 / * color attribute can use English words to express your color; rgb color / hex represents the specific color*/

/*Text position (left, right, center)*/
text-align:left/right/center

/*Character decoration*/
text-decoration:underline(Underline)/overline(Upper scribe)/line-through(Delete line)/none(Delete text modifier)

/*Text format conversion*/
text-transform:capitalize(Change initials to uppercase)/uppercase(Convert lowercase to uppercase)/lowercase(Convert uppercase to lowercase)

/*Text indent*/
text-indent:2em(1em Represents the displacement of a Chinese character)

9. List style attribute

 /* Descendant element selector */
        .box ul{
            /* Remove small dots */
            list-style-type: none;
        }

        .box ul li{
            border:1px solid red;
            /* To center text, you need to set the height and row height to the same value */
            height: 35px;
            line-height: 35px;
            
            /* The origin is rarely used inside or outside the frame */
            list-style-position: inside;
            
            /* Replace the front dot with a custom picture */
            /* First remove the dots */
            list-style-type: none;
            /* Then replace the picture */
            list-style-image: url(../images/gongjun.JPG);
            
            /* list-style Integrates all of the above three attributes, separated by spaces. The number and location of attribute values are uncertain */
            list-style: none  url(../images/gongjun.JPG);
        }

10. Pseudo class selector

Pseudo class selectors are used to style different states of hyperlinks

Different styles of Hyperlinks:

  • Normal status: hyperlink not accessed: link
  • Status after access: hyperlink has been accessed: visited
  • Mouse up status: the mouse is over the hyperlink, but the hyperlink is not clicked: hover
  • Active status: the mouse has clicked the hyperlink, but the left button has not been released: active

Pseudo class selectors are all with colons

 		a:link
		{
            color: red;
        }
        /* visited Indicates the status after access */
        a:visited{
            color:steelblue;
        }
        /* Indicates that the mouse returns to the state on the hyperlink label */
        a:hover{
            color: cadetblue;
        }
        /* Indicates that the mouse clicks the hyperlink but the left button has not been raised */
        a:active{
            color: coral;
        }

tips: if it is not set in the order of pseudo class selector, it will be invalid!!! Follow the order of link – > visited – > hover – > active

11. Hyperlink beautification

Usually, the underline of the hyperlink is removed and a color is set

  • Generally, the colors in the normal state and access state are set to be consistent
  • Set to another color when the mouse is up
  • Generally, no color is set for the activation status (the activation time is too short and not necessary)
/* Style hyperlinks using pseudo class selectors */
        /* link Indicates the status when not accessed */
        a:link{
            color: black;
            text-decoration: none;/*De underline*/
        }
        /* visited Indicates the status after access */
        a:visited{
            color:black;
            text-decoration: none;
        }
        /* Indicates that the mouse returns to the state on the hyperlink label */
        a:hover{
            color: cadetblue;
        }
        /* Indicates that the mouse clicks the hyperlink but the left button has not been raised */
        /* a:active{
            color: coral;
        } */

12. Attribute selector

		/* Matching elements through attribute selectors */
        /* First: [property name] */
        [align]{
            color: burlywood;
        }
--------------------------------------------
        /* Second [attribute name = value] */
        [align="center"]{
            color: cadetblue;
        }
--------------------------------------------
        /* The third [attribute name ^ = value] */
		/* Matches all elements starting with xx in the attribute value */
        /* Find the font tag first, and then match the element whose color attribute value starts with #FF */
        font[color^="#FF"]{
            border: hotpink 1px solid;
        }
--------------------------------------------
        /* Fourth [attribute name $= value] */
		/* Matches all elements ending in xx in the attribute value */
        /* Find the font tag first, and then match the element whose color attribute value ends with #00 */
        font[color$="00"]{
            border: hotpink 1px solid;
        }
---------------------------------------------
		/* Fifth [attribute name * = value] */
        /* Matches all elements that contain attribute values */
        /* Find the font tag first, and then match the element with aa in the color attribute value */
        font[color*="aa"]{
            border: hotpink 1px solid;
        }

13. Inheritance

  • The inner element inherits the style of the outer element
  • When the style of the inner element is the same as that of the outer element, the inner element will overwrite the outer element
  • When the style of the inner element is different from that of the outer element, the inner element will not be overwritten
  • Not all styles can be inherited, only text and font styles can be inherited, and other style attributes cannot be inherited

tips: in practice, we often set the font size and font color for the body label. Because the body tag is the outermost layer. The inner layer inherits the style of the outer layer

14. Priority

  • Class selectors take precedence over label selectors
  • The id selector takes precedence over the class selector
  • Inline style has priority over id selector

Generally speaking, the more accurate the selector points to, the higher the priority. Generally, we use 1 to represent the priority of label selector, 10 to represent the priority of class selector, 100 to represent the priority of id selector and 1000 to represent the priority of inline style. A higher value indicates a higher priority.

Whether it is a single selector or a combination of multiple selectors, their priority can be calculated in the form of adding the weights of the selectors. The greater the weight, the higher the priority

15.! important attribute

! important is mainly used to increase the weight of attributes. The weight value of its attribute is infinity

/*Syntax: 	 Attribute: value! important*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        p{
            color: steelblue !important ;
        }
        .p1{
            color: tomato;
        }
        #p2{
            color: violet;
        }
    </style>
</head>
<body>
    <p class="p1" id="p2">Kaixinlang nail</p>
</body>
</html>

16. A label can carry multiple class names

give an example:

< tag name class = "value1 Value2 value3" > < / tag name >

Each class name is separated by a space

Advantages of multiple class names:

  • Reduce the amount of css code
  • The styles of multiple class names will be superimposed on the current element
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .div1{
            font-weight: bold;
        }
        .div2{
            color: tomato;
        }
        /* .div3{
            font-weight: bold;
            color: teal;
        } */
    </style>
</head>
<body>
    <div class="div1">Kaixinlang nail 1</div>
    <div class="div2">Kaixinlang nail 2</div>
    <div class="div2 div1">Kaixinlang nail 3</div>
</body>
</html>

tips: if the styles on multiple class names in a label are the same, there will be style conflicts. At this time, the code in css will be used as the standard, and whichever is written later will prevail

17. Background style attribute

tips:

  • The background color attribute is used to set the background color for an element, provided that the element has either content or width and height

  • .box{
           /* Set background color */
           background-color: tomato;
           width: 888px;  
       }
       
       .box2{
           /* Set background picture */
           background-image: url(../images/gongjun.JPG);
           width: 2000px;
           height: 1125px;
           /* Set horizontal tiling */
           background-repeat: repeat-x;
           /* Set vertical tiling */
           background-repeat: repeat-y;
           /* no-repeat  */
           background-repeat: no-repeat;
       }
 

  • .box{
            width: 1000px;
            height: 600px;
            border: black 1px solid;
            margin-left: auto;
            margin-right:auto;
            background-image: url(../images/gongjun.JPG);
            /* Set picture not to be tiled */
            background-repeat: no-repeat;
            /* background-position Property to set the location of the picture */
            /* According to the right bottom setting, the picture appears in the lower right */
            /* Horizontal direction can be set: left center right */
            /* Vertical direction can be set: top center bottom */
            background-position:right bottom ;
            /* background-position You can also select the location of the picture with a fixed value */
            background-position:100px 100px;
            /* background-position You can also use percentages to determine where the picture is located  */
            background-position: 50% 50%;
            /* The three methods can be mixed */
            background-position: center 50%;
            /* background-attachment Property to set whether the background picture is fixed */
            background-attachment: fixed;
            /* Short attribute: background */
            /* You can set multiple styles at the same time, such as background color, background picture, whether the background picture is tiled, etc */
            background:url(../images/zhuomian.JPG) fixed center center no-repeat
        }

18. Background style attribute case

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="exp2.css">
</head>
<body>

    <div class="box">
        <h2>Kaixinlang nail</h2>
        <ul>
            <li><a href="#"> happy wave nail, Junzhe is true</a></li>
            <li><a href="#"> happy wave nail, Junzhe is true</a></li>
            <li><a href="#"> happy wave nail, Junzhe is true</a></li>
            <li><a href="#"> happy wave nail, Junzhe is true</a></li>
            <li><a href="#"> happy wave nail, Junzhe is true</a></li>
        </ul>
    </div>
    
</body>
</html>

/* Style body labels */
body{
    font-size: 20px;    
    color: coral;
}

/* Set border for div */
.box{
    width: 600px;
    border: 1px black solid;
    margin-left: auto;
    margin-right: auto;
}
/* Style h2 labels */
.box h2{
    height: 45px;
    line-height: 45px;
    color: cadetblue;
}
/* Remove the dots in front of li */
.box ul li{
    list-style-type: none;
    height: 30px;
    line-height: 30px;
    /* Set a background picture for each li tag */
    background-image: url(../images/ic_daily.png);
    background-repeat: no-repeat;
    background-position: left center;
    /* Left inner fill */
    /* padding Property sets the distance from the contents of the box to the border line */
    padding-left: 30px;
}
/* Pseudo class selector */
a:link{
    color:darksalmon;
    text-decoration:none;
}
a:visited{
    color: darksalmon;
    text-decoration: none;
}
a:hover{
    color: royalblue;
    font-weight: bold;
}

19. Standard document flow

  • Standard document flow: the content on the page should follow the law, from left to right and from top to bottom
  • Blank folding: in the body tag, if no tag is used, type the text directly. When entering, separate the text with enter, and a blank area will appear when displayed on the html page
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Blank folding phenomenon -->
    writing
    book
</body>
</html>

[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-daxfp7er-1626594619738) (C: \ users \ MSI \ appdata \ roaming \ typora \ user images \ image-20210703154634401. PNG)]

  • Uneven height and bottom alignment: when displaying text on the page, if the size is different, the bottom of the text will be aligned, as the picture says.

[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-r3ga5gmb-1626594619741) (C: \ users \ MSI \ appdata \ roaming \ typora \ user images \ image-20210703155855222. PNG)]

20. Floating

  • When a floating attribute is added, the block is separated from the document flow and floats to the right without occupying the outermost space
  • Floating elements have a higher level than standard elements
  • Floating elements will stop floating when they encounter the border line of the parent element
  • Floating elements stop floating when they encounter other floating elements
  • When a floating element floats, the parent element does not wrap the floating element
  • After floating the inline element, the inline element becomes a block level element

[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-e5pq0eb4-1626594619749) (C: \ users \ MSI \ appdata \ roaming \ typora user images \ image-20210703162640792. PNG)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 600px;
            border: brown solid 1px;
            margin-right: auto;
            margin-left: auto;
            
        }
        .div1{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            /* Add the float attribute to the first box */
            float: right;
            /* When a floating attribute is added, the block is separated from the document flow and floats to the right without occupying the outermost space */
            /* Floating elements stop floating when they encounter the border line of the parent element */
            /* Floating elements have a higher level than standard elements */
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: coral;
            float: right;
        }
        .div3{
            width: 100px;
            height: 100px;
            background-color:darkslateblue;
            /* float: left; */
        }

        .box2{
            width: 600px;
            border: 1px cornflowerblue solid;
            margin-left: auto;
            margin-right: auto;
        }
        .s1{
            background-color: crimson;
            width: 100px;
            height: 100px;
            float: right;
        }
        .s2{
            background-color: darkorange;
            width: 100px;
            height: 100px;
        }
        .s3{
            background-color: dodgerblue;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

    <div class="box2">
        <span class="s1">Text1</span>
        <span class="s2">Text2</span>
        <span class="s3">Text3</span>
    </div>
</body>
</html>

21. Floating case

tips: some labels have their default inner padding and outer margin, which may affect the interface layout

You can use a universal selector to remove the default padding and margins for all tags in HTML

*{
    margin: 0px;
    padding: 0px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="exp3.css">
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#"> website columns</a></li>
            <li><a href="#"> website columns</a></li>
            <li><a href="#"> website columns</a></li>
            <li><a href="#"> website columns</a></li>
            <li><a href="#"> website columns</a></li>
            <li><a href="#"> website columns</a></li>
            <li><a href="#"> website columns</a></li>
            <li><a href="#"> website columns</a></li>
        </ul>
    </div>
</body>
</html>

/* Use the universal selector to remove the default padding and margins for all tags in HTML */
*{
    margin: 0px;
    padding: 0px;
}
/* When designing, start with the outermost label */
body{
    background-image: url(../images/zhuomian.JPG);
}

.nav{
    width: 100%;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    /* border: 1px cornflowerblue solid; */
}

.nav ul {
    list-style:none;
}
.nav ul li{
    /* Float each li tag */
    /* li It is originally a block element label. After floating it, it can be changed into a row style */
    float: left;
    /* Because the width of the outermost box is 960, of which eight labels, on average, each field occupies a width of 120 */
    width: 12.5%;
    height: 50px;
    /* The height is consistent with the lineweight and is vertically centered */
    line-height: 50px;
    /* Text centered */
    text-align: center;
    background: cornflowerblue;
}

/* Beautify a label */
a:link{
    color: darkorange;
    text-decoration: none;
}
a:visited{
    color: darkorange;
    text-decoration: none;
}
a:hover{
    color: indianred;
}

[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-ezwh2bsl-1626594619751) (C: \ users \ MSI \ appdata \ roaming \ typora \ user images \ image-20210703165832618. PNG)]

22. Clear float

As long as there is a float, the float must be cleared after

reason:

A floating element will affect the layout of the elements below it. The parent element of a floating element will not visually wrap the floating element

There are three ways to clear floats:

  • Setting a fixed height for the parent element of a floating element is not recommended. Generally, the height of an element is not set manually, but should be raised by the content wrapped in it

  • Use the style attribute to clear floating: clear (this attribute is specifically used to clear floating)

    clear:right

    clear:left

    clear:both generally use this property

    Generally, a new blank div is created under the last floating element to empty the div, which is only used to clear the floating element

  • Use the attribute overflow:hidden to clear the float

    overflow is an attribute

    overflow:hidden itself is used to hide the overflow part and clear the float. This attribute is generally used to clear the float of the list

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 600px;
            border: 1px cornflowerblue solid;
            margin-left: auto;
            margin-right: auto;
            /* Method 1: set a fixed height for the parent element of the floating element */
            /* height: 400px; */
        }
        .div1{
            width: 100px;
            height: 100px;
            background-color: crimson;
            /* Float left */
            float: left;

        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: cyan;
            /* Float left */
            float: left;

        }
        .div3{
            width: 100px;
            height: 100px;
            background-color: darkorange;
            /* Float right */
            float: right;
        }
        /* Method 2: use clear floating style attribute */
        .cls{
            /* clear:both Property is used to clear left and right floats */
            clear: both;
        }
        ul{
            list-style: none;
        }
        ul li{
            float: left;
            border: rgb(12, 167, 167) 1px solid;
            padding-right: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <!-- New blank div Used to clear floats -->
        <div class="cls"></div>
    </div>
    <h2>Kaixinlang nail</h2>
    <!-- Method 3: set the parent element of the floating element overflow:hidden Properties of -->
    <ul style="overflow: hidden;">
        <li>Junzhe is true 1</li>
        <li>Junzhe is true 2</li>
        <li>Junzhe is true 3</li>
        <li>Junzhe is true 4</li>
        <li>Junzhe is true 5</li>
        <li>Junzhe is true 6</li>
        <li>Junzhe is true 7</li>
        <li>Junzhe is true 8</li>
        <li>Junzhe is true 9</li>
        <li>Junzhe is true 10</li>
    </ul>
    <h2>Kaixinlang nail</h2>
</body>
</html>

23.padding

  • padding means "filling inside", which refers to the distance from the middle of the box to the border
  • Padding has four directions. We can describe padding in four directions respectively
  • Small attributes:
    • Padding top: upper and inner filling
    • Padding right: right inner padding
    • Padding bottom: bottom filling
    • Padding left: left inner fill
  • Abbreviated attributes:
    • padding:20px indicates that the inner padding in the upper, lower, left and right directions is 20 pixels
    • padding:20px 30px if two values are filled in, the two values represent up, down, left and right filling respectively in order
    • Padding: 20px, 30px, 40px if three values are filled in, the three values are expressed as upper, left and right, lower and inner filling respectively in order
    • padding:20px 30px 40px 50px if four values are filled in, the four values are expressed as upper, right, lower and left inner filling (clockwise)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 100px;
            border: coral 1px solid;
            /* Use small attributes to describe infill */
            /* Upper and inner filling */
            padding-top: 20px;
            /* Right inner fill */
            padding-right: 30px;
            /* Lower inner filling */
            padding-bottom: 40px;
            /* Left inner fill */
            padding-left: 50px;

        }
        .box2{
            width: 300px;
            height: 100px;   
            border: coral 1px solid;
            /* Use short attributes to describe inner padding */
            /* If there is only one value, it means that the inner filling in the upper, lower, left and right directions is consistent */
            /* padding:20px; */
            /* If multiple values are entered, the corresponding inner filling directions of the four values are up, right, down and left respectively */
            padding: 20px 30px 40px 50px;
        }
    </style>
</head>
<body>
    <div class="box">Kaixinlang nail</div>
    <div class="box2">Kaixinlang nail 2</div>
</body>
</html>

24.margin

  • Margin means "outer margin". It refers to the distance between boxes
  • margin has four directions. We can describe it in four directions
  • Small attributes:
    • Margin top: top outer margin
    • Margin right: right outer margin
    • Margin bottom: bottom margin
    • Margin left: make margin
  • Abbreviated attribute
    • Margin: the direction of margin is consistent with that of padding mentioned in the previous section
  • Precautions for margin:
    • In the standard document stream, the margin value in the vertical direction will not be superimposed, but will take a larger value
    • There is no margin collapse in the horizontal direction
    • Floating elements have no margin collapse
  • The center can be achieved by setting auto on the left and right of the margin attribute respectively
  • Only boxes in the standard document stream can be centered (floating elements do not belong to the standard document stream)
  • The margin attribute is used for the horizontal center of the box, not for the alignment of the text
    • Text align: used to center the text horizontally, but not the box horizontally

tips: collapse refers to that the value of margin will not be superimposed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">

        body{
            padding: 0;
            margin: 0;
        }
        .box1{
            border:steelblue 1px solid;
            width: 100px;
            height: 100px;
            /* margin: 10px 40px 50px; */
        }
        .box2{
            border:coral 1px solid;
            width: 100px;
            height: 100px;
            /* margin: 20px; */
        }
        .test1{
            border:coral 1px solid;
            width: 100px;
            height: 100px;
            background-color: crimson;
            /* Bottom outer margin */
            margin-bottom: 20px;

        }
        .test2{
            border:coral 1px solid;
            width: 100px;
            height: 100px;
            background-color: darkcyan;
            /* The margin in the vertical direction will not be superimposed and will take a larger value */
            margin-top: 40px ;
        }
        /* The horizontal margin value does not collapse */
        span{
            border: darkgreen 1px solid;
        }
        .s1{
            background-color: darkorange;
            margin-right: 20px;
        }
        .s2{
            background-color: dodgerblue;
            margin-left: 20px;
        }
        /* Floating elements do not collapse */
        .box3{
            width: 200px;
            border: orangered 5px solid;
            /* Clear float */
            overflow: hidden;
        }
        .box3 div{
            width: 200px;
            height: 200px;
        }
        .div1{
            background-color: firebrick;
            float: left;
            margin-bottom: 20px;
        }
        .div2{
            background-color: lightskyblue;
            float: left; 
            margin-top: 40px;
        }
        .abc{
            background-color: orangered;
            width: 100px;
            height: 100px;
            /* If both the left and right outer margins are set, the auto attribute will be centered */
            /* If an element has no width set, it will occupy 100% of the parent element */
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="box1">Kaixinlang nail</div>
    <div class="box2">Kaixinlang nail</div>
    <div class="test1">Kaixinlang nail</div>
    <div class="test2">Kaixinlang nail</div>
    <span class="s1">Kaixinlang nail</span><span class="s2">Kaixinlang nail</span>
    <div class="box3">
        <div class="div1">Kaixinlang nail</div>
        <div class="div2">Kaixinlang nail</div>
    </div>
    <div class="abc">Kaixinlang nail</div>
</body>
</html>

25. Be good at using the padding of the parent element instead of the margin of the child element

  • When boxes are nested, there are two methods to make the inner box have a certain margin from the outer box:
    • Add border lines to the outermost box (not commonly used in practical applications)
    • Use the padding attribute of the parent element instead of the margin attribute of the child element
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .a{
            width: 300px;
            height: 500px;
            background-color: palegreen;
            /* Set the padding attribute to the parent element of content1, that is, a box */
            padding-top: 100px;
        }
        .content1{
            width: 100px;
            height: 100px;
            background-color: palevioletred;
            /* margin-top: 100px ; */
        }




    </style>
</head>
<body>
    <div class="a">
        <div class="content1">Kaixinlang nail</div>
    </div>
</body>
</html>
  • The margin attribute is intended to describe the relationship between siblings and sibling elements rather than the relationship between parent and child elements. The padding attribute is best used for the relationship between parent and child elements

26.border attribute

  • The border also has directions:
    • Border top: top border
    • Border left: left border
    • Border right: right border
    • Border bottom: bottom border
  • There are many styles of border lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        ul{
            border: slategrey 1px solid;
            width: 300px;
            margin-right: auto;
            margin-left: auto;
            /* padding-top: 10px; */
        }
        ul li{
            list-style: none;
            margin-top: 10px;
            width: 100px;
            height: 20px;
            margin-left: auto;
            margin-right:auto ;
        }
        .line1{
            border:steelblue 10px dotted;
        }
        .line2{
            border: steelblue 10px dashed;
        }
        .line3{
            border: steelblue 10px solid;
        }
        .line4{
            border: steelblue 10px double;
        }
        .line5{
            border: steelblue 10px groove;
        }
        .line6{
            border: steelblue 10px ridge;
        }
        .line7{
            border: steelblue 10px inset;
        }
        .line8{
            border: steelblue 10px outset;
            margin-bottom: 10px;
        }
    </style>
</head>
    <ul>
        <li class="line1">Point border</li>
        <li class="line2">Dashed border</li>
        <li class="line3">solid border</li>
        <li class="line4">Double solid border</li>
        <li class="line5">groove frame</li>
        <li class="line6">ridge frame</li>
        <li class="line7">Embedded border</li>
        <li class="line8">Convex border</li>
    </ul>
</body>
</html>

27.display attribute

  • Display means display. It is used to convert inline elements to block level elements, display hidden elements or hide displayed elements

  • The value of display attribute: inline, block and none

  • After setting the display attribute value of an inline element to block, the element will be transformed from an inline element to a block level element

    • span{
        background-color:crimson ;
        width: 100px;
        height: 100px;
        /* Using the display attribute */
        display: block;
        margin-bottom: 10px;
    }

    • Note: if an inline element is converted to a block level element, the element will have the characteristics of a block level element

  • When the display attribute of a block level element is set to inline, the element will be transformed into an inline element

    • h2{
       width: 100px;
       height: 100px;
       background-color: salmon;
       /* Convert a block level element to an inline element */
       display: inline;
   }

    • Note: if an inline element is converted to a block level element, the element will have the characteristics of a block level element

  • To hide a displayed element, you only need to set the display attribute to none

    • .box{
        width: 100px;
        height: 100px;
        background-color:seagreen;
        margin-top: 20px;
        /* Set the display property to none */
        display: none;
    }

28.display comprehensive case

  • html file:

    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="exp4.css">
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#"> website columns</a></li>
            <li><a href="#"> website columns</a></li>
            <li><a href="#"> website columns</a></li>
            <li><a href="#"> website columns</a></li>
            <li><a href="#"> website columns</a></li>
            <li><a href="#"> website columns</a></li>
            <li><a href="#"> website columns</a></li>
            <li><a href="#"> website columns</a></li>
        </ul>
    </div>
    
</body>
</html>

  • css file:

    • /* Use the universal selector to remove the default padding and margins for all tags in HTML */
*{
    margin: 0px;
    padding: 0px;
}
/* When designing, start with the outermost label */
body{
    background-image: url(../images/zhuomian.JPG);
}

.nav{
    width: 100%;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    /* border: 1px cornflowerblue solid; */
}

.nav ul {
    list-style:none;
}
.nav ul li{
    /* Float each li tag */
    /* li It is originally a block element label. After floating it, it can be changed into a row style */
    float: left;
    /* Because the width of the outermost box is 960, of which eight labels, on average, each field occupies a width of 120 */
    width: 12.5%;
    height: 50px;
    /* The height is consistent with the lineweight and is vertically centered */
    line-height: 50px;
    /* Text centered */
    text-align: center;
    background: cornflowerblue;
}
.nav ul li a{
    width: 100%;
    height: 50px;
    /* Convert inline elements to block level elements */
    display: block;
}

/* Beautify a label */
a:link{
    color: darkorange;
    text-decoration: none;
}
a:visited{
    color: darkorange;
    text-decoration: none;
}
a:hover{
    color: indianred;
    background: darkslateblue;
}

  • design sketch:

    • [the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-rynudwl5-1626594619752) (C: \ users \ MSI \ appdata \ roaming \ typora \ user images \ image-20210706142404864. PNG)]

29.position attribute

  • Position means position in English. It is mainly used to locate elements

  • It is divided into three categories:

    • position: fixed
    • position: relative relative positioning
    • position: absolute absolute positioning

  • Note: when using the positioning attribute, it must be used in conjunction with the positioning coordinates

    • Left: indicates how far the positioned element is from the left
    • Right: indicates how far the positioned element is from the right
    • Top: indicates how far the positioned element is from the top
    • Bottom: indicates how far the positioned element is from the bottom

  • Fixed positioning:

    • Fixed positioning elements are out of the standard document stream
    • The level of fixed elements is higher than that of standard document flow, so fixed elements will cover the elements of standard document flow
    • The fixed positioning element no longer takes up space, and its displayed position will not scroll with the browser
    • Case 1: use fixed positioning to realize the button to return to the top
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">

        *{
            margin: 0;
            padding: 0;
        }
        a{
            width: 80px;
            height: 60px;
            display: block;
            text-align: center;
            line-height: 60px;
            background-color: tomato;
            text-decoration: none;
            color: cornsilk;
            font-size: 18px;
            /* Use fixed positioning */
            position: fixed;
            right: 30px;
            bottom: 100px;
        }
    
    
    </style>
</head>
<body>
    <a href="#"> back to top</a>
    <img src="../images/gongjun.JPG" alt="Jun Junzi">
    <img src="../images/gongjun.JPG" alt="Jun Junzi">
    <img src="../images/gongjun.JPG" alt="Jun Junzi">
    <img src="../images/gongjun.JPG" alt="Jun Junzi">
    <img src="../images/gongjun.JPG" alt="Jun Junzi">
    <img src="../images/gongjun.JPG" alt="Jun Junzi">
    <img src="../images/gongjun.JPG" alt="Jun Junzi">
    <img src="../images/gongjun.JPG" alt="Jun Junzi">
</body>
</html>

    Case screenshot

    [the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-zpnke5fp-1626594619754) (C: \ users \ MSI \ appdata \ roaming \ typora user images \ image-20210706151026628. PNG)]

    • Case 2: use fixed positioning to fix the top navigation bar
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .nav{
        width: 100%;
        height: 60px;
        background-color: #222;
        /* Use fixed positioning */
        position: fixed;
        left: 0;
        top: 0;
    }
    .nav .inner_c{
        width: 1000px;
        height: 60px;
        margin-left: auto;
        margin-right: auto;
        /* background-color: aqua; */
    }
    ul{
        list-style: none;
    }
    ul li {
        float: left;
        width: 12.5%;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }
    ul li a{
        display: block;
    }
    a:link{
        text-decoration: none;
        color: beige;
    }
    a:visited{
        color: beige;
    }
    a:hover{
        color: rgb(26, 26, 25);
        background: beige;
        font-weight: bold;
        
    }
    body{
        padding-top: 70px;
    }
    
    </style>
</head>
<body>
    <div class="nav">
        <div class="inner_c">
            <ul>
                <li><a href="#"> website columns</a></li>
                <li><a href="#"> website columns</a></li>
                <li><a href="#"> website columns</a></li>
                <li><a href="#"> website columns</a></li>
                <li><a href="#"> website columns</a></li>
                <li><a href="#"> website columns</a></li>
                <li><a href="#"> website columns</a></li>
                <li><a href="#"> website columns</a></li>
            </ul>
        </div>
    </div>
    <img src="../images/gongjun.JPG" alt="Jun Jun">
    <img src="../images/gongjun.JPG" alt="Jun Jun">
    <img src="../images/gongjun.JPG" alt="Jun Jun">
    <img src="../images/gongjun.JPG" alt="Jun Jun">
    <img src="../images/gongjun.JPG" alt="Jun Jun">
    <img src="../images/gongjun.JPG" alt="Jun Jun">
    <img src="../images/gongjun.JPG" alt="Jun Jun">
    <img src="../images/gongjun.JPG" alt="Jun Jun">
    <img src="../images/gongjun.JPG" alt="Jun Jun">
</body>
</html>

    Effect screenshot:

    [the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-3wwnbfx8-1626594619754) (C: \ users \ MSI \ appdata \ roaming \ typora \ user images \ image-20210706155233662. PNG)]

  • Relative positioning:

    • The relative positioning element does not deviate from the standard document flow
    • If the relative positioning element does not set the positioning coordinates, the relative positioning element does not change the position; After the positioning coordinates are set for the relative positioning element, the position will be transformed based on the original position
    • Relative positioning elements will cover the elements of the standard document stream
    • Relative positioning elements can be negative numbers
    • Note: the relative positioning element will leave a pit in the original position, which is rarely used alone. It is mainly used in conjunction with the absolute positioning element
    • Case 1:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    /* Matching elements using attribute selectors */
    input[type="text"]{
        font-size: 36px;
    }
    input[type="button"]{
        position: relative;
        top: 4px;
    }
    </style>
</head>
<body>
    <input type="text">
    <input type="button" value="Detect user name">
</body>
</html>

    Effect display:

    [the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-scssp1ol-1626594619755) (C: \ users \ MSI \ appdata \ roaming \ typora \ typora user images \ image-20210706161100524. PNG)]

  • Absolute positioning:

    • Positioning relative to ancestor positioning element

    • Ancestor location: the absolute location element will first find whether its parent element has a location attribute set. If so, it will locate based on its parent element. If its parent element does not have a location attribute set, it will continue to find the parent element of its parent element, and so on. If no positioning property is set, positioning will be performed according to the browser window.

    • The absolute positioning element is separated from the standard document flow

    • The absolute positioning element does not occupy space and will cover the elements of the standard document stream

      • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            border: darkcyan 1px solid;
            margin: 100px auto;
            position: relative;
        }
        .box div{
            width: 100px;
            height: 100px;
        }
        .test1{
            background-color: orangered;
        }
        .test2{
            background-color: goldenrod;
            /* Add absolute positioning attribute */
            position: absolute;
            /* left: 0px; */
            right: 0px;
            top: 0px;
            /* bottom: 0px; */
        }
        .test3{
            background-color: lightseagreen;
        }
    
    </style>
</head>
<body>
    <div class="box">
        <div class="test1">Jun Jun</div>
        <div class="test2">Jun Jun</div>
        <div class="test3">Jun Jun</div>
    </div>
</body>
</html>

      • [the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-rwzyqtkq-1626594619756) (C: \ users \ MSI \ appdata \ roaming \ typora \ user images \ image-20210706163126788. PNG)]

    • If both the parent element and the grandfather element have relative positioning, the current absolute positioning element will locate its parent element

    • The positioning forms of parent elements can be fixed positioning, relative positioning and absolute positioning. Generally, the relative positioning attribute (child absolute parent phase) is used

30. Positioning attribute cases

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="exp8.css">
</head>
<body>
    <div class="box">
        <span><img src="../images/ic_daily.png" alt="" ></span>
        <div><img src="../images/gongjun.JPG" alt="Jun Jun" width="308px"></div>
    </div>
    
</body>
</html>

*{
    margin: 0;
    padding: 0;
}

.box{
    width: 308px;
    height: 308px;
    border: cornflowerblue solid 1px;
    margin: 100px auto;
    position: relative;
}

.box span{
    /* Absolute positioning */
    position: absolute;
    left: 20px;
    top: -20px;
}

Effect screenshot:

[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-r2hlunzy-1626594619756) (C: \ users \ MSI \ appdata \ roaming \ typora \ typora user images \ image-20210706164256442. PNG)]

31.z-index attribute

  • The z-index attribute indicates who covers whom, and the one with a large value will cover the one with a small value
  • Only positioning elements have z-index values
  • The z-index has no unit. The value is a positive integer. The default z-index value is 0
  • If multiple positioning elements do not have the z-index value set, or the z-index value is the same, the positioning element written after html will cover the previous positioning element
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    
        div{
            width: 200px;
            height: 200px;
        }
        .div1{
            background-color: lightseagreen;
            position: absolute;
            left: 100px;
            top: 100px;
            /* 2.div1 Setting the z-index attribute will override the style of div2 */
            z-index: 2;
        }
        .div2{
            background-color: orangered;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    
    
    </style>
</head>
<body>
    <div class="div1"></div>
    <!-- 1.Not set z-index Property, written in the following div2 It'll cover what's written on the front div1 -->
    <div class="div2"></div>
</body>
</html>

32. Structure pseudo class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    
        /* Use the structure pseudo class selector in css3 to match elements */
        /* Match the format of the first child: E: first child {attribute: value} */
        .box ul li:first-child{
            color: palevioletred;
            width: 200px;
            height: 30px;
            line-height: 30px;
            border: plum 1px solid;
        }
        /* Match the last child */
        .box ul li:last-child{
            color: salmon;
            width: 200px;
            height: 30px;
            line-height: 30px;
            border: plum 1px solid;
        }
        /* Match nth child format: nth child (n)*/
        /* Match the fourth child */
        .box ul li:nth-child(4){
            color: crimson;
            width: 200px;
            height: 30px;
            line-height: 30px;
            border: plum 1px solid;
        }
        /* Match even children */
        .box ul li:nth-child(even){
            color: lime;
            width: 200px;
            height: 30px;
            line-height: 30px;
            border: plum 1px solid;
        }
        /* Matches an odd number of children */
        .box ul li:nth-child(odd){
            color: lime;
            width: 200px;
            height: 30px;
            line-height: 30px;
            border: plum 1px solid;
        }
    
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>Kaixinlang nail</li>
            <li>Kaixinlang nail</li>
            <li>Kaixinlang nail</li>
            <li>Kaixinlang nail</li>
            <li>Kaixinlang nail</li>
            <li>Kaixinlang nail</li>
            <li>Kaixinlang nail</li>
            <li>Kaixinlang nail</li>
            <li>Kaixinlang nail</li>
            <li>Kaixinlang nail</li>
        </ul>
    </div>
</body>
</html>

33. Pseudo class selector case

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        table tr:nth-child(even){
            background-color: orangered;
        }
        table tr:nth-child(odd){
            background-color: teal;
        }
        /* The background color is displayed when the mouse moves to tr */
        table tr:hover{
            background-color: darkorange;
        }

    </style>
</head>
<body>
    <table width="500" border="1" align="center">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
</body>
</html>

Effect screenshot:
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-bqyt5fep-1626594619757) (C: \ users \ MSI \ appdata \ roaming \ typora \ user images \ image-20210706185933340. PNG)]

  • Border collapse attribute:

    • It is mainly used to merge table border lines
    • The value is: border collapse: collapse
    table{            border-collapse: collapse;        }

    Effect display:

    [the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-8qgknkyb-1626594619757) (C: \ users \ MSI \ appdata \ roaming \ typora \ user images \ image-20210706190210465. PNG)]

34. Pseudo element

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style type="text/css">        .box{            width: 40%;            /* Center the current element horizontally */            margin: 100px auto;            font-size: 14px;            border: 1px salmon solid;            color: seagreen;        }        /* Operates on the first word in the current element */        .box:first-letter{            color: steelblue;            font-weight: bold;            font-size: 24px;        }        /* Operates on the first line of words in the current element */        .box::first-line{            color: teal;            font-weight:bold;            font-size: 32px;        }        /* To insert text before the current element, you must put the text into the content */        .box::before{            content: "Citrus Gardenia";        }        /* Inserts text at the end of the current element */        .box::after{            content: "Jiangxi cat";        }    </style></head><body>    <div class="box">It's never too old to learn. Although I feel that I have learned a lot of algorithms, I found that I'm still a brother after I stayed up late yesterday. I really can't help it. I intend to send out the algorithm learning route. I summarized the whole algorithm learning stage into five steps: Basic grammar learning, grammar matching exercises, data structure Introduction and advanced algorithm. This paper combs the mind maps of these five major items, which will be introduced in detail below.          I hope you can find your own positioning and go further and further on the road of algorithm through your own efforts.          Don't be impetuous at the beginning. Don't stand up for yourself flag，Said we must learn so many things. Even if you are energetic and work day and night, your time is limited. Therefore, the most important thing is to clarify what we want to do, then formulate a reasonable goal, and then put the content to be learned into practice step by step.        </div></body></html>

35. Text shading

  • Text shadow: horizontal shadow vertical shadow blur distance shadow color

  • tips: the text shadow attribute is one or more shadows of the text. This attribute is a comma separated list of shadows, each with two or three length values and an optional color. The omitted length is 0

  • <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style type="text/css">        .box{            font-size: 40px;            font-family: Regular script;            color: teal;            /* Shadow text */            /* The four parameters represent 1 Horizontal direction 2 Vertical direction 3 Ambiguity 4 colour */            text-shadow: 4px 1px 2px grey;        }        /* You can set multiple sets of shadows separated by commas */        .box2{            font-size: 40px;            font-family: Regular script;            color:salmon;            /* Set text shadow */            text-shadow: 4px 2px 2px grey,-4px -4px 3px teal;        }    </style></head><body>    <div class="box">Citrus Gardenia</div>    <div class="box2">Jiangxi cat</div></body></html>

36. Box shadow

  • Box shadow: horizontal shadow vertical shadow blur distance shadow size shadow color inner / outer shadow

  • Horizontal and vertical shadows must be written, and the rest may not be written

  • <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style type="text/css">        .box{            margin: 100px auto;            width: 100px;            height: 100px;            border: 1px salmon solid;            /* Set box shadow */            /* The meanings of the parameters are: 1 Horizontal shadow 2 Vertical shadow 3 Ambiguity 4 Shadow size 5 Shadow color 6 Internal / external shadow */            /* Shadows can be set in groups separated by commas */            box-shadow: 11px 9px 5px -2px goldenrod,-11px -9px 5px -2px salmon ;        }        /* Pictures can also be shaded */        img{            margin-right:auto ;            margin-left: auto;            display: block;            box-shadow:11px 9px 5px -2px grey ;        }    </style></head><body>    <div class="box"></div>    <img src="../images/gongjun.JPG" alt="" width="200px"></body></html>

37. Rounded rectangle

  • Border radius: upper left, upper right, lower right, lower left

  • <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style type="text/css">        div{                    }        .box1{            /* Set the border radius property to set the fillet */            /* border-radius: Upper left, upper right, lower right, lower left */            border-radius: 20px 30px 40px 50px;            border: 1px salmon solid;            width: 100px;            height: 100px;            margin-left: auto;            margin-right: auto;        }        .box2{            /* Set the border radius property to set the fillet */            /* border-radius: The upper, lower, left and right positions are 20px */            border-radius: 20px;            border: 1px salmon solid;            width: 100px;            height: 100px;            margin-left: auto;            margin-right: auto;        }        .box3{            /* Set the border radius property to set the fillet */            /* border-radius: Upper left and lower right are 20px; The upper right and lower left are 60px */            border-radius: 20px 60px;            border: 1px salmon solid;            width: 100px;            height: 100px;            margin-left: auto;            margin-right: auto;        }        .box4{            /* Set the border radius property to set the fillet */            /* border-radius: The upper left is 90px, the upper right and lower left are 60px, and the lower right is 10px */            border-radius: 90px 60px 10px;            border: 1px salmon solid;            width: 100px;            height: 100px;            margin-left: auto;            margin-right: auto;        }        .box5{            /* Set the border radius property to set the fillet */            /* border-radius: Set the value of the fillet property to half the width and height to turn the shape into a circle */            border-radius: 50px;            border: 1px salmon solid;            width: 100px;            height: 100px;            margin-left: auto;            margin-right: auto;        }        .box6{            /* Set the border radius property to set the fillet */            /* border-radius: Realize that the top half is a solid circular pattern */            border-radius: 50px 50px 0px 0px;            background-color: seagreen;            border: 1px salmon solid;            /* The height is half the width */            width: 100px;            height: 50px;            margin-left: auto;            margin-right: auto;        }            </style></head><body>    <div class="box1"></div>    <div class="box2"></div>    <div class="box3"></div>    <div class="box4"></div>    <div class="box5"></div>    <div class="box6"></div></body></html>

38. Rounded rectangle case

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <link rel="stylesheet" href="exp10.css"></head><body>    <div class="more"><a href="#"> more < / a > < / div ></body></html>

body{    background-color: grey;}.more{    width: 60px;    height: 30px;    line-height: 30px;    /* border: 1px solid salmon; */    background-color: white;    text-align: center;    margin:100px auto;    border-radius: 15px;    }a{    display: block;    width: 60px;    height: 30px;}a:link{    color: black ;    text-decoration: none;}a:visited{    color: black;    text-decoration: none;}a:hover{    color: white;    background-color: black;    border-radius: 15px;}

39. Transparency

  • Transparency can be set as long as there are colors

  • By rgba{color, color, color, transparency}

    • a: It means transparency. The value of transparency is 0 ~ 1. 0 means completely transparent and 1 means opaque

  • Background color transparent:

    • Background-color: rgba{x,x,x,0.x}

  • Text color transparency:

    • color:rgba{x,x,x,0.x}

  • Border color transparent

    • border:rgba{x,x,x,0.x}
  • <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style type="text/css">    *{        margin: 0;        padding: 0;    }        .box{            width: 100px;            height: 100px;            background-color: rgba(166, 200, 111,0.5);            position: fixed;        }        p{            color: rgba(25, 78 , 88, 0.5);            border: 10px rgba(31, 158, 86,0.3) solid;        }    </style></head><body>    <div class="box"></div>    <p>It's never too old to learn. Although I feel that I have learned a lot of algorithms, I found that I'm still a brother after I stayed up late yesterday. I really can't help it. I intend to send out the algorithm learning route. I summarized the whole algorithm learning stage into five steps: Basic grammar learning, grammar matching exercises, data structure Introduction and advanced algorithm. This paper combs the mind maps of these five major items, which will be introduced in detail below.          I hope you can find your own positioning and go further and further on the road of algorithm through your own efforts.          Don't be impetuous at the beginning. Don't stand up for yourself flag，Said we must learn so many things. Even if you are energetic and work day and night, your time is limited. Therefore, the most important thing is to clarify what we want to do, then formulate a reasonable goal, and then put the content to be learned into practice step by step.</p></body></html>

Keywords: html css

Added by thewooleymammoth on Sun, 16 Jan 2022 05:56:23 +0200

Popular Keywords

©2024 Programming VIP