Detailed notes on learning html+css by yourself


Common symbols: 6

Ordered list: ol > Li 6

Unordered list: UL > Li 7

Custom list: DL > DT + DD 7

Picture label: 7

Table: 8

Form from: 8

CSS: 9

CSS priority: 9

CSS selector 10

Pseudo class selector: 10

CSS text properties 11

1. Font size 11

2. Color 11

3. Bold & inclined 11

4. Horizontal and vertical centering 12

5. Text spacing 12

6. Indent the first line by 12

7. Text modification 12

8. Transform case 13

9. Font 13

CSS list properties 13

CSS background properties 14

Fixing and scrolling of background 15

Attachment 15

Compound writing: 15

Padding inner margin 16

padding - direction: 16

Border border: 16

Margin margin 17

CSS floating 18

Floating 18

Clear float: 18

Overflow attribute: 18

Free space 19

Element type: 19

Block elements: 19

Inline element: 19

Inline block element: 20

Element conversion: 20

Hide display 20

Locate attributes and attribute values 20

Anchor point: 21

Width height adaptation 21

Height adaptation 22

Floating element parent height adaptation 22

Pseudo element: 22

Hidden distinction23

Window adaptation 23

Layout 23

Advanced form - radio 24

checkbox 24

File upload hidden 24

Pull down menu; twenty-five

Text field 25

Field set 26

HTML5 26

New semantic tag: 26

audio 27

Video 27

Enhanced input 28

List of options (data) 28

Enhance form properties 29

CSS3 29

Selector 29

Level selector 29

Attribute selector 30

Structure pseudo class: 31

Pseudo class 31

Only child 31

Empty 32

Root selector 32

Target pseudo class selector 32

Accordion 32

Ul state pseudo class 32

Negative selector 33

Shadow 34

Text shadow 34

Box shadow 34

Rounded border 34

Round 35

Rectangle 35

Semicircle 35

Fan 35

Font introduction 35

Weird box model 36

Elastic box 36

Modify spindle direction 36

Main side shaft alignment 37

Break line 37

Item alignment 37

Project adjustment sequence 38

Remaining width and height of the project 38

Mobile terminal 38

Common attributes of mobile terminal 39

Multi column layout 40

Multi column layout 40

Waterfall 41

Responsive layout 41

Em and rem 43

Differences between Em and rem 43

rem layout 43

VW and VH 44

VW conversion 44

Difference between 100% and VW 45

Gradient 45

Linear gradient 45

Radial gradient 45

Repeat gradient 47

Animation transition 47

Animation transition attributes 47

Animation transition type 48

Animation transition single attribute 49

2D attribute transform 50

2D translation 50

2D zoom 51

2D rotation 51

Multi attribute 52

Tilt 52

Keyframes 53

Keyframe animation attribute animation 54

Keyframe animation single attribute 56

Drawer 56

Key frame animation rotation 56

Frame by frame animation 58

Compatibility query 59

Animat animation library 59

3D 59

3D pan 60

3D rotation 61

3D zoom 62

3D cube 63

Grid layout 65

Grid layout 69

Rows and columns 69

Spacing 70

Merge 70

Alignment 71

Item properties 71

Shortcut key

alt + shift + down arrow} quick copy

Ctrl+Enter (enter key) quickly jump out of the label to the next line

Using plug-ins


Press F1 # search cssrem and press enter to change it to the calculated value


The default calculation is based on 16px benchmark

Preferences - settings are also available

You can find plug-ins settings extension settings


fontsize (16) = (number of benchmarks to set)



br , line feed

width , height

height = width

Bgcolor / background color background color

align = "left or right or center" text is aligned horizontally

valign = "top / middle / bottom" text vertical alignment

Strong / BText bold

em/i text tilt

u underline

del delete line

sup superscript [1]

sub subscript [1]

hr , horizontal labels , support attributes < hr color = 'color' width = 'width' align = 'where to lean (left / right)' noshade , remove shadows / >

 opacity: 0.7;/* opacity transparency 0 ~ 1 # default 1 opaque*/

Transparent color transparent

border-radius: 4px;/* Fillet*/

font-size: 25px;/* Font size*/

text-indent: 11px;/* Font indent*/

Box shadow

Text shadow text shadow

display: flex; Elastic box

box-sizing: border-box; Weird box model

Common symbols:

Left sharp corner ⁢ = < right sharp corner > = = >

Entering Lorem # will automatically generate a string of characters


The width of this space is obviously affected by the font and strongly} not recommended

  the width occupied is exactly a Chinese width and is basically unaffected by the font

© Copyright symbol: ©  

Trademark symbol:

™   ™ Trademark the application provided by the national trademark office may be successful and may be rejected

®    ® The label indicates that the registration is successful. If someone uses a protected trademark, he can sue him

Weird cute Icon

😀  😁 😂 😃

Weird cute Icon 
&#128512  &#128513 &#128514 &#128515

div # large box is used to divide the area, and one row is exclusive by default

Quickly write three div boxes div{111111}*3

span small box does not monopolize one line and has no practical significance. It is mainly used to decorate the text independently. The width of the content takes up as much space as possible

Ordered list: ol > Li

li , labels can be placed freely, but only li can be placed in ol

Numbers are automatically generated. The default value is 1.2.3

Attribute type: 1, a, a, I, I; Start = where to start, the value can only be a number

Unordered list: UL > Li

1. Only Li can be placed in UL, and other labels can be placed in Li

        2. The default is a black solid circle

        3. The type , attribute defaults to disc , solid circles. Circle hollow circle,

Square is a solid square, and none cancels the point

User defined list: DL > DT + DD , quick create

< dl > usually only one pair is placed in dl

< DT > I'm a picture < / dt >

< DD > I am the text < / DD >


  1. There are two ways to write the same level directory ① code gif   ②./ code.gif
  2. Parent directory/

Picture label: img

< img # src = "picture path" alt = "replace text" title = "prompt text after mouse over" width = "width" height = "height" target = "specify where to open the document" >

target = "U self" default = "U blank" new window opens

width ^ height: px, percentage (% relative to parent element)

The window itself has no width or height, so you need to set CSS

html body{width:100%;height:100%;}


 <table border="1px" width="500" height="200"

    align="center" bordercolor="red" bgcolor="green">


            <td width="200">1</td>

            <td height="200">2</td>


        <tr height="100">

            <td bgcolor="red">3</td>

            <td align="right" valign="top">4</td>



td: if the width of a cell is set, the width of the whole column will be affected

td: if the height of a cell is set, the height of the whole row will be affected

Cell merge:

Consolidated line (kraspan) colspan="2"

Merge column (meat dead pan) rowspan="2"

Form from:

<!-- submit Submit to action Back end address input box input Must have name-->

    <!--  method="post" front end URL Do not display user information and password back-end resolution  = get front end URL Can see-->

    <!-- type="reset"  Reset -->

    <form action="" method="post">

        User information:<input type="text" placeholder="Please enter user information" name="username">


        password: <input type="password" placeholder="Please input a password" name="password">


        <input type="submit" value="Sign in">

        <!-- <input type="submit"  be equal to button type="submit" -->

        <input type="reset" value="Re-enter">

        <!--  <button type="reset">Re-enter</button> -->

        <input type="button" value="aaa"><!--Common buttons -->



Internal CSS: written in style tag

External CSS:

Recommended method (I)

Rel = "stylesheet" relationdefine associativity stylesheet style sheet < link rel = "stylesheet" type = "text / CSS" href = "1. CSS" >

Mode 2 import import

<style type="text/css">

        @import url(../css/02-css.css);


Inline inline embedding: directly add the style attribute on the label and the style attribute you want to use

CSS priority:

Inline > internal > external -- >

Priority display in line

Attention:! If important , is added to someone, the priority will be higher than vip

/*The selector has the principle of proximity*/

/* ! Heaviest*/

/*Last line style*/

/*Then inline style*/

/*Weight. id#>class.> Label element #i > i>div */

/*In case of conflict: different style settings, the style of high weight selector covers the low / * selector with the same weight. The style follows the proximity principle. The last definition is taken


CSS selector


            /* Clears the default margin and fill values for all elements  */

            margin: 0;    /*Margin */

            padding: 0;   /*padding */


* wildcard all elements

Class selector in class style is dot '.'  

In id style, the id selector is' # '

/*Group selector * / div,p,h1 {} (comma separated)

Descendant selector, including selector div p{} (space separated)

. item > UL (>) son selector

 . item ul (space) descendant selector

Pseudo class selector:


        /* Initial state*/


            color: yellow;


        /* After visit */


            color: red;


        /* Hover over */


            color: blue;


        /* Click activate */


            color: green;



: hover , the most commonly used action effect of mouse hover

The order of pseudo class selectors must be: link--visited--hover--active

Wrong order sometimes the style of hyperlinks will fail

CSS text properties

  1. font size

Font size font size: default 16px design drawing common 12px font family setting font size: Arial;

Google browser default Microsoft YaHei

Multiple fonts are linked with commas in the middle. The first font is parsed first. If it is not parsed, the second font is parsed, and so on. It is the default Microsoft YaHei

  1. Colour

Color = red / RGB (0,0255) / #00ff00;

  1. Bold & slant

            100 Fine body   lighter Lighter

            400 normal   normal natural

            700 Bold    bold  bold

            900 Coarser   bolder More bold


            /* font-weight: 700; */


             italic  tilt

             oblique  More inclined

             normal normal


            font-style: oblique;

  1. Horizontal vertical center

text-align: center; How text is displayed {left, center, right

text-align: justify; /* For aligning multiline text at both ends*/

/* horizontally */

            /* Line height line height is used for single line text */

            line-height: 100px;

            text-align: center;

  1. Text spacing

Text spacing: word spacing and character spacing

letter-spacing: 20px; /* Word spacing * /

word-spacing: 10px; /* Character spacing * /

/*  word-spacing: -10px; Cross*/

  1. text-indent

text-indent: 2em; Indent the first line by 2 Chinese characters


  1. Text modification
 /* text-decoration: underline;  Underline*/

            /* text-decoration: line-through; Delete line */

            /* text-decoration: overline;  Upper scribe*/

            text-decoration: none;  /*No, usually set for a link*/

            text-decoration: underline line-through overline;/*Set multiple lines*/

  1. Transform case
 /* text-transform Case */

        /* capitalize Every word is capitalized */

        /* lowercase Convert all to lowercase */

        /* uppercase All uppercase */

        /* none Not set */


            /* text-transform: capitalize; */

            /* text-transform: lowercase; */

            text-transform: uppercase;  All uppercase


  1. Font
 font: italic bold 20px/2em Microsoft YaHei ;

            /* font: 20px/2em Song typeface; Font line height cannot be omitted */

Font text abbreviation is the abbreviation of font style font weight font size / line height font family

Font: italic 800 30px/80px "Arial"; The order cannot be changed. It works only when font size and fony family attributes are specified at the same time

CSS list properties

 list-style-position: inside; Default outside

/* list-style: none url(img/1.jpg) inside; */

/ * compound attribute writing method, regardless of position order*/

           list-style: none; /* Commonly used*/


        disc disc 

        circle Hollow circle

        square Solid square

        none Nothing


            list-style-type: circle;


        Custom settings picture


            /* list-style-image: url(img/1.jpg); */

CSS background properties

 /* background-color: yellow; */

background-color: rgb(255, 0, 0);

 background-color: rgba(0, 0, 0, 0.5); Transparency 0 ~ 1, translucency 0.5

 background-image: url(img/1.jpg);


            Default tile effect for small pictures

            repeat:   Default tile

            repeat-x:  x Axis tiling

            repeat-y:  y Axis tiling

            no-repeat: no-repeat 


            background-repeat: repeat-x;

            background-position: 10% 10%;


            1. 20px 20px

            2. 10% 10%

            3.left center right

              top center bottom


Large pictures will be cropped

 background-position:center center;

background-size: 100% 100%;

            Set the size of the picture

            1.400px 400px

            2.100% 100%

            3.cover: Overlay expands the image to be large enough so that the background image completely covers the background area

              Also, the line cannot be displayed in the background positioning area

            4. contain: Includes expanding the picture to its maximum size so that its width and height fully fit the content area.

              If there is not enough box, there may be blank space

Fixing and scrolling of background

/* background-attachment: scroll; Default value*/

background-attachment: fixed;/* Fixed*/

/*Note: once the fixing is opened. Without the box, he can't show it*/

/* margin: 0 auto; Center*/

/* margin: auto; */


Background attachment = "scroll / fixed"

Compound writing:

Compound writing:

            1.Separate with spaces

            2.The order can be changed

            3.You can take only one value and put it later to overwrite the previous value *****


        /* backgourd-size Property can only be used alone */

           /* background-color: yellow;

            background-image: url(img/1.jpg);

            background-repeat: no-repeat;

            background-position: center;

            background-attachment: fixed; */

            background: yellow url(img/1.jpg) no-repeat center fixed;

Padding inner margin

 /* Inner margin padding

            1 Four values, four directions are the same

            2 Two values, the same up and down, the same left and right

            3 Values, up, left and right, down

            4 Values, clockwise up, right, down, left

            Negative numbers are not supported


            /* padding: 30px; */

            padding: 20px 30px;

 1. Background color spread to inner margin

 2. Can I set a single direction?

padding - direction: top bottom left right to set a single direction

/* padding: 30px 0 0 0; */

            padding-top: 20px;

Border border:

 border:1px solid gray

          solid Solid line

          The background color can also spread to the border

Style solid solid double double solid dashed dotted dotted line



        border-width width

        border-style style

        border-color colour


Margin margin

Margin  margin

            1 Four values, four directions are the same

            2 Two values, the same up and down, the same left and right

            3 Values, up, left and right, down

            4 Values, clockwise up, right, down, left


            Center the screen? margin:0 auto; Horizontal center

            Background color does not spread

            Can I set a single direction?

            margin - Direction: top bottom left right To set a single direction

         Support negative numbers (useful)

Characteristic problems:

         1.Fraternity, two boxes, vertical outer margin and horizontal outer margin

           ----In the vertical direction, the outer margin is the maximum

           ----In the horizontal direction, the outer margins are merged

         2.Father son relationship, given the margin, but the effect on the father, how to solve it?



        1.Child margin top = = = parent padding top, pay attention to height calculation

        2.Set border for parent box

        3.Either father or son can add floating.

        4.overflow: hidden  BFC block


 /* padding-top: 100px; */

            /* border: 1px solid green transparent; */

            /* transparent transparent */


/ * convert the picture type, and there will be no gap between the picture and the text*/

    display: block;


CSS floating

Floating: if you can save, you can save

Float: the left element floats to the left, the right element floats to the right, and the none element does not float

Function of floating 1 Defines how other text in the web page appears around the element

Floating action 2 Is to let things stand horizontally

float: left;/* Float left * / float: right; Float right

Clear float:

 /* clear: left; Front left float not allowed*/

If the front is left, clear the left, and if the front is right, clear the right. The left and right floats in front of both can be cleared

/ * clear floating to solve height collapse*/

Four schemes

      1. Write dead fixed height

      2. clear: none /left /right/both

      3. A box is added after the current floating element, and the width and height are not set. clear:both

4. overflow:hidden , trigger bfc to calculate the height of floating elements. Commonly, trigger bfc to calculate the height of floating elements. We can't affect the outside

Overflow attribute:

/* overflow: visible; Show overflow default properties*/

/* overflow: hidden; Overflow content hidden text cutting} is also commonly used*/

/* overflow: scroll; Whether there is overflow or not, there will be a scroll bar*/

/* overflow: auto; Automatic, most commonly used this setting scroll bar*/

/* overflow: inherit; Inherit the effect of the parent node*/

Overflow-x: overflow of X axis} overflow-y: overflow of Y axis

Free space: white space

/ * nowrap text will not wrap until the < br / > tag is encountered (common)*/

/ * pre carriage return spaces will be retained without line breaks*/

/ * the pre wrap carriage return space will be retained and the line will wrap automatically*/

/ * pre line will leave carriage return for line feed, but the space will not display line feed*/

 <!-- < Pre > pre formatted text - leave whitespace tab, enter < / pre > -- >

Element type:

Block element:

Has the following properties

        display: block


p tags can put text, not fast level elements

Inline elements:

The padding margin of Span/b/em/strong/a and other inline elements supports the left and right margins, while the upper and lower margins do not

Inline block element:

img # input and other inline blocks padding margin are supported

Element conversion:

Inline, inline | block, block | line block inline block


Eliminate spacing between pictures and p Tags



            display: block;


Several methods of transforming inline elements into block elements




Hide display: none;

Locate attributes and attribute values

 position: relative;  

/ * relative positioning*/

position: absolute;   

/*absolute positioning*/

position: fixed;

/*Fixed positioning. Break away from the document flow and locate the current window of the browser position: fixed;  right: 0;  bottom: 200px;   */

 position: sticky;

/ * sticky positioning: sticky;   top: 0;*/

float: half detached, text wrapped

absolute: completely separated, no text wrapping effect level will appear

/ * the hierarchy must be positioned. Without positioning, the hierarchy does not work*/

The absolute positioning of the parent-child relationship. Set a negative value on the child box, and the parent box will be on the child box

The level of brotherhood is that the latecomers are superior

/*z-index: level: the higher the value, the higher the level, and the higher the display*/


Anchor function: jump to different areas of the page, using a link.

< a href = "# anchor name" >

Width height adaptation

Do not write or auto is adaptive width adaptive width:auto

Often applicable to:

Navigation bar | general bar layout

Highly adaptive

/ * minimum height. If there is not much content, it is this height. If there is much content, it will open automatically*/

  min-height: 500px;

Min height minimum height = = "common

Max height maximum height

Min width min width

Max width maximum width

Floating element parent height adaptation

/*====== The best solution is to insert an empty pseudo element========= */


            content: "";

            clear: both;

            display: block;

            width: 0;

            height: 0;

            /* visibility Visible: Hidden hidden; Visible set to hidden */

            visibility: hidden;


Pseudo element:

 /* Pseudo element: false. You have to rely on an element to live */


            font-size: 30px;

            color: red;



            /* font-size: 30px; */

            background-color: aqua;


        /* ::before  ::after Most commonly used */


            content: "aaaaaa";



            content: "bbbbbb";



         The pseudo class uses a colon ":"

         Pseudo elements use two colons':: '


Hidden differences

/* display: none; Non occupied hiding*/

/*Placeholder hidden * / visibility: hidden;

Window adaptation


            margin: 0;

            padding: 0;



            height: 100%;



            width: 100%;

            height: 100%;  }



<!--The one in the middle is called the edition center -->

    <!-- Full screen call bar -->

    <div class="top"></div>

    <div class="middle">

        <div class="left"></div>

        <div class="center"></div>

        <div class="right"></div>


    <div class="bottom"></div>


Advanced form - radio

 <!-- checked Property is selected by default -->

        <input type="radio" name="aaa" checked>Very satisfied

        <!-- <input type="radio" name="aaa" checked="checked">Very satisfied -->

<        input type="radio" name="six" id="man">

            <!-- label Explain the meaning of the label for For whom -->

            <label for="man">male</label>

Check box

<!-- checked Default option value -->

            <input type="checkbox" name="a" id="hj" checked>

            <label for="hj">drink</label>

File upload hidden

 <!-- Upload file -->

            <input type="file" name="" id="">

 <div>Picture button-Replace submit button( Input type="submit")</div>

        <form action="">

            <!-- Picture button -->

            <input type="image" src="./submit.jpg" >


<div>Hide button</div>


            <!-- hide -->

            <input type="hidden" name="" id="" value="The personal information brought to the back end is invisible to ordinary users">


<div>Disable disabled,read-only readonly</div>


            <button disabled>Disable</button>


            <input type="radio" disabled>dissatisfied

Pull down menu;

select drop-down menu, and the first value is selected by default for option

select supported properties

                1.size, display and process several options

                2.multiple, multiple choice, press shift or Ctrl

option supported properties

                1.value, which provides the value needed by the backend

                2.selected, default option

Text field

<h1>Multiline text input box---Text field</h1>

    <!-- cols=How many columns rows=How many lines only work for characters, not commonly used -->

    <!-- <textarea name="" id="" cols="30" rows="10"></textarea> -->


        placeholder :  Prompt text

        textarea default value: It is written inside the double label, so pay attention to the problem of spaces


    <textarea placeholder="Please enter your comments">Set in advance value</textarea>

 resize: horizontal;

            /* resize Resize,

                The default value is both directions

                none Can't move in either direction

                vertical Only the vertical size can be dragged

                horizontal Only the horizontal size can be dragged


Field set

<h1>Advanced form-Field set</h1>

    <!-- fieldset Gather, legend Legend, description  label Label, tag, called -->



        <input type="radio" name="sex" id="men">

        <label for="men">male</label>


        <input type="radio" name="sex" id="women">

        <label for="women">female</label>



Add semantic tags:

 <!-- Semantic tag crawlers like, colleagues understand -->


    <!-- section Middle part -->


        <!-- nav navigation bar -->


            <!-- figure It represents an independent label, which has no function. It is an ordinary label -->








        <!-- main Main part -->


            <!-- article Independent content unrelated to the top and bottom, similar to div -->

            <article class="article1">





            <!-- article Independent content unrelated to the top and bottom, similar to div -->

            <article class="article2">






        <!-- aside (Right) side-->



            <p> </p>





< audio SRC = "audio path" controls loop autoplay muted > < / audio >


controls the control bar appears

Loop: loop

Autoplay: autoplay

muted: Mute


Video video

<video src="./movie.mp4"  controls  loop  autoplay muted></video>

<video src="./movie.mp4" controls  loop poster="./poster.jpg"></video>

controls displays the control bar, loop loop, autoplay, and auto play,

muted mute

poster, width, height

Enhanced input

<!-- Color selection -->

   <form action="">

    Color selection:<input type="color"  name="color">


    Email:<input type="email" name="myemail" >


    url address(Full address):<input type="url" name="myurl" >


    <!-- tel It is meaningless for the mobile terminal to adapt to the computer terminal when the digital keyboard pops up -->

    Phone number:<input type="tel" name="mytel">


    Slider effect:  <input type="range" name="myrange" min="100" max="200"

    value="100" step="10">

    <!-- step Step length: increase or decrease by 10 for each sliding-->


    Number type: <input type="number" name="age"  min="0" max="10" value="4" step="2">


    Search: <input type="search">


    Date selection(To day): <input type="date" >

    Month selection: <input type="month">

    Weeks: <input type="week">

    <input type="datetime-local" name="datetime">

    <input type="submit" value="Submit">


List of options (data)

 <input type="text" list="mylist">

    <datalist id="mylist">

        <option value="mobile phone"></option>

        <option value="Wrist watch"></option>

        <option value="Bracelet"></option>

        <option value="Bracelet"></option>


Form properties enhancement

<form action="">


            <!-- autofocus Automatically get focus, the whole page can only have one -->

            user name:<input type="text" autofocus>



            <!-- required Required items cannot be empty. There can be more than one page

            multiple Multiple addresses are supported, separated by commas


            Email:<input type="email" name="email" required multiple>


        <input type="submit" >



Level selector

 /* Spaces are descendants selectors */

        /* Descendant selector (>) */


            border: 1px solid red;


        /*  + The first brother you meet after the current element  */

        /* .child+li{

            background-color: yellow;

        } */

         /*  ~ All sibling nodes behind the current element  */


attribute selectors

 /*Attribute selector [class,]  */


        background: yellow;



        background-color: rebeccapurple;



        background-color: yellow;


    /* = perfect match */

    /* input[type=email]{

        background: red;

    } */

    /* ~= Match on inclusion */


        background: red;



        Fuzzy matching:

        <p>class^=b Starting with this</p>

        <p>class$=b Ending with this</p>

        <p>class*=b Contains a character</p>


    <div class="box1">div-111</div>

    <div class="box2">div-222</div>


    <p class="p1">p-111</p>

    <p class="p2">p-222</p>



        <h1>Registration page</h1>

        user name:<input type="text" name="username"><br>

        password:<input type="password" name="password"><br>

        Age:<input type="number" name="age"><br>

        Email:<input type="email" >


Structure pseudo class:

 /* .box My last div child */

        .box div:last-child{

            margin-right: 0;


Find page elements through some structural relationship,

For example:

Match the first child of an element

Match the last child element of an element

Pseudo class

 /* ul li:first-child{   First child

            background-color: yellow;


        ul li:last-child{     The last child

            background-color: red;

        } */

        /* The number of any number */

        /* li:nth-child(2){

            background: blue;

        } */

        /* The number, even 2n / even; Odd 2n+1 / 2n-1 / odd */


            background: olive;


Only child

 /* :only-child Use less. For example, there is only one p in div */

        div p:only-child{

            background: red;



/* empty An independent empty selector cannot have a space in it */


            background-color: yellow;


Root selector

 /* :root  Match the root element of the document. In html, the root element is always html */


Target pseudo class selector


            background: yellow;


: target when div is selected, the background turns yellow


        div .content{

            display: none;


        div .content:target{

            display: block;


Click to select the div to display it, and other closed ones will not be displayed

Ul state pseudo class


        /*:enabled Non disabled state  */


            background: red;


        /* :disabled Disabled state */


            background: yellow;


        /* :focus Focus will match this selector */


            background: blue;



            /* Remove default style */

            appearance: none;

            width: 20px;

            height: 20px;

            border: 1px solid black ;


        /* :checked When the check box is applied, what happens when it is checked */


            background: red;



            background: yellow;

            color: rebeccapurple;



Negative selector

 /* li:not(:first-child){

            background: yellow;

        } */


            background: yellowgreen;



            height: 100px;

            width: 100px;



            background: rebeccapurple;



Shaded text



             /*  text-shadow Text shadow

             5px Horizontal displacement

            10px Vertical displacement

            1px Fuzzy degree

             red Shadow color


            /* text-shadow: 5px 10px 1px red; */

            /* You can add multiple shadows separated by commas */

            text-shadow: 0px -10px 1px red,0px 10px 1px yellow;


Box shadow

  /* box-shadow: -10px -10px 6px red,10px 10px 6px blue; */

            box-shadow: 10px 10px 6px blue inset;

            /* inset Inner shadow, without addition, is vulva shadow*/

Rounded border

  /*  Fillet border radius:

            px Or percentage;

            v1, The four corners are the same

            v1,v2,Upper left, lower right, lower left, upper right

            v1,v2,v3 Top left, bottom left, top right, bottom right

            v1,v2,v3,v4 Clockwise


              /* border-radius: 10px 50px; */

            border-top-left-radius :10px;

            border-top-right-radius: 30px;

            border-bottom-right-radius: 60px;

            border-bottom-right-radius: 90px;


 /* 30 horizontal and 60 vertical border radius: 30px / 60px;*/

            /* border-radius :30px/60px; */

            /* border-top-left-radius: 10px 20px 30px 40px /50px 60px 70px 80px; */

            border-radius: 50%;

            /* The fillet value is set so that more than half of the box is a circle */

 /* It's hard to handle the percentage of px without% in a rectangle*/

            border-radius: 30px;



            width: 100px;

            height: 50px;

            margin:  0 auto;

            background-color: green;

            border-radius: 50px 50px 0 0;




            width: 200px;

            height: 200px;

            background: green;

            margin: 0 auto;

            border-radius: 200px 0 0 0 ;


Font introduction

  /* Font introduction */

        @font-face {

            /* Font name */

            font-family: zhaizhai;

            /* src Import font */

            src: url(font/ygyxsziti2.0.ttf);


How to use: font family: zhizhai (the font name you choose);

Weird box model

/*Box sizing: the default option value of the content box of the label box model, whether it is added or not; * //* Weird box model: box size is always the size we set * / box sizing: border box;

Elastic box

display: flex;

<!-- Elastic box is a new layout method, especially suitable for mobile terminal layout -- >

 <!-- influence:

       1. Child elements are arranged horizontally by default

       2. In line elements become block level elements

       3. When there is only one element, margin:auto is automatically centered


Modify spindle direction

 display: flex; / * elastic box*/

  flex-direction: column-reverse; / * the spindle is arranged in reverse order*/

/*row, column,

Row reverse, column reverse*/

Main side axis alignment

/ * adjust the alignment direction of the spindle;

Flex start , flex end , center centered

Align both ends of space between and surround with space around distance*/

/*Align items: Flex end;

Flex start , flex end , center*/

Fold line

flex-wrap: wrap; / * line break*/

align-content: center;/* Controls the line spacing after folding*/

/*Controls the line spacing after folding

Flex start , flex end , center centered

Space around

Space between*/

Item alignment

The big box outside is called container, and the small box inside is called item

/*Align self , own alignment , above the default value of flex start

Under flex end

Center center

baseline is no different from flex start

stretch , support the whole side shaft , if it is not set, it will be extended by default*/

 align-self: flex-start;

Project adjustment order

/ * adjust the order. The default value of order is 0; order:0;

The larger the value, the more it goes to the back

The smaller the value, the more forward

Can be negative*/

Remaining width and height of the project

flex:1; / * fill up the remaining space * /

Mobile terminal

Display resolution on simulator

css pixel: independent pixel of the device,

Physical resolution: device pixels

2X, 3x relationship?? (usually 2x relationship)

Device pixel ratio (dpr) = physical pixels / CSS pixels

iphone6 # 1css pixels = = = 2 physical pixels

s5 1css pixels = = = 3 physical pixels.

        iphone3gs 320*480

        iphone4   640*960


Design draft:

          1.css pixel 375? Physical pixel? 750 (for clear pages)

2.1 copies (provided), multiple copies? (1 design draft)

To use more: (1) percentage, (2) elastic box layout (3) rem layout

It's best not to write dead width and height

Width and height of design draft ÷ 2 = = width and height of mobile phone end

Meta viewport???

 <!-- Mobile viewport meta name="viewport"

Content content=

Width = device width ideal width = device width

Initial scale = 1.0 scale ratio no scale

User scalable = no user is not allowed to zoom the display -- >

The mobile terminal must set the following statement

 <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

Common attributes of mobile terminal

/*  flex-shrink: 1; The default value is squeezed*/

/* flex-shrink: 0; It is not allowed to be squeezed*/

display: flex;/* Elastic Box * /

flex-wrap: wrap;/* Folding line in elastic box*/

align-content: flex-start;/* Adjust row spacing to 0 * /

overflow: auto;/* Content overflow auto add scroll bar*/

/ * Google browser kernel scroll bar customization} change the default behavior*/


            display: none;


Multi column layout

Multi column layout

            /* Number of columns displayed */

            column-count: 5;

            /* Adjust column spacing */


            /* Column border */

            column-rule:2px solid red;

            /* Uniform column height */

            /* column-fill: auto; */

            /* auto Fill up the parent box */


            /* Adjust column width */

            /* column-width: 500px; */



            column-span: all;

            text-align: center;

            /* all Across all columns */


Waterfall flow

  /* break-inside: avoid; No folding inside the box*/


Responsive layout





        @media screen  and (orientation:portrait){


                width: 33.333%;



        @media screen  and (orientation:landscape){


                width: 20%;



Em and rem

The difference between Em and rem

<!-- Font size: font size: common rem of design draft

Px, EM, REM dispute

    px: 50px

Em: relative unit, relative to the font size of the parent element. div width: 10em;

REM: relative unit, relative to the font size of the root element (html), div width: 10rem; -- >

rem layout

<!-- REM equal scale -- >


            font-size: 100px;/*html For rem calculation*/



            font-size: 16px;/*For the back font*/



            width: 7.5rem;

            height: 100px;

            background: yellow;




        // fontsize dynamic calculation


        // fontsize = css layout width / physical resolution of the current device * benchmark font size

        //Last size = current equipment / design draft size * benchmark font size


VW and VH

 <!-- VH and vw scaling units -- >


        vh view-height

100vh = = = height of viewport

        vw view-width

100vw = = = width of viewport

HTML font size JS code is dynamic.



VW conversion


            375px = 100vw

            1px =100/375vw 0.2667

            375 1vw == 3.75px

            414 1vw == 4.14px

            768 1vw == 7.68px


Difference between 100% and VW


When there is no scroll bar, 100vw = = 100%

With scroll bar

100vw includes scroll bar and window size

100% of the space left after removing the scroll bar is full


Gradual change

Linear gradient

/ * linear gradient

            1. Support multi-color gradient

            2. Support direction

                      to top, to left,to right,to bottom,

                      to top right,to bottom left......

            linear-gradient(to bottom,red,yellow,green);

            3. Support angle writing

                    ?? deg how many degrees



Radial Gradient



/* background: radial-gradient(red 0%,green 10%,blue 30%); */

/ * uneven transition setting percentage*/

            background: radial-gradient(red 50%,blue 50%);

 /* background:radial-gradient(ellipse,red,green); */

            /* background:radial-gradient(circle,red,green); */

            background:-moz-radial-gradient(60% 40%,farthest-corner,blue,green,yellow,black);

            /* This attribute is not supported by the browser. It needs to be prefixed

            Google plus webkit-

            Firefox plus moz-

            background:-moz-radial-gradient(60% 40%,closest-side,blue,green,yellow,black);

            closest-side Nearest

            farthest-side Farthest

            closest-corner Nearest angle

            farthest-corner Farthest angle




        Radial Gradient 

        radial-gradient(red,green);Default uniform distribution



Repeat gradient

/*Repeating - repeating*/

 /* background:repeating-linear-gradient(red,yellow 10%,green 20%); */

            background:repeating-radial-gradient(red,yellow 10%,green 20%);

               /* repeating- repeat */


Animation transition

Animation transition attributes

/ * write it on its own box and observe the value at any time; All observation value * / transition:all 2s linear 3s;

/ * transition time pill effect

all attribute

2S animation time

linear constant speed (default)

3s delay

Except display:none/block; The switch of cannot be applied and is not supported*/


Animation transition type


 /* The change of the first li when the mouse is placed on the ul */

        ul:hover li:nth-child(1){

            width: 600px;

            /* The monitoring attribute 2S linear changes at a constant speed (default value) */

            transition: all 2s linear;



           ul:hover li:nth-child(2){

            width: 600px;

            /* Listen, so attribute 2S ease slows down gradually */

            transition: all 2s ease;



           ul:hover li:nth-child(3){

            width: 600px;

            /* Monitor the attribute 2S to accelerate the change */

            transition: all 2s ease-in;



           ul:hover li:nth-child(4){

            width: 600px;

            /* Monitoring attribute 2S deceleration change */

            transition: all 2s ease-out;


        ul:hover li:nth-child(5){

            width: 600px;

            /* Listen, so attribute 2S increases first and then decelerates*/

            transition: all 2s ease-in-out;


        ul:hover li:nth-child(){

            width: 600px;

          /* Bezier curve website:

           Frame by frame animation: transition timing function: steps


            transition: all 2s cubic-bezier(.17,.67,.83,.67)


Animation transition single attribute

/ * animation listening attribute - multiple attributes are separated by spaces, or all can be written*/

            transition-property: height background;

/ * animation duration*/

            transition-duration: 2s;

/ * uniform change*/

            transition-timing-function: linear;

/ * delay*/

            transition-delay: 2s;

2D attribute transform

 <!-- Transform deformation is often used in animation -- >

2D translation


 /* translate displacement  

             translateX === X Axis horizontal movement

            translateY(100px) ===y Axis vertical movement

            Positive x right y down

            Negative x left y up

            Diagonal walk

            The first one: Transform: translatey (100px) translatex (100px);;

            The second: transform: translate(100px,100px); Simplified writing


2D zoom


 /*  scale/Die to want  

            Negative value is inverted image magnification transform: scale(-1.5);

            scale(1)The default value of 1 scale(1.5) zooms in from the center

            Support X-axis and y-axis to enlarge separately

            scaleX  scaleY


  /* Change the position of the center point

            center (Default) center

            left top Upper left

            left bottom Lower left

            left center

            right top

            right bottom

            right center


            transform-origin: left top;

2D rotation

  /* transform: rotate(50deg); */


            rotate(Rotation of body

                Positive clockwise

                Negative value counterclockwise

            50deg 50 deg = = degree (unit)

            transform: rotateX(50deg); Around the X axis

            transform: rotateY(50deg); Rotate around the Y axis

            transform: rotateZ(50deg);=====Center rotation


            /* transform-origin: left top; Change center point*/


Multi attribute

Displacement scaling

/*When translate displacement and scale are used together

It's better to move in front, so it's easy to use


Displacement rotation

/ * when translate displacement and rotate(45deg) rotation are used together

The displacement is in the front. That's easy to use



 transform: skew(30deg,30deg);

            /* transform: skewX(30deg); */


            skewX Positive value, drag the lower right corner and pull it to the right to form an included angle of 30 deg (degrees)

            skewX Negative value, drag the lower left corner and pull to the left to form an included angle of 30 deg (degrees)

            skewY Positive value, drag the lower right corner and pull it down to form an included angle of 30 deg (degrees)

            skewY Negative value, drag the lower left corner and pull it down to form an included angle of 30 deg (degrees)

            skew(x,y) Positive value, drag the lower right corner and pull to the lower right to form an included angle of 30 deg (degrees)



 transform: skewX(30deg);


Key frame




Keyframe animation attribute animation



            width: 200px;

            height: 200px;

            background: red;

            /* zhaizhairun Self declared animation name;

            2S Animation duration

             linear Uniform speed

            1s delayed

            3 Several animations are played back to infinite three times


            animation: zhaizhairun2 2s linear 1s infinite;


        /* First you need to declare the animation */

        /* @keyframes Key frame */

        @keyframes zhaizhairun1{

            /* Start state */


                width: 200px;

                height: 200px;

                background: red;


            /* End state */


                width: 400px;

                height: 600px;

                background: green;



        /* Percentage writing supports multiple states */

        @keyframes zhaizhairun2{


                width: 200px;

                height: 200px;

                background: red;



                width: 300px;

                height: 300px;

                background: yellow;



                width: 400px;

                height: 400px;

                background: blue;



                width: 400px;

                height: 500px;

                background: gray;



                width: 400px;

                height: 600px;

                background: green;




Keyframe animation single attribute

 /* Single attribute */

            animation-name: zhaizhairun1;

            animation-duration: 2s;

            animation-timing-function: linear;

            animation-delay: 1s;

            animation-iteration-count: infinite;

            /*animation-play-state: Running status: running by default */

            /* animation-play-state: paused;suspend */

            animation-play-state: running;

            /* Animation direction */

            animation-direction: alternate-reverse;


            normal normal

            reverse Reverse motion

            alternate Normal direction - alternate

            alternate-reverse Reverse direction - alternate operation




            animation-fill-mode: forwards;

            none Default no


            forwards Keep the state of the last frame

            backwards Keep the state of the initial first frame


Key frame animation rotation



            margin: 0;

            padding: 0;



            width: 640px;

            height: 300px;

            border: 5px solid gray;

            margin: 0 auto;

            overflow: hidden;


        .swiper-container img{

            width: 640px;

            height: 300px;



            float: left;



            display: flex;

            animation: swiperrun 8s linear infinite ;


        /* When the mouse moves in, it doesn't move */


            animation-play-state: paused;


        @keyframes swiperrun{


                transform: translateX(0);



                transform: translateX(-640px);



                transform: translateX(-640px);



                transform: translateX(-1280px);



                transform: translateX(-1280px);



                transform: translateX(-1920px);



                transform: translateX(-1920px);



                transform: translateX(-2560px);



                transform: translateX(-2560px);






    <div class="swiper-container">

        <div class="swiper-wrapper">

            <div class="swiper-slide"><img src="img/1.jpg" alt=""></div>

            <div class="swiper-slide"><img src="img/2.jpg" alt=""></div>

            <div class="swiper-slide"><img src="img/3.jpg" alt=""></div>

            <div class="swiper-slide"><img src="img/4.jpg" alt=""></div>


            <!-- In order to achieve seamless rotation, the last one is the same as the first one -->

            <div class="swiper-slide"><img src="img/1.jpg" alt=""></div>




frame-by-frame animation

  <!-- steps(Jump keyframes directly) ,

             animation: run 5s step-start;

            steps(1,start)====step-start Equivalent writing

            1 The previous frame and the next frame complete the transition in one step

            steps(10000,end) The larger the number, the more intermediate frames

            step-end=====steps(1,end)   Equivalent writing

            end Keep the current frame. If you can't see the last frame, the animation ends

            start Keep the next frame, do not see the first frame, and jump from the first frame to the last frame quickly



            linnear ,ease-in   -->

Compatibility query

 <!-- Check the compatibility through the website caniuse Com (can I use it)

Just enter the attribute


Animat animation library

The animation library can be directly introduced into the website for use

<link rel="stylesheet" href="">




3D translation



            width: 500px;

            height: 500px;

            border: 5px solid black;

            /* To make translateZ effective, you must have a 3D stage and depth of field */

            transform-style: preserve-3d ;

            /* flat: Default 2d stage */

            /* preserver-3d: 3d stage */

            position: relative;

            margin: 0 auto;

            /* perspective: 900px;  Depth of field 900px*/

            perspective: 900px;



            position: absolute;

            width: 200px;

            height: 200px;

            background: red;

            left: 50%;

            top: 50%;

            margin-left: -100px;

            margin-top: -100px;


            transition: all 5s;


        .box:hover .center{

            transform: translateZ(900px);





    <div class="box">

        <div class="center"></div>



3D rotation



            width: 500px;

            height: 500px;

            border: 5px solid black;

            display: flex;

            transform-style: preserve-3d;



            margin: auto;

            width: 200px;

            height: 200px;

            background: red;

            /* transform: rotate3d(x,y,z,How many degrees (deg); */

            transform: rotate3d(0,0,1,30deg);





    <!-- 3d rotate roate -->

    <div class="box">

        <div class="center"></div>


Zoom 3D




            width: 500px;

            height: 500px;

            border: 5px solid black;

            display: flex;

            transform-style: preserve-3d;

            /* Depth of field */

            perspective: 800px;



            margin: auto;

            width: 200px;

            height: 200px;

            background: red;

            /* transform: rotate3d(x,y,z,How many degrees (deg); */

            transform:scale3d(1,1,10) rotateX(45deg);


        /* scaleZ 3d zoom

                                   Must have

         transform-style: preserve-3d;   3D stage

        perspective: 800px;              Depth of field

         rotateX(45deg)                  And fit rotation or (fit displacement) suggest fit rotation

                                   To see the effect





    <!-- 3d rotate roate -->

    <div class="box">

        <div class="center"></div>



3D cube



            margin: 0;

            padding: 0;



            width: 600px;

            height: 600px;

            margin: 0 auto;

            border: 5px solid gray;

            transform-style: preserve-3d;

            position: relative;

            /* transform: rotateY(30deg); */

            animation: run 5s linear;


        @keyframes run{


                transform: rotateY(30deg) rotateX(30deg);



                transform: rotateY(300deg) rotateX(300deg);



                transform: rotateY(30deg) rotateX(30deg);



        .box div{

            width: 200px;

            height: 200px;

            position: absolute;

            left: 50%;

            top: 50%;

            margin-left: -100px;

            margin-top: -100px;

            line-height: 200px;

            text-align: center;

            font-size: 50px;

            color: white;


        .box div:nth-child(1){

            background: gray;

            transform: translateZ(100px);


        .box div:nth-child(2){

            background: cadetblue;

            transform: translateX(-100px) rotateY(-90deg);


        .box div:nth-child(3){

            background: purple;

            transform: translateY(-100px) rotateX(90deg);


        .box div:nth-child(4){

            background: green;

            transform: translateY(100px) rotateX(-90deg);


        .box div:nth-child(5){

            background: red;

            transform: translateX(100px) rotateY(90deg);


        .box div:nth-child(6){

            background: darkblue;

            transform: translateZ(-100px);






    <div class="box">









Grid layout












Grid layout

   /*  display: grid; Grid layout

             display: grid can be added to any label

             In addition, the in-line element becomes a block element



                display: grid; Block level grid

                display: inline-grid; Intra row block level grid



            In line block level: unlike block level, it can be arranged on one line


            display: grid;

Rows and columns

 display: grid;

            /* The first way Fixed value */

            /*Divide rows */

            /* grid-template-rows: 200px 200px 200px; */

            /* Partition columns */

            /* grid-template-columns: 200px 200px 200px; */

            /* The second way. percentage */

            /* grid-template-rows: 33.3% 33.3% 33.4%;

            grid-template-columns: 33.3% 33.3% 33.4%; */

            /* The third method: repeat function (repeat several times, the size of each) */

            /* grid-template-rows: repeat(3,33.33%);

            grid-template-columns: repeat(3,33.33%); */

            /* The fourth writing method: automatic filling writing method repeat auto fill */

            /* grid-template-rows: repeat(auto-fill,200px);

            grid-template-columns: repeat(auto-fill,33.33%); */

            /* The fifth writing method: fr fragment (like the usage of flex=1) occupies the rest */

            /* grid-template-rows: 1fr 2fr 1fr;

            grid-template-columns: 1fr 2fr 1fr; */

            /* In the sixth paragraph: minmax (minimum, maximum) */

            /* grid-template-rows: minmax(100px,200) 200px 100px;

            grid-template-columns: 200px 200px 200px; */

            /* The seventh writing method: auto automatically fills the remaining space and is adaptive */

            grid-template-rows: 100px auto 200px;

            grid-template-columns: 100px auto 200px; 


 /* grid-row-gap: 20px;

            grid-column-gap: 20px; */

            /* It's written in the new edition

            row-gap: 20px;

            column-gap: 20px; */

            /* grid-gap: 20px 20px;

            grid is omitted in the new version-

           Direct write gap: 20px 20px;


            gap: 20px 20px;




            width: 600px;

            height: 600px;

            border: 5px solid gray;

            display: grid;

            grid-template-rows: 1fr 1fr 1fr;

            grid-template-columns: 1fr 1fr 1fr;

            /* Setting area */

            grid-template-areas: 'a e e'

                                 'd e e'

                                 'g h i'



        /* .box div:nth-child(1){

             The first child is a

            grid-area: a;

        } */

        .box div:nth-child(5){

            grid-area: e;





    <div class="box">










 /* Change the default value of rows in the arrangement order direction */

            /* grid-auto-flow: column; column*/

            /* content Project area */

            /* horizontally */

            justify-content: center;

            /* Vertical center */

            align-content: center;

            /* Abbreviation: place content: Center; */

            /* items Content area in the project */

            /* justify-items: center;

            align-items: center; */

            /* Abbreviation  */

             place-items: center center ;

Project properties



            width: 600px;

            height: 600px;

            border: 5px solid gray;

            display: grid;

            grid-template-columns: 200px 200px 200px;

            grid-template-rows: 200px 200px 200px;


        /* .box div:nth-child(1){

            grid-column-start: 1;

            grid-column-end: 3;

        } */


        .box div:nth-child(2){

Cell grid to divide the area

            grid-column-start: 2;

            grid-column-end: 4;

            grid-row-start: 1;

            grid-row-end: 3;





    <div class="box">









Tags: Front-end html css

Posted by mustatin on Thu, 19 May 2022 01:27:55 +0300