Day 12 H5 Box-shadow Gradient

What’s the difference between PC and mobile?

  • Events: There is a mouse on the PC, so there are events related to mouse click and mouse slide, but there is no mouse on the mobile terminal, there are events related to fingers, such as left and right slide.
  • Browser compatibility: PC need to consider each browser compatibility issues (each browser kernel is different, so there will be differences), but the mobile end don’t need to consider each browser compatibility problems, its kernel and Google is consistent, the mobile end need to be considered adaptation problems, models are different, sometimes also can appear compatibility problems.

The size of the design draft

  • The width of 640×1156 (single screen page) refer to iphone5 mobile phone resolution :320*2
  • 750×1334 width (single screen page) refer to iphone6 mobile phone resolution :375*2
  • The width of 1242×2208 (single screen page) is similar to the Phone6Plus? The phone’s resolution is 414*3

h5

New Labels

  • Head: the header
  • : at the bottom of the footer
  • Main content area: Main
  • Navigation: nav
  • Sidebar: value
  • Article: the article
  • Block (div) : section
  • Pictures: figure
  • Caption: Figcaption
  • Video: video
  • Audio: audio

New H5 form element

<! <input type="number"> <! <input type="search"> <! <input type="tel"> <! <input type="color" > <! <input type="range"> <! <input type="file"> <! <input type="date"> <! <input type="email">Copy the code

Css3 related content

Private prefix to be added for CSS3

  • Google: – its
  • Firefox: – moz
  • ie:-ms
  • O friends: -o

CSS 3 supplement

  • Border-radius also has four values, also in clockwise order
  • border-radius:50%; Rounded corners or that value is written as half the width (premise: width and height are the same)

box-shadow

  • First value: shadow horizontal offset
  • Second value: shadow vertical offset
  • Third value: shadow blur (distance of blur)
  • Fourth value: shadow size
  • The fifth value: color
  • Sixth value: default is outset inset outer shadow, write words inside shadow

The gradient

Linear Gradients

The default is top to bottom

.box{
  background:linear-gradient(red,green);
  background:-webkit-linear-gradient(red,green);
}
Copy the code

From one direction to another (left, right, bottom, top) The following example is from left to right

background:linear-gradient(left,red,green);
background:-webkit-linear-gradient(left,red,green); 
Copy the code

3, diagonal, two directions can be combined, for example, the bottom is from the upper left corner to the lower right corner

background:linear-gradient(left top,red,green);
background:-webkit-linear-gradient(left top,red,green);
Copy the code

4. It can also be an Angle

background:linear-gradient(90deg,red,green);
background:-webkit-linear-gradient(90deg,red,green);
Copy the code

Radial gradient: The default shape is ellipse and must have at least two color values.

Shape: ellipse (default), circle (circle)

.box{
        width:400px;
        height:600px;
        margin:0 auto;
        background:radial-gradient(circle,red,green);
        background:-webkit-gradient(circle,red,green);
    }
Copy the code

case

Small ball case

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> body{background:#000; } .progress{ width: 200px; height: 200px; background:-webkit-radial-gradient(rgb(24, 24, 237) 10%,rgb(21, 21, 218) 30%,rgb(23, 23, 153)); border-radius: 50%; box-shadow: 0px 0px 50px 0px rgb(3, 3, 63) inset; } </style> </head> <body> <div class="progress"> </div> </body> </html>Copy the code

The progress bar

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> body{background:#000; } .progress{ width:0px; height: 20px; margin:0 auto; background:-webkit-linear-gradient(left top, #b5e61d 0%, #b5e61d 25%, #fff200 25%, #fff200 50%, #b5e61d 50%, #b5e61d 75%, #fff200 75%, #fff200 100% ); background-size:10px 10px; Animation: Progress 1.5s Linear Infinite; position:absolute; } .progressOuter{ width:200px; height: 20px; background:#fff; margin:100px auto; position:relative; } @keyframes progress{ 0%{ width:0; background-position:0 0; } 100%{ width:100%; background-position:0px 100px; } } </style> </head> <body> <div class="progressOuter"> <div class="progress"></div> </div> </body> </html>Copy the code

ViewPort

When we do not add the viewport, the default width of the body is 980px, which is not the width of the mobile phone screen. If we want to display our page completely on the mobile phone screen, we will have to scale, so that the text inside will be hard to see. In order to avoid this situation, we usually add the viewport. Make the page width equal to the width of your phone’s screen.

The following code must be added when writing mobile: meta: VP + TAB

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, Minimum - scale = 1.0 ">Copy the code

Media queries

@Media can customize different style rules for different media types.

For example, you can set style rules for different media types (including monitors, portable devices, televisions, and so on). But these multimedia types are not supported friendly enough on many devices.

@ media not | only mediatype and (expressions) {CSS code... ; }Copy the code

The media type

Media Query Case 1

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title>Document</title> *{margin:0; padding:0; } .box{ width:200px; height:200px; background:green; } /* @media screen and (max-width:600px){. Box {background:pink; } } @media screen and (min-width:700px){ .box{ background:gold; }} @media screen and (min-width:300px) and (max-width:800){} </style> </head> <body> <div class="box"></div> </body> </ HTML >Copy the code

Media Query Case 2

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title>Document</title> *{margin:0; padding:0; } .box{ width:200px; height:200px; background:green; } @media screen and (max-width:768px){ .box{ background:pink; } } @media screen and (min-width:769px) and (max-width:1200px){ .box{ background:gold; } } @media screen and (min-width:1201px){ .box{ background:darkseagreen; } } </style> </head> <body> <! <div class="box"></div> </body> </ HTML >Copy the code

Media Query Case 3

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> *{margin:0; padding:0; } ul,ol{ list-style: none; }. Box > li {width: 12.5%; height:50px; text-align: center; line-height: 50px; border:1px solid lightgreen; float:left; box-sizing:border-box; } @media screen and */ @media screen and */ @media screen and (min - width: 1200 px) {. Box > li {width: 12.5%; } } @media screen and (min-width:900px) and (max-width:1199px){ .box>li{ width:25%; } } @media screen and (min-width:768px) and (max-width:899px){ .box>li{ width:50%; } } @media screen and (max-width:767px){ .box>li{ width:100%; } } </style> </head> <body> <ul class="box"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html>Copy the code