This is the 9th day of my participation in the August Wen Challenge.More challenges in August

Go read and study with questions

HTML5+CSS3+JavaScript Web front-end development case tutorial (MOOC version), learning Web front-end books found in wechat reading, chapter 7 began, yeah (^ – ^)V

Problem sets

7-1 What is the role of the dispIay attribute in CSS3?

  • Used to control layout.
  • Each label has a default display value, depending on the type of label.
  • The default is usually block or inline.
  • Tags with a value of block are usually called block tags (such as
    ,

    ,

    ), and tags with a value of inline are usually called inline tags (such as
    , ).

7-2 What are the fIoat attribute values? What are the meanings?

  • Left: indicates that the label floats to the left
  • Right: Indicates that the label floats to the right

7-3 Write code to add multiple morphing effects to an element (write only the key code to add morphing effects).

The image rotates as it moves:

img {padding: 30px; transition: 2s ease all; transform-origin: center; transform: translate(400px, 0) rotate(360deg); }Copy the code

7-4 What are the attributes used to set the transition effect, and what are their values?

Transition-property :(specifies to participate in the transition)

Syntax format: the transition – property: all | none | []

  • All: default value, indicating all CSS properties that can be transitioned.
  • None: Indicates that no transitional CSS properties are specified.
  • : represents the CSS property that specifies the transition. Multiple attribute values can be specified, separated by commas (,).

Transition-duration:

Transition-duration :[,]

Transition-delay:

Transition-delay :[,]

Transition-timing-function (specify transition animation type) :

Syntax format: transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out| cubicbezier(x1,y1,x2,y2)[,linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(x1,y1,x2,y2) ]

7-5 What function applies the transform property to scale?

scale

Grammar:

<style> selector {transform: property value; } </style>Copy the code

The value and meaning of the transform attribute:

other

Practice begins, copy the Demo, and then fix it yourself.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta < span style> p > img {width: 200px; float: right; margin: 0 0 1px 10px; } p {line-height: 30px; } .cont {width: 800px; height: 300px;; background: grey; } div > img {padding: 30px; transition: 2s ease all; Hover img {transform-origin: center; Rotate (400px, 0) rotate(360deg); /* Rotate (360deg) rotate(360deg); } /* Set the image to shift 400 pixels to the right and rotate 360 degrees */. Content {margin: 20px auto; width: 1000px; height: 500px; background: rgb(212, 168, 114); } .content > ul{ width: 1000px; height: 50px; background: #777; color: #fff; } .content > ul > li{ width: 200px; height:50px; overflow: hidden; The transition: 0.5 s ease height; float: left; line-height: 50px; text-align: center; list-style: none; font-size: 20px; position: relative; } .content > ul > li:hover{ background: #fff; Color: RGB (28178156); height:320px; } .content > ul > li:hover ul{display: block; } .content > ul > :first-child{ background: #eee; color: rgb(49, 94, 45)} .content > ul > :first-child:hover{ height: 50px; } .content > ul > :last-child:hover{ height: 300px; } .content > ul > li > ul{ display: none; list-style: none; color: #000; position: absolute; top: 50px; left: 0; font-size: 16px; } .content > ul > li > ul > li{ padding:0 20px; background: #fff; clear: both; color: #000; } .content > ul > li > ul > li:hover{ background: #a3c247; } </style> </head> <body> <p><img SRC ="demo5.jpg" /> The platform, which was officially launched in 2016, mainly provides learners with a large number of high-quality courses with a rigorous curriculum structure, and users can independently arrange their learning progress according to their own learning level. Our aim is to provide one-stop service for programming learners and cultivate their programming thinking. < / p > < div class = "cont" > < img SRC = "demo5. JPG" width = "200" > < / div > < div class = "content" > < ul > < li > home page < / li > < li > knowledge map < ul Class = "drop" > < li > IT high skills < / li > < li > civil service exam < / li > < li > computer secondary < / li > < li > one's deceased father grind API < / li > < / ul > < / li > < li > IT elite < ul class = "drop" > < li > front-end developer < / li > < li > Java development < / li > < li > test and maintenance < / li > < li > algorithm analysis < / li > < / ul > < / li > < / ul > < / div > < / body > < / HTML >Copy the code

Operation effect:

🌈 follow me ac~ ❤️

Public account: Ni K Ni K