Front-end basic review

Front-end basic review

Familiar with ps

  • Menu Bar
  • toolbar
  • Information panel

To be good at work, you must first sharpen your tools-adjust the interface to your liking

  • Menu Bar
  • Window (commonly used)
  • Layer
  • information
  • character
  • tool
  • Options
  • history record

Commonly used shortcut keys

  • ctrl + N new
  • ctrl + O open
  • ctrl + r to open the vernier caliper

Introduction to common tools

"Lock" the original you

There is a small lock on the position of the layer, and the locked layer cannot be modified~ If you want to modify it, you must open the small lock first.

Tools

1. Text tool-do you want a text?

  • Can be used to add text to the page, combined with the character panel, can beautify the text better

** The added text will create a new layer

2. Mobile tool-come here if you have the ability

  • Can be used to move elements on the page

** Please note that you can only move the content on the selected layer, don t move it wrong~

3. Selection tool-no matter if you are round or square, I can enclose you

  • It can be used to measure the size of elements in the page, and it looks more convenient in combination with the information panel
  • It can also be used to select an area on the page and copy a new layer

4. Crop tool-super smaller, smaller and then smaller

  • Crop the size of the elements in the page

5. Color picker-guess what color this lipstick is?

  • Get the color of the element in the canvas

6. Paintbrush tool-the magic pen Ma Liang is me

  • Write and draw on the canvas

7. Eraser tool-I wipe me wipe me wipe

  • Wipe off all the unpleasant things on the canvas

8. Paint bucket tool-it's time to change the color

Common operations

Change the ps unit

  • Click on the top option window -> Editing Options -> Preferences -> Units and Rulers
  • Finally, the settings window will pop up, and you can change it

Select tool function

  • Used to measure the size of page elements, which can be queried in the information panel
  • Move the marquee: If you select the corresponding element by moving the marquee, you can't let go of the left mouse button, press the space and move the mouse to move

Zoom tool

  • Zoom in: ctrl+'+';
  • Zoom out: ctrl+'-';
  • Zoom: alt+mouse wheel
  • Through the zoom tool + selection tool we can capture the corresponding picture (be sure to select the corresponding layer) Advantages: when we create a new canvas, it will be automatically generated according to the size of the picture you copied

Hand tool

  • Shortcut key:'Spacebar' to move the canvas

reference line

-If the page is too large, we can use the reference line to perform auxiliary measurement. The reference line can be moved by half of the PX-when we are measuring, we use the marquee tool to select first, and then use the reference line

Change image size

  • The tool options at the top, select the image, and then adjust the size of the image, it is adjusted proportionally

Picture zoom

  • Image size adjustment: ctril+'+ or -'
  • Then use the cutting tool to cut

Cutting tool

  • Crop the picture, highlighting is the reserved part

Image cut operation

  • 1: Use the slicing tool to cut and retrieve the pictures you need,
  • 2: Then select the export option, hold down shift, and click the mouse to select the corresponding picture

Rasterized layer

  • If you want to cut a picture with a transparent background
  • 1Select the corresponding layer. Right click and select rasterize layer
  • 2ctrl+c copy
  • 3 Create the canvas ctrl+n and then paste ctrl+v

Html tags

  • html: Hypertext Markup Language, which is different from plain text in that it can play video and audio

Disadvantages of external css

  • Will increase the number of requests and time-consuming network operations!

border property

/* dotted dashed dot*/ /* border-style: dotted; */ /* dashed: dashed box*/ /* border-style: dashed; */ /* double: double solid line*/ border-style : double; border-color/width/style /*You can write multiple values, the specific position corresponding to each value is the same as that of margin and padding*/ Copy code

Development tips

  • When the border colors of adjacent elements are different, there will be bevels between the borders. The solution is to make one element nest the parent control, and make the border color of the parent control the same as the border color of the other element.

Pixel

  • It is the light emitting diode in the screen!

Border triangle

/*All the places where the borders intersect are slashes. We can use this feature to draw triangles*/ .sj { width : 0px ; height : 0px ; border : 100px solid #ccc ; border-color : transparent transparent yellow; margin : 0 auto; } Copy code

Fillet

by{ width : 100px ; height : 200px ; background-color : pink; /* respectively represent the x-axis and y-axis */ border-radius : 50px/40px ; /* represent the different four corners: upper left, upper right and lower left right Down*/ border-radius : 30px 20px 40px ; } Copy code

semicircle

box{ width : 200px ; height : 100px ; background-color : pink; border-radius : 100px 100px 0 0 ; } Copy code

sector

.sx { width : 0px ; height : 0px ; margin : 100px auto; border-top : 150px solid pink; border-left : 150px solid blue; border-bottom : 150px solid yellow; border-right : 150px solid red; border- radius : 150px ; border-bottom-color :transparent; border-left-color: transparent; border-right-color : transparent; } Copy code

Browser support css style situation

caniuse

background attribute

relative path

  • The specified drive letter or computer file depends on the standard of the reference object to be able to find the specified directory or path

Absolute path

  • The target file can be found in any drive letter or computer, no reference object is required as a standard

Property introduction

.box { width : 200px ; height : 200px ; border : 1px solid #999 ; margin : 100px auto; /* The width and height of the box are scaled as a percentage */ /* background-size:50% 40% */ background : url ( images/wy_07.jpg ) no-repeat left center/100% 50% ; /* You can control the background image to be fixed at the specified position relative to the browser*/ background-attachment : fixed; /* The position keyword can be followed by specific Value! */ /* background-position: left 20px top 40px; */ } Copy code

New styles for background in css3

  • The background image is displayed inside the border
<style> .container { width : 300px ; height : 300px ; border : 30px dotted greenyellow; padding : 10px ; margin : 0 auto; /* background-color: pink; */ background : pink url ( images/bg.jpg ) no-repeat; /* clip: the background color can be cropped, the origin cannot be */ /* background-clip: padding-box; */ /* is to change the position of the image tile*/ background-origin : padding-box; } </style> Copy code

Font compound style

/* Font-family must be placed at the end */ font : Normal 20px/100px "Arial" ; /* last line of text arrangement pattern */ text-align = left-Last : The justify; copy the code

Text attributes

  • Note: The pixels occupied by a space are about half of the set font size
font : 400 italic 18px/20px'Song Ti' ; letter-spacing : 10px ; /* forced line break *//* word-break: break-all; *//* text ellipsis*/ white-space : nowrap;//mandatory no wrap is used in Chinese body overflow : hidden; text-overflow : ellipsis; copy the code

iconfont

  1. First go to Ali vector icon library to download the required resources and introduce them into the project
  2. Note that the resource file should be in the same directory as font.css
  3. Include iconfont.css in the required html text

code show as below

<--Introduced css style--> <link rel="stylesheet" href=" font/iconfont .css "> <link rel="stylesheet" href="css/base .css "> <==Custom style==> .item ::before { position : absolute; left : 39px ; top : 36px ; font : normal 32px/36px "iconfont" ; color : #26b9ff ; content : "\e6e7" ; } Copy code

Visible width

  • border+content+padding

Occupation width

  • margin+content+padding+border

Box shadow

.box { width : 200px ; height : 200px ; margin : 100px auto; background-color : pink; /* horizontal coordinate vertical coordinate blur distance diffusion radius*/ box-shadow : 10px 10px 5px 2px #333 ; } /* The first value: the offset of the x-axis, the second value of the y-axis offset, the third value: the blur radius, the fourth value: the diffusion radius (usually 0), the fifth value: the shadow color*/ /* The default shadow is on the outside, inset means multiple shadows are separated by commas inside */ box-shadow : inset 4px 4px 3px 0px #ccc ; Copy code

Weird box model

  • When padding+border>width of the box, the visual width of the box depends on the former

Infrequently used labels

<!-- subscript--> 2 < sub > 3 </sub > <!-- superscript--> 2 < sup > 3 </sup > How many squares of ****2 Copy code

Time stamp

Day < Time > 9:00 </Time > go to work copy the code

Mark label

Work today, < Mark > 6:00 eat on time </Mark > Copy the code

List style

ul { list-style-type : square; list-style-position : outside; list-style-image : url ( img ); } < ul > < li > 1 </li > < li > 2 </li > < li > 3 </li > < li > 4 </li > </ul > <!-- type ordered list style, start from which number --> < ol type=" I "start=" 3 "> < li > 1 </li > < li > 2 </li > < li > 3 </li > < li > 4 </li > < li > 5 </li > </ol > Copy code

Handling the left and right spacing of text

wordspacing: 8pxCopy code

a tag function

< A the href = "http://www.baidu.com" > Baidu </A > < A the href = "http://www.jd.com" target = "_self" > jingdong </A > < A the href = "http://www.tianmao.com" > Lynx </A > <- call ->! < A href = "tel: 18,804,643,956" > call </A > ! <- Download - -> <a href = "images/bg.7z"> Download </A > <- Email ->! < A the href = "mailto: 657687600@qq.com" > mail </A > copy the code

Inline element

  • When the code wraps, there will be spaces. If you want to remove the spaces, you must set the font-size of its parent control: 0

vertical-align

.box { width : 200px ; height : calc ( 100px + 100px ); background-color : pink; margin : 100px auto; text-align : center; font-size : 0 ; } /* vertical-align: It is to make two child elements in the same parent control be relatively vertically centered*/ .left { display : inline-block; width : 0px ; height : 200px ; background-color : #fff ; vertical-align : middle ; } .right { display : inline-block; width : 50px ; height : 50px ; background-color : #333 ; vertical-align : middle; } < div class="box"> < A the href = "#" class = " left "> </A > < A the href = "#" class = " right "> </A > </div > copy code

Use table-cell to center the child controls horizontally left and right

.box { display : table-cell; width : 200px ; height : calc ( 100px + 100px ); background-color : pink; vertical-align : middle; } .right { display : block; width : 50px ; height : 50px ; background-color : #333 ; margin : 0 auto; } Copy code

Floating theory

  • The floating part is out of the document flow and belongs to the same level as the text

Document flow

  • Popular understanding is the location of the code in the document where the element is located!

Rendering rules

  • bfc: block-level formatting context, all elements are arranged according to the document flow

Clear float

.clearfix { /* Compatible with ie6 to trigger haslayout (bfc in ie) */ *zoom: 1 ; } .clearfix ::after { display : block; /* Compatible with lower version browsers such as ie6*/ /* display: table; */ height : 0 ; content : '' ; visibility : hidden; clear : both; } Copy code

table style

table { width : 500px ; border-spacing : 0 ; border-collapse : collapse; text-align : center; margin : 100px auto; } td , th { border : 1px solid #333 ; } tr { height : 30px ; } Copy code

Vertical centering of text and images

.father { display : table-cell; /* If the child element is a block element, we directly add vertical-align: middle;*/ vertical-align : middle; } .son { /* If the child element is an inline element, we need to add vertical-align: middle; */ vertical-align : middle; } //Vertical-align = left : block element is not valid, only inline elements block elements and inline valid copy the code

Adjacent selector

<style> input { display : none; outline : none; } span { display : inline-block; width : 20px ; height : 20px ; border-radius : 20px ; border : 2px solid #fff ; box-shadow : 0 0 0 2px #666 ; } input :checked ~ span { background-color :pink; } </style> </head> < body > < label > < input type="checkbox" name="sex" id="man"> < span ></span > </label > </body > Copy code

Gradient

<!DOCTYPE html > < html lang="en"> <head> <meta charset="UTF- 8 "> <meta name="viewport" content =" width =device- width , initial -scale= 1.0 "> <title>Advanced Gradient</title> <style> .box { width : 400px ; height : 200px ; margin : 100px ; /* 20% The gradient starts at 20% relative to the parent container and ends at 40% relative to the parent container (percentage units can also be replaced by pixels) */ /* background: linear-gradient(to right top,pink 0%,grey 40%); */ /* Colors have overlapping areas and no gradient will occur*/ /* background: linear-gradient(to right, pink 30%,grey 10%); */ /* If you make a linear gradient according to the angle, the positive angle is clockwise, and the negative angle is counterclockwise*/ /* background: linear-gradient(45deg,pink,grey); */ /* Set the width of the gradient color separately, the gradient will not occur if the critical point is overlapped */ background : repeating-linear-gradient (pink 0px , pink 40px,grey 40px ,grey 80px ); } </style> </head> < body > < div class="box"></div > </body > </html > Copy code

Square dotted line case

<!DOCTYPE html > < html lang="en"> <head> <meta charset="UTF- 8 "> <meta name="viewport" content =" width =device- width , initial -scale= 1.0 "> <title>Square dotted line</title> <style> /* Method 1*/ /* With background overlay, the background gradient in the front will cover the background gradient in the back*/ /* .box{ width: 400px; height: 200px; margin: 0 auto; background: linear-gradient(white 190px,transparent 190px), repeating-linear-gradient( to right, black 0px, black 10px, transparent 10px, transparent 20px ); } */ /* Method two directly modify the height of the box*/ .box { width : 400px ; height : 10px ; margin : 0 auto; background : repeating-linear-gradient ( to right, black 0px , black 10px , transparent 10px , transparent 20px ); } </style> </head> < body > < div class="box"></div > </body > </html > Copy code

Envelope line

<!DOCTYPE html > < html lang="en"> <head> <meta charset="UTF- 8 "> <meta name="viewport" content =" width =device- width , initial -scale= 1.0 "> <title>Envelope line</title> <style> .letter { width : 400px ; height : 600px ; margin : 100px auto; border : 5px solid transparent; /* In the case of padding-box parsing, the background white only covers the content and padding area, excluding the border*/ background : linear-gradient ( #fff , #fff ) padding-box, repeating-linear-gradient ( - 45deg , blue 0px , blue 10px , transparent 10px , transparent 20px , red 20px , red 30px , transparent 30px , transparent 40px ); } </style> </head> < body > < div class="letter"></div > </body > </html > Copy code

Radial gradient

<!DOCTYPE html > < html lang="en"> <head> <meta charset="UTF- 8 "> <meta name="viewport" content =" width =device- width , initial -scale= 1.0 "> <title>Radial gradient</title> <style> .box { width : 600px ; height : 400px ; margin : 100px auto; /*The default two colors are equally distributed*/ /* background: radial-gradient(purple,pink); */ /* The radius from the center point to the horizontal is The starting gradient of 20 pixels, the vertical radius will be calculated according to the default gradient shape */ /* background: radial-gradient(purple 0px,pink 20px); */ /* When the starting color is greater than or equal to the gradient color , No gradient will occur, and the final color will fill the rest of the container*/ /* background: radial-gradient(purple 100px,pink 20px); */ /* You can set the gradient shape to circle*/ /* background: radial -gradient(circle,purple 20px,pink 20px); */ /* You can set the horizontal radius, and the vertical radius. When the initial color radius is set larger than the horizontal radius, the set horizontal radius will not take effect*/ background :radial-gradient ( 200px 100px ,purple 300px ,pink 400px ); } </style> </head> < body > < div class="box"></div > </body > </html > Copy code

datalist (not commonly used)

< input type = "text" list = "dl" > <!-- datalist --> < datalist id = "dl" > < option > Jay Chou </option > < option > Andy Lau </option > < option > Wang Sicong </option > </datalist > copy code

Attribute selector

<style> /* input[type=text] { background-color: pink; } */ /* input[class^='r']{ background-color: yellow; } */ /* */ /* ~: The attribute must be one of the words, not containing letters*/ /* input[name~=uname] { background-color: skyblue; } */ /* The attribute ends with pwd*/ /*input[class$=pwd] { background-color: slateblue; } */ /* | If the attribute is data or starts with data-, if it is a class, there can only be one class, and multiple class names will not take effect*/ input [class|=data] { background-color : tomato; } </style> </head> Copy code

border-image

.box { width : 200px ; height : 200px ; margin : 100px auto; /* Applicable premise for border mutation, the border has a width and style is not none */ border : 20px solid; border-image-source : url ( images/border2. png ); /* Whether to re-evaluate the widened image. The default stretch of stretch repeat: The default is tiled but will not fill up. The round will be filled up*/ border-image-repeat : stretch repeat round; /* Cutting method*/ border- image-slice : 20% ; /*Conform to the style 20 means 20px */ border-image : url ( images/border2.png ) 20 repeat; /* The border spreads outward (increases) 10px */ border-image-outset : 10px ; } Copy code

Case exercise

.box { width : 400px ; height : 200px ; margin : 100px auto; border-top : 16px solid; border-bottom : 16px solid; /* y-axis unchanged and x-axis tile , You can t write all four borders. This won t work. */ border-image : url ( images/border_03.jpg ) 16 0 round; /* background: pink padding-box; */ /* The default crop will be up, down, left, and right The standard line in four directions is cut similar to the nine-square grid*/ /* border-image-slice: 20; */ /* repeat round strech */ /* border-image-repeat: repeat; */ /* border-image-width:20px; */ /* border-image-outset: 10px; */ } </style> </head> < body > < img src ="images/border2 .png "alt=""> < div class="box"></div > </body > </html > Copy code

Typesetting

.box { direction : rtl; /* parse the text from right to left */ unicode-bidi : bidi-override; } span { /* The text inside is still from left to right */ unicode-bidi : embed; } Copy code
< div > The weather is good today and I am in a good mood! </div > < div class = "box" > Today's weather is < span > good, and my mood </span > is also good! </div > copy code

transition

Motion curve

box { width : 300px ; height : 200px ; background-color : #666 ; margin : 100px auto; /* duration of transition*/ transition transition-duration : 1s ; /* transition properties: the properties to be changed*/ transition- property :height,width; /* Transition delay time*/ /* transition-delay: 1s; */ /* The speed curve of the animation: by default, first slow, then fast and then slow*/ /* transition-timing-function :; */ } Copy code

Case study

.container { position : relative; width : 400px ; height : 200px ; border : 2px solid #00f ; margin : 0 auto; } .icon { height : 50px ; width : 50px ; background-color : #333 ; position : absolute; left : 0 ; top : 0 ; transition : top 3s ,left 4s ; /* uniform speed*/ transition-timing-function : cubic -bezier (. 51 ,. 07 ,. 74 ,. 94 ); } /* Careful not to add icon hover, because at the time he was moving hover fail */ .container : hover .icon { left : 350px ; Top : 150px } Copy code

Animation

<style> .box { width : 300px ; height : 100px ; background-color : pink; animation : width-animation 3s alternate forwards ease-in-out; /* animation name*/ /* animation-name: name;*/ /* Animation motion curve*/ /* animation-timing-function: ease-in; */ /* Animation duration*/ /* animation-duration: 0s; */ /* Animation delay time*/ /* animation- delay: 1s; */ /* Specify the animation stay state before or after completion*/ /* animation-fill-mode:forwards; */ /* While the animation is in progress, you can pause the animation*/ /* animation-play- state: paused; */ } @keyframes width-animation { 0% { width : 200px ; } 25% { width : 350px ; } 50% { width : 400px ; } 75% { width : 450px ; } 100% { width : 500px ; } } .box :hover { animation-play-state : paused; } </style> Copy code

Less

  • To download the easyless plugin and restart VSCODE

Define variables

@w :200px; @url :'../images'; Copy code

less writing (nested)

body { margin : 0 ; .box { width : @w; height : 200px ; background-color : pink; background-image : url ( '@{url}/logo.png' ); background-repeat : no-repeat; margin : 100px auto; transition : 2s ; //&_ add naming to reduce excessive nesting &_content{ width : 300px ; } & :hover { width : 300px ; } //&_fonts { // display : inline-block; // font : 20px/200px'Microsoft Yahei ' ; // color : #fff ; // text-align : center; // height : 100% ; // width : 100% ; //} Copy code

Provide default values

.btn ( @color :#fff, @bgcolor :skyblue) { height : 20px ; width : 200px ; border-radius : 5px ; text-align : center; font : 18px/20px 'Microsoft yahei' ; //Mix with parameters color : @color; background-color :@bgcolor; } Copy code

Parameter passing

//Mixed wording of less (mixed without parameters) .regist { //When multiple parameters are passed, and we only want to change one of them, we can specify it directly .btn ( @bgcolor :red); } Copy code
//When a plurality of parameters on the same property, we can use instead of arguments abbreviate .border ( @ border-width : 5px, @style : Solid, @ border-Color : # 000) { border : @arguments; } Copy code

Support math operation

//Math can width : ceil ( 200.9 ) PX; Copy the code

inherit

.icon { width : 200px ; height : 200px ; } //Cannot use parameters .text : extend (.icon) { background-color: pink; } Copy code

Conditional judgment

when and
.top ( @w ) When (@w> 0 ) and (@w < 100 ) { width : @w; } .common { .top ( 200px ); } Copy code
when not
.top ( @w ) When Not (W = @ 100 ) { width : @w; } Copy code
when, (or)
.top ( @w ) When (@w> 10 ), (W @ < . 11 ) { } Copy code

cycle

.loop ( @n ) When (@n> 0 ) { .loop ( @n - . 1 ); .box @ {} {n- width : @ * n- 1px ; } } .loop ( 10 ); copy the code

Conform to style changes (merged)

//When you introduce the styles, there are the following composite styles, we can add and modify the following //If there is a requirement for the order, it cannot be used, he will only add the style to the back .fonts { font +_: 16px/32px "Microsoft Yahei " ; } .imp { .fonts ; font +_: "bolder" ; } Copy code

Style (additional)

//Append style .box { Box-Shadow +: 2px 3px 3px #ccc ; } .box_imp { .box ; Box-Shadow +: 3px 2px 5px # 333 ; } Copy code

Mapping

//mapping @color : { red: #348990 ; } .imp { background-color : @color[red]; } Copy code

Introduce external styles

@import url( clock.less ); Copy code

Avoid mutation

.font { font : ( 12/6rem ) ~'/' ( 30/12rem ); } Copy code

Sass

  • Download live sass compiler with Vscode

variable

$w : 25px ; .box { width : $w ; height : 90px ; } Copy code

mixing

//Create a mix @mixin base() { position : absolute; left : 0 ; top : 0 ; right : 0 ; bottom : 0 ; margin : auto; } //Use mixed.container { @include base(); } Copy code

if condition judgment

.box { width : $w ; @if 1 + 2 == 3 { background-color : pink; } } Copy code

for loop

//to is less than 6 @for $num from 1 to 6 { li :nth-child (#{$num}) { width : $num * 1px ; } } //through is less than or equal to @for $num from 1 through 5 { li :nth-child (#{$num}) { height : $num * 1px ; } } Copy code

each loop

@each $ var in . 1 , 2 , . 3 , . 4 , . 5 { //# parse the string variable representative of .name # { $ var } { width : $ var * 1px ; } } Copy code

while loop

$num : 0 ; @while $num < 10 { $num : $num + 1 ; .box #{ $num }{ width : $num * 1px ; } } Copy code

function

//Function definition @function add( $a , $b ){ @return $a + $b ; } //Use function. imp { width : add( 1 , 3 ) * 1px ; } Copy code

The concept of modules

//When you name a .css file starting with "_", it will not be compiled, you can treat it as a module and let other files use it copy code