Task 1 draw background

1. base64 (in this way, the image will load faster, and each photo has its own unique base64 code)

   background-image: url(data:image/jpg;base64,code) When referencing background
   <img src="data:image/jpg;base64,code)Directly in body When referencing photos in

2. Controls the drawing area of the background image

   • Draw to element border box

   • Draw to element padding box

   • Draw to element content box only

3. Control element background (compound format, this order can be adjusted)

   background: color image repeat attachment position

Task 2 List

1. Controls the location of the list item tag (just the common point in front of the unordered list)

   list-style: outside | inside | none;
               The outside of the content is not inside the content
               (Default (outside)

2. Points to note in floating

   To keep the order unchanged, first set the parent < UL > float.

3. The style in front of the unordered list controls the list style type, and pictures can also act as

   list-style-type: decimal;
   list-style-image: url(img/1.png);
   Composite attribute settings type ,position ,image  (Order cannot be changed)

Task 3 form

1. Merge border collapse of table border

   border-collapse: collapse | separate;
                    merge        Not merge

2. Control table title position caption

   caption{
       caption-side: bottom | top;
   }
   ..
   <caption>I'm the title</caption>

3. Processing of empty cells

   empty-cells:hide;
   (Empty cells (not shown)

4. ·Control table layout algorithm

   table-layout: fixed;|auto
   fixed:The cell size is specified when there is no content. Even if the content overflows, it doesn't change.
   auto；The default value varies with the amount of content.

5. notes

   • The entire table has a margin. td no margin

   • The table is calculated when rendering, and the div is executed line by line according to the written style.

Task 4 Transform and transition (dynamic effect)

1. Move translate

2. Zoom in on scale

3. rotate

4. Tilt skew (deg)

   .img:hover{
               transform: translateX(5px);towards x Axis offset 5 pixels
               transform: translateY(-10px);towards y The axis is offset by 10 pixels in the negative direction
               transform: translate(15px,-15px);Compound( x，y)
               transform: scale(1.5,1);Enlarged compound writing( x,y)
               transform: rotate(360deg);x,y Didn't write, just rotated 360 degrees.
               transform: skew(60deg);  x,y Each tilted 60 degrees.
               transform: scale(1.5,1) rotate(360deg); Compound writing.
             }

Task 5 derivation selector

1. Combined selectors use commas to separate selectors, which can increase the effect at the same time

   .mydiv,#sapn1{
                   color: pink;
               }

2. Descendant Selectors

   .mydiv,#sapn1{
                   color: pink;
                }

3. Parent-child selector

   .mydiv>h1{
                   color: palevioletred;
           }
   Connecting parent and child element selectors
    Only a son can do it, not even a grandson

4. Sibling Combinators

   • Next to sibling selector (next to and same as parent) (use + connection)

     p+ul{
                     color: pink;
         }

   • General brother selector (close or not) (use ~ connection)

     p~ul{
                     color: pink;
         }

5. Selector juxtaposition (and relationship, two or more conditions must be met without any symbol division, and they must be met at the same time)

   div.first{
                    color；pink
          }

   Task 6 UI status pseudo class

   1. : enable available status

   2. : disable unavailable status

   3. : checked status

      input:enabled{                         input Label in( enable)Available
                    background-color: blue;
              }
      input[type="button"]:disabled{         input In label type in button stay disable(Not available)State
                   background-color: pink;
              }

Task 7 calculation of selector priority and weight

1. Thousand bit: if the attribute declared in < style >, this bit will get one point

2. Hundredth: the id selector is included in the selector, and one point is added to this bit

3. Ten bits: class selector, attribute selector and pseudo class selector. Add one point in this bit

4. Bits: including elements and pseudo elements, this bit will add one point

Task 8 notes

1. The outer contour does not occupy a position and does not count the width of the container

2. Remove the setting of the outer contour

   input:focus{
   outline:none
   }

3. In utf-8, English letters are usually 1 byte and Chinese characters are 3 bytes Very rare Chinese characters are 4 bytes