Front end learning CSS

One CSS CSS is the abbreviation of Cascading Style Sheets, which is used to control the display of web page data and separate the display of web page and data content. 2. Introduction mode (1) inline: set CSS style in style attribute of tag, not recommended. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

Posted on Mon, 06 Apr 2020 03:36:48 -0400 by wtg21.org

JavaScript DOM mouse drag

In front-end page interaction, mouse drag is a good experience function. To achieve mouse drag, we need to understand the mouse behavior coordinate system and many compatible writing methods involved. This paper introduces the acquisition of mouse position, the implementation of drag function and the encapsulation of drag function Mouse behav ...

Posted on Sun, 05 Apr 2020 10:08:53 -0400 by ctiberg

[003] adaptive block level elements horizontally centered

The horizontal centering methods described in the previous sections all require a fixed width of elements, but they can't help the block level elements that want to be adaptive. At this time, we can use the transformation property of CSS3 to achieve the effect. <!DOCTYPE html> <html lang="en"> <head> ...

Posted on Sat, 04 Apr 2020 08:55:15 -0400 by Vasudhevan

Upload and preview pictures, audio and video files

Recently, we are uploading pictures and audio-video. The stream plug-in is used for uploading, which is easy to use. But before uploading, we need to preview the uploaded pictures and audio-video to determine whether to delete some uploaded files. First, look at the code: Address of stream upload plug-in: http://www.t ...

Posted on Sat, 04 Apr 2020 08:25:37 -0400 by mamuni

Nange takes you to learn the separation of HTML CSS from document flow, positioning, transition and 2D deformation

Break away from document flow Document flow: 1. Left to right, top to top layout. 2. A layout that conforms to the meaning of the tag itself in html, for example, some tags have only one row. Some tags belong to inline elements, etc. Detach from document flow: Let the elements fly in the document stream, no longer ...

Posted on Fri, 03 Apr 2020 11:04:51 -0400 by Assorro

jQuery+bootstrap implementation beautification warning / confirmation / prompt dialog plug-in

Plug in use documentation and download address: http://craftpip.github.io/jquery-confirm/ Import files Because we implement it on BootStrap + jQuery, we need to 1. First, introduce the jQuery library, and then the two core files required by Bootstrap (css and js) 2. Then we introduce two core files later Jquery-confirm.min.js a ...

Posted on Fri, 03 Apr 2020 08:55:02 -0400 by AlexRodr

The influence of the definition order of HTML elements on the floating layout of one column fixed and one column fixed

Look at two layouts first: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #left ...

Posted on Thu, 02 Apr 2020 07:03:14 -0400 by lances

Learning Element.scrollIntoView of js

1,Element.scrollIntoView() This method allows the current element to scroll into the browser window's but area; 2. Syntax: element.scrollIntoView(); / / equivalent to element. Scrollintoview (true) element.scrollIntoView(alignToTop);//Boolean type parameter element.scrollIntoView(scrollIntoViewOptions);//Object type parameter parameter ...

Posted on Wed, 01 Apr 2020 23:57:23 -0400 by swissbeets

css - calculate all styles of elements through getComputedStyle()

javascript - computes all styles of elements javascript - computes all styles of elements getComputedStyle() Compatible with IE8 Summary In daily development, if you need to read the style style of html element or the attribute value of class style, you can use the new method getComputedStyle() in DOM2 level ...

Posted on Wed, 01 Apr 2020 12:00:25 -0400 by V34

tinyJquery based on ES6

Original address: Bougie's blog JQuery used to be a necessary tool for Web front-end. With the rise of MVVM framework, it has declined a little. But it's very convenient to operate dom. I wrote a simplified jQuery based on class with ES6, including the basic DOM operation, which supports chain operation and is only for ...

Posted on Tue, 31 Mar 2020 19:17:58 -0400 by Mortana