current position:Home>Front end learning day 4 - CSS

Front end learning day 4 - CSS

2022-04-29 10:03:17lune_ one

Catalog

1.Emment grammar

1.1 Quickly generate HTML Structural grammar

1.2 Quickly generate CSS Pattern grammar (MAC no way )

1.3 Quick format code

 2.CSS The composite selector

2.1 What is a composite selector

2.2 Descendant selector ( important )

2.3 Child selectors ( important ) 

2.4 Union selector ( important )

 2.5 Pseudo class selector

2.6 Link class pseudo selector

2.7:focus Pseudo class selector

2.8 Composite selector summary

3.css Element display mode

3.1 What is the element display mode

3.3 A block element

 3.2 Inline elements

 3.3 Inline block element

 3.4 Element display mode summary

3.5 Element display mode conversion

 3.6 Case study : Concise version of Xiaomi sidebar

3.7 A little trick Single line text vertically centered code  

 3.8 The principle of vertical centering of single line text

4.CSS The background of

4.1 The background color

 4.2 Background image

 4.3 Background tile

 4.4 Background location - Position NOUN

4.5 Background location case

 4.6 The background image is fixed ( The background is attached )

 4.7 Background composition

4.8 The background color is translucent  

 4.9 Background summary


1.Emment grammar

Emment The predecessor of grammar is Zen coding, It uses abbreviations , To improve the html/css The speed of writing ,Vscode The syntax has been integrated internally .

1.1 Quickly generate HTML Structural grammar

  • Generate tags Enter the tag name directly Press tab Press the key such as div then tab key , You can generate <div></div>

  • If you want to generate multiple identical tags add * That's all right. such as div*3 You can generate 3 individual div

  • If there's a parent-child label , It can be used > such as ul > li That's all right.

  • If there's a label for brotherhood , use + That's all right. such as div+p

  • If the generation has a class name or id Named , direct writing .demo perhaps #two tab Key will do

  • If generated div Class names are ordered , It can be used Self increasing symbols $

  • If you want to write content inside the generated tag, you can use { } Express

1.2 Quickly generate CSS Pattern grammar (MAC no way )

CSS Basically in short form

1. such as w200 Press tab Can generate width:200px;

2. such as lh26 Press tab Can generate line-height:26px;

1.3 Quick format code

Vscode Quick format code : shift+alt+f

You can also set When we Automatically format the code when saving the page :

1) file ------.>【 Preferences 】---------->【 Set up 】;

2) Search for emmet.include;

3) stay settings.json Under the 【 Workspace settings 】 Add the following statement to :

"editor.formatOnType": true,

"editor.formatOnSave": true,

You only need to set it once , in the future 2 Can automatically save formatting code .

MAC Upper operation mode :

1. Click on the bottom left corner Pinion

 2. choice Set up

 3. stay Search settings Box search format, choice stay sttings.json Editor in chief

 4. Complicate the following code to sttings.json in

"editor.formatOnType": true,

"editor.formatOnSave": true,

Click on command+s preservation , Set up the success , Press... When saving the code command+s Key or click save under the file to automatically format the code .

 2.CSS The composite selector

2.1 What is a composite selector

stay CSS in , Selectors can be divided into Foundation selector and compound selector , Composite selectors are built on basic selectors , A combination of basic selectors .

  • Composite selectors can be more accurate 、 More efficient selection of target elements ( label ).
  • A composite selector consists of two or more base selectors , It's made up of different ways .
  • Common composite selectors include : Descendant selector Child selectors Union selector Pseudo class selector wait

2.2 Descendant selector ( important )

Descendant selector Also known as Descendant Selectors , You can select the child element in the parent element . It's written by putting the outer label on the front , The inner label is written at the back , Space between . When tags are nested , The inner label becomes the offspring of the outer label .

grammar :

Elements 1 Elements 2 { Style statement }

The above syntax means Select element 1 All the elements in it 2( Progeny element )

for example :

ul li { Style statement }  /* choice ul Everything in it li Tag element */

  • Elements 1 And elements 2 Intermediate use Whitespace separated .
  • Elements 1 It's a parent , Elements 2 It's a child , The final choice is Elements 2.
  • Elements 2 It can be a son , Or grandchildren , As long as it's an element 1 The offspring of .
  • Elements 1 And elements 2 Can be any base selector .

Example :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <!-- The title of the document -->
  <style>
    /*  hold ol The little inside li Select and change to green */
    ol li{
        color:green;
    }
    ol li a{
      color: red;
    }
    .nav li a{
      color: yellow;
    }
    </style>
</head>

<body>
  <!-- The body of the document -->
      <ol>
        <li> I am a ol  The children of </li>
        <li> I am a ol  The children of </li>
        <li> I am a ol  The children of </li>
        <li><a href="#"> I am a ol  My grandson </a></li>
      </ol>
      <ul>
        <li> I am a ul  The children of </li>
        <li> I am a ul  The children of </li>
        <li> I am a ul  The children of </li>
      </ul>
      <ul class="nav">
        <li> I am a ul  The children of </li>
        <li> I am a ul  The children of </li>
        <li> I am a ul  The children of </li>
        <li><a href="#"> I am a ul  The children of </a></li>  
        <li><a href="#"> I am a ul  The children of </a></li>
        <li><a href="#"> I am a ul  The children of </a></li>
      </ul>

</body>
</html>

Realization effect :

2.3 Child selectors ( important ) 

Child Selector ( Child selectors ) You can only select as the nearest child element of an element . The simple understanding is to choose the son element .

  grammar :

Elements 1> Elements 2 { Style statement }

The above syntax means Select element 1 All direct descendants inside ( Subelement ) Elements 2.

for example :

div>p  { Style statement }  /* choice div All the nearest levels inside p Tag element */

  • Elements 1 And elements 2 Intermediate use More than no. separate  .
  • Elements 1 It's a parent , Elements 2 It's a child , The final choice is the element 2
  • Elements 2 It must be my own son , Its grandson 、 The great grandchildren and the like are not under his control .

Example :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <!-- The title of the document -->
  <style>
    .nav>a{
      color: yellowgreen;
    }
    </style>
</head>

<body>
  <!-- The body of the document -->
       <div class="nav">
         <a href="#"> I am a div Son </a>
         <p>
           <a href="#"> I am a div My grandson </a>
         </p>
       </div>
</body>
</html>

Realization effect :

2.4 Union selector ( important )

The union selector can select multiple sets of labels , Define the same style for them at the same time . Usually used for collective statements .

Union selector Yes, the selectors pass English comma (,) Connected , Any form of selector can be part of the union selector .

grammar :

Elements 1, Elements 2  { Style statement }

The above syntax means Select element 1 and Elements 2

for example :

ul,div {  Style statement  } /*  choice  ul  and  div  Tag element */
  • Elements 1 And elements 2 Intermediate use commas .
  • A comma can be interpreted as and It means .
  • Union selectors are often used for collective declarations .

Example :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>

  <style>
    /*   requirement 1: Please change Xiong DA and Xiong Er to pink  */
    /* div,
    p{
     color:pink;
   } */
    /*  requirement 2: Please change bear big and bear two to pink , And the pig family changed to pink  */
    div,
    p,
    .pig li {
      color: pink;
    }

    /*  Agreed grammatical norms , We combine selectors and like to write vertically  */
    /*  Be sure to pay attention to , The last selector   There is no need to add comma  */
  </style>
  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
  <div> Big bear </div>
  <p> Two bears </p>
  <span> Bald head strength </span>
  <ul class="pig">
    <li> Peppa Pig </li>
    <li> Pig Dad </li>
    <li> Mother pig </li>
  </ul>
</body>

</html>

Realization effect :

 2.5 Pseudo class selector

Pseudo class selector Used to add special effects to some selectors , For example, adding special effects to links , Or choose the first , The first n Elements .

The biggest feature of pseudo class selector writing is to use The colon (:) Express , such as :hover、:first-child.

Because there are a lot of pseudo class selectors , For example, there are link pseudo classes 、 Structure pseudo class and so on , Here we first explain the commonly used link pseudo class selector .

2.6 Link class pseudo selector

a:link       /* Select all links not visited */

a:visited  /* Select all links that have been visited */

a:hover   /* Select the link on which the mouse pointer is located */

a:active   /* Select the activity link ( Press the mouse on the link that doesn't pop up )*/

Precautions for linking pseudo class selectors :

1. To ensure effectiveness , Please follow LVHA Sequential declaration of :link-;visited-;hover-;active.

2. Mnemonics :LV Good! (HA)

3. because a Links have default styles in the browser , So in our actual work, we need to specify the style of the link separately .

Link pseudo class selector is written in actual work development :

/* a It's a tag selector All links */

a {

    color: gray;

    text-decoration: none;

}

/* :hover Link pseudo class selector Mouse over */

a:hover {

    color: red;/* When the mouse passes by , From the original gray Turned red */

    text-decoration: normal;

}

Example :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>

  <style>
    /* 1. Links not visited  a:link  Put what you haven't clicked ( Visited ) Select the link  */
    a:link {
      color: black;
      text-decoration: none;
    }

    /* 2.a:visited  Select the clicked ( Visited ) link */
    a:visited {
      color: orange;
      text-decoration: normal;
    }

    /* 3.a:hover  Select the one the mouse passes by  */
    a:hover {
      color: skyblue;
    }
     /* a:active  The mouse is pressing the link that has not been selected by the pop-up mouse  */
    a:active {
      color: green;
    }
  </style>
  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->

  <a href="#"> Peppa Pig </a>

</body>

</html>

2.7:focus Pseudo class selector

:focus Pseudo class selector Use to select the form element to get focus .

The focus is the cursor , General situation <input> Class form elements , So this selector is mainly for form elements .

input:focus {
      background-color: yellow;
}

2.8 Composite selector summary

Selectors effect features usage Separation symbols and usage
Descendant selector Used to select descendant elements Can be grandchildren More The sign is a space .nav a
Child selectors Select the most recent element Only my own son Less The sign is greater than .nav>p
Union selector Select some elements of the same style Can be used for collective statements More The sign is a comma .nav,.a
Link pseudo class selector Select links in different states Related to links More The point is to remember a{} and a:hoverhover The actual development of writing
:focus Selectors Select the form that gets the cursor Related to forms Less input:focus Remember this way of writing

3.css Element display mode

Understanding the display mode of elements can better let us layout the page .

1. What is the display mode of elements

2. Classification of element display patterns

3. Element display mode conversion

3.1 What is the element display mode

effect : There are lots of tags on Web pages , Different types of tags are used in different places , Understand their characteristics Can better layout our webpage .

The element display mode is Elements ( label ) How to display , such as <div> Own a line , For example, you can put more than one in a row <span>.

HTML The elements are generally divided into A block element and Inline elements Two types of .

3.3 A block element

Common block elements are <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> etc. , among <div> The label is The most typical block element

Characteristics of block level elements :

  1. More domineering , Own a line .
  2. Height 、 Width 、 Both the outer and inner margins can be controlled .
  3. The width is the container by default ( Parent width ) Of 100%.
  4.   It's a container and a box , It can release internal or block level elements .

Be careful :

  • Block level elements cannot be used inside elements of a text class .
  • <p> Labels are mainly used for storing words , therefore <p> You can't put block level elements in it , Especially not <div>.
  • Empathy ,<h1>~<h6> And so on are text class block level labels , You can't put other block level elements in it .

Example :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: aqua;
    }
  </style>
  
  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
  <div> More domineering , Own a line </div> You think I'm in the first line, but I'm in the second line 

</body>

</html>

Realization effect :

 3.2 Inline elements

Common inline elements are <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> etc. , among <span> label yes The most typical in-line elements . In some places, in line elements are also called Inline elements .

Characteristics of the elements in the line :

  1. Elements in adjacent lines are on one line , One line can display multiple .
  2. high 、 Wide direct setting is invalid .
  3. The default width is the width of its own content .
  4. Inline elements can only hold text or other inline elements .

Be careful :

  • No more links in the links
  • Special case Links <a> You can put block level elements in it , But to <a> It's safest to switch to block level mode

Example :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    span{
      width: 200px;
      height: 200px;
      background-color: aqua;
    }
  </style>
  
  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
 <span> Good teacher, good teacher, good teacher </span><strong> Zhejiang Library </strong>
 <span> Hello Teacher </span><strong> Zhejiang Library </strong>
</body>

</html>

Realization effect :

 3.3 Inline block element

There are several special tags in the line elements ——<img/>、<input/>、<td>, they It has the characteristics of both block elements and line elements , Some sources call them Inline block element .

Characteristics of block elements in the line :

  1. And the adjacent line elements ( Block in row ) On one line , But there will be gaps between them . One line can display multiple ( In line element features ).
  2. The default width is the width of its own content ( In line element features ).
  3. Height , Row height 、 Both the outer and inner margins can be controlled ( Block level element features ).

Example :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    input{
      width: 200px;
      height: 200px;
      
    }
  </style>
  
  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
 <input type="text">
 <input type="text">
</body>

</html>

Realization effect :

 3.4 Element display mode summary

Element pattern The arrangement of elements Set the style Default width contain
Block-level elements Only one block level element can be placed in a row You can set the width and height Container of 100% The container level can contain any label
Inline elements You can put multiple inline elements in a row You can't set the width and height directly The width of its own content Hold text or other inline elements
Inline block element Multiple inline block elements in a row You can set the width and height The width of its own content

3.5 Element display mode conversion

Under special circumstances , We need a transformation of the element pattern , Simple understanding : The elements of one pattern need the characteristics of another pattern , For example, if you want to add links <a> Trigger range of .

  • Convert to block element :display:block;
  • Convert to inline elements :display:inline;
  • Convert to inline block :diaplay:inline-block;

Example :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    a {
      width: 200px;
      height: 200px;
      background-color: aqua;
      /*  Put the elements in the line  a  Convert to block level elements  */
      display: block;
    }

    div {
      width: 300px;
      height: 120px;
      background-color: blue;
      /*  hold  div  Block-level elements   Convert to   Inline elements  */
      display: inline;
    }
    span{
      
    }
  </style>

  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
  <a href="#"> puppy </a>
  <a href="#"> puppy </a>
  <div> I'm a block level element </div>
  <div> I'm a block level element </div>
  <span> Inline elements are converted to inline block elements </span>
  <span> Inline elements are converted to inline block elements </span>
</body>

</html>

Realization effect :

 3.6 Case study : Concise version of Xiaomi sidebar

The core idea of the case is divided into two steps :

  1. Put the link a Convert to block level elements , In this way, the link can occupy a separate line , And have width and height .
  2. Mouse over a Set the background color for the link .

Example :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    /* 1. hold a Convert to block level elements  */
    a {
        /*  Put the elements in the line  a  Convert to block level elements  */
      display: block;
      width: 230px;
      height: 40px;
      background-color: #55585a;
      font-size:14px;
      color: #fff;
     text-decoration: none;
     text-indent: 2em;
    }
    /* 2. The mouse changes the background color through the link  */
a:hover{
  background-color: #ff6700;
}
   
  </style>

  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
  <a href="#"> mobile phone   phonecard </a>
  <a href="#"> TV   The box </a>
  <a href="#"> The notebook   Flat </a>
  <a href="#"> The notebook   Flat </a>
  <a href="#"> Travel   Wear </a>
  <a href="#"> intelligence   Router </a>
  <a href="#"> health   children </a>
  <a href="#"> The headset   sound </a>
</body>

</html>

Realization effect :

3.7 A little trick Single line text vertically centered code  

CSS There is no code for us to center the text vertically . Here we can use a little trick to achieve .

Solution : Make the line height of the text equal to the height of the box , You can center the text vertically in the current box .

height:40px;

line-height: 40px;

Example :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 40px;
      background-color: aquamarine;
      line-height: 40px;
    }
  </style>

  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
  <div> I want to center </div>
</body>

</html>

Realization effect :

 

Xiaomi is in the middle :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    /* 1. hold a Convert to block level elements  */
    a {
        /*  Put the elements in the line  a  Convert to block level elements  */
      display: block;
      width: 230px;
      height: 40px;
      background-color: #55585a;
      font-size:14px;
      color: #fff;
     text-decoration: none;
     text-indent: 2em;
     line-height: 40px;
    }
    /* 2. The mouse changes the background color through the link  */
a:hover{
  background-color: #ff6700;
}
   
  </style>

  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
  <a href="#"> mobile phone   phonecard </a>
  <a href="#"> TV   The box </a>
  <a href="#"> The notebook   Flat </a>
  <a href="#"> The notebook   Flat </a>
  <a href="#"> Travel   Wear </a>
  <a href="#"> intelligence   Router </a>
  <a href="#"> health   children </a>
  <a href="#"> The headset   sound </a>
</body>

</html>

  Realization effect :

 3.8 The principle of vertical centering of single line text

 

Simple explanation : The upper and lower spaces of the line height squeeze the text into the middle , If Row height < Box height , The text will go up , If Row height > Box height , be Text down . 

4.CSS The background of

adopt CSS Background properties , You can add background styles to page elements .

Background properties can be set The background color Background image Background tile Background image location The background image is fixed etc. .

4.1 The background color

background-color Attribute defines the background color of the element .

background-color: Color value ;

transparent transparent color

Example :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: #ff6700;
    }
  </style>

  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
  <div></div>
</body>

</html>

Realization effect :

 4.2 Background image

background-image Attribute describes the background image of the element . Actual development is common in logo Or some small decorative pictures or oversized background pictures , The advantage is that it is very easy to control the position ( Sprite diagram is also an application scenario )

background-image:none|url( Photo address )
Parameter values effect
none No background ( default )
url Use absolute or relative address to specify background image

Example :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      /*  Don't forget url */
      background-image:url(man.jpg);
    }
  </style>

  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
  <div></div>
</body>

</html>

Realization effect :

 4.3 Background tile

If you need to HTML Tile the background image on the page , have access to background-repeat attribute .

background-repeat:repeat|no-repeat|repeat-x|repeat-y
Parameter values effect
repeat The background image is tiled vertically and horizontally
no-repeat Background image is not tiled
repaet-x The background is tiled horizontally
repaet-y The background is tiled vertically

Example :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      /*  Don't forget url */
      background-image:url(man.jpg);
      /* 1. Background image is not tiled  */
      /* background-repeat: no-repeat; */
      /* 2. By default, background images are tiled  */
      /* background-repeat:repeat; */
      /* 3. The background picture is tiled horizontally  */
      /* background-repeat: repeat-x; */
       /* 4. The background picture is tiled vertically  */
       background-repeat: repeat-y;
       /*  Page elements can add either background colors or background pictures , It's just that the background image will be above the background color  */
       background-color: aqua;
    }
  </style>

  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
  <div></div>
</body>

</html>

Realization effect :

 

 4.4 Background location - Position NOUN

utilize background-position Property can change the position of the picture in the background .

background-position:x y;

Parameter means :x Coordinates and y coordinate . have access to Position NOUN perhaps Precise units

Parameter values explain
length percentage | A length value consisting of a floating-point number and a unit identifier
positiontop|center|bottom|left|center|right Position NOUN

 1. Parameter is a noun of position

  • If both values specified are positional nouns , Then the order of the two values is independent , such as left top and top left The effect is consistent .
  • If only one noun is specified , The other value is omitted , The second value is centered by default .

2. Parameters are precise units

  • If the parameter values are exact coordinates , So the first one must be x coordinate , The second one must be y coordinate .
  • If only one value is specified , That must be x coordinate , Another default is vertical center .

3. The parameters are mixed units

  • If the two specified values are a mixture of precise units and position nouns , Then the first value is x coordinate , The second value is y coordinate .

Example 1 Parameter is a noun of position :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      /*  Don't forget url */
      background-image:url(man.jpg);
      /* 1. Background image is not tiled  */
      background-repeat: no-repeat;
      /* 2. By default, background images are tiled  */
      /* background-repeat:repeat; */
      /* 3. The background picture is tiled horizontally  */
      /* background-repeat: repeat-x; */
       /* 4. The background picture is tiled vertically  */
       /* background-repeat: repeat-y; */
       /*  Page elements can add either background colors or background pictures , It's just that the background image will be above the background color  */
       background-color: aqua;
       /* background-position: ; Position NOUN  */
       /*  Center vertically to the top  */
       /* background-position: center top;  */
      /*  Vertical right center  */
      /*  If it's a location NOUN  right center  and center right The effect is equivalent   It has nothing to do with order */
       /* background-position:right center; */
       /*  here   The level must be aligned to the right   The second parameter is omitted  y  The axis is   Vertically centered  */
       /* background-position:right; */
        /*  here   The first parameter must be level top y Axis   Top alignment   The second parameter is omitted  y  The axis is   Vertically centered  */
        background-position: top;

    }
  </style>

  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
  <div></div>
</body>

</html>

Realization effect :

Example 2  Parameters are precise units

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: cadetblue;
      background-image: url(women.jpg);
      background-repeat: no-repeat;
      /* 20px 50px;x The shaft must be 20px,y The shaft must be 50px */
      background-position: 20px 50px;
    }
  </style>

  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
  <div></div>
</body>

</html>

Realization effect :

 

Example 3 The parameters are mixed units :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: cadetblue;
      background-image: url(women.jpg);
      background-repeat: no-repeat;
      /* 20px center; It must be x Shaft for 20,y The axis is center  Equivalent to  background-position: 20px;*/
      /* background-position: 20px center; */
      /* center 20px; It must be x Shaft for center,y The axis is 20px */
      background-position: center 20px;
    }
  </style>

  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
  <div></div>
</body>

</html>

Realization effect :

 

 

4.5 Background location case

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    h3{
      width: 118px;
      height: 40px;
      background-color: cadetblue;
      font-size: 14px;
      line-height: 40px;
      font-weight: 400;
      background-image: url(women.jpg);
      background-repeat: no-repeat;
      background-position: left center;
      text-indent: 1.5em;
    }
  </style>

  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
  <h3> Growth guardian platform </h3>
</body>

</html>

Realization effect :

 4.6 The background image is fixed ( The background is attached )

background- attachment Property to set whether the background image is fixed or scrolling with the rest of the page .

background- attachment The parallax scrolling effect can be produced later .

background-attachment:scroll|fixed

Parameters effect
scroll The background image scrolls with the content of the object
fixed The background image is fixed

Example :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    body{
      background-image: url(login.jpg);
      background-repeat: no-repeat;
      background-position: center top;
      /*  Fix the background picture  */
      background-attachment: fixed;
      color: #fff;
      font-size: 20px;
    }
  </style>

  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
</body>

</html>

Realization effect :

 4.7 Background composition

To simplify the code for background attributes , We can combine these attributes and abbreviate them in the same attribute background in . So as to save the amount of code .

When using shorthand properties , There is no specific writing order , It is generally agreed that the order is :

background: The background color Background image address Background tile Background image scrolling Background image location

background:transparent url(image.jpg) repaet-y fixed top ;

This is in actual development , We prefer to write . 

Example :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    body{
      /* background-image: url(login.jpg);
      background-repeat: no-repeat;
      background-position: center top;
      /*  Fix the background picture  */
      /* background-attachment: fixed; */ 
      background: black url(login.jpg) no-repeat fixed;
      color: #fff;
      font-size: 20px;
    }
  </style>

  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
  <p> Heavenly King Gedi tiger , Stewed chicken with mushroom </p>
</body>

</html>

Realization effect :

4.8 The background color is translucent  

CSS3 It provides us with the effect of translucent background color .

background:rgba(0,0,0,0.3);

  • r- Red corresponds to the first 0;g- Green corresponds to the second 0;b- Blue corresponds to the third 0.
  • The last parameter is alpha transparency , The value range is 0~1 Between .
  • We are used to putting 0.3 Of 0 Omit , Written as background:rgba(0,0,0,.3) ;
  • Be careful : The background is translucent 1 It refers to the translucent background of the box , The contents of the box are not affected .

Example :

<!DOCTYPE html>
<!-- Document type declaration , The function is to tell the browser to use that HTML Version to display the web page -->
<!-- The meaning of this sentence is : The current page takes HTML5 Version to display the web page -->
<html lang="en">
<!--lang Language types  en( English ) zh-CN( chinese )-->

<head>
  <!-- The head of the document -->
  <meta charset="UTF-8">
  <!-- Character set -->
  <!-- Define the page encoding format as  utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible yes IE8 And the above new settings , stay meta adopt X-UA-Compatible You can set the compatibility mode setting of the specified web page -->
  <!--IE=edge tell IE The browser uses the latest engine to render web pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- This tells the mobile device , Treat the viewport as having the same width as the physical width of the device .( Self regulation )-->
  <title>Document</title>
  <style>
    div{
      width: 300px;
      height: 300px;
      background: rgba(0,0,0,.5);
    }
  </style>

  <!-- The title of the document -->
</head>

<body>
  <!-- The body of the document -->
  
  <div> Hero alliance </div>
  
</body>

</html>

Realization effect :

 4.9 Background summary

attribute effect value
background-color The background color Predefined color values / Hexadecimal /RGB Code
background-image Background image url( Picture path )
background-repaet Whether to tile repaet/no-repaet/repaet-x/repaet-y
background-position Background location length/position Namely x and y coordinate
background-attachment The background is attached scroll( Background scrolling )/fixed( The background is fixed )
Brief background It's easier to write The background color Background image address Background tile Background scrolling Background location
The background color is translucent The background color is translucent background:rgba(0,0,0,.3); It has to be in the back 4 It's worth

Background image : Actual development is common in logo Or some small decorative pictures or oversized background pictures , The advantage is that it is very easy to control the position ( Sprite diagram is also an application scenario )

copyright notice
author[lune_ one],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204290820523688.html

Random recommended