Category:HTML/CSS

  • About ES6 tail call optimization

    Time:2021-10-27

    ES6 contains a special requirement in the field of performance. This is related to a specific form of optimization involving function calls: tail call optimization (TCO). Simply put, a tail call is a function call that appears at the “end” of another function. After this call, there is nothing else to do (except that the […]

  • Learn how to write neat and standard HTML tags

    Time:2021-10-27

    Good HTML codeIs the foundation of a beautiful website. When I teach others CSS, I always tell them first: good CSS only exists on the basis of good HTML tags. It’s like a house needs a solid foundation, right? Neat and semantic HTML tags have many advantages, but many websites still use unfriendly tag writing. […]

  • CSS implements various loading effects with parsing process

    Time:2021-10-27

    HTML <div class=”spinner”></div> CSS .spinner { width: 40px; height: 40px; background-color: #333; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes sk-rotateplane { 0% { transform: perspective(120px) […]

  • A text teaches you to play with CSS border (border)

    Time:2021-10-26

    Border style The border style property specifies what border to display. The border style property defines the style of the border Border style value code demonstration: <!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 > shuixiangmuyu blog < / Title > <style> p.none { border-style: none; } […]

  • Rel attribute of HTML link tag

    Time:2021-10-26

    < link > labelDefines the relationship between the current document and other documents in the web collection. The link element is an empty element that contains only attributes. This element can only exist in the head part, but it can appear any number of times. In HTML, the < link > tag has no end […]

  • contentEditable

    Time:2021-10-25

    function getDivContent(wrapper){ var textareaText = ”; for (var i = 0; i < wrapper.childNodes.length; i++) { if (wrapper.childNodes[i].nodeName !== ‘#text’) { if (wrapper.childNodes[i].innerHTML == ”) { textareaText += wrapper.childNodes[i].innerHTML } else { textareaText += wrapper.childNodes[i].innerText.replace(/\n$/,”) + ((i == wrapper.childNodes.length – 1|| wrapper.childNodes[i].innerText==’\n’) ? ” : ”) } } else { textareaText += wrapper.childNodes[i].nodeValue + ((i […]

  • Instructions for 6 unusual HTML tags

    Time:2021-10-25

    First: < abbr > or < acronym >These two signs are the same thing. They are mainly used for some English abbreviations. When you move the mouse over, you will find a small prompt to prompt the full name of the abbreviation. Here is an example: <ABBR title=”HyperText Markup Language”>HTML </ABBR> < abbr title = […]

  • CSS implementation tiktok text dithering effect example

    Time:2021-10-25

    The front-end students will blush because of some dynamic effects and design competition in daily development. The design hopes to be realized by code. The front-end should design a GIF diagram. Finally, no one will let anyone. The design has gone, leaving the front-end to work overtime alone CSS technology is a skill that the […]

  • Step by step Vue + element front-end application development (19) — integration of back-end query interface and Vue front-end

    Time:2021-10-24

    In the series of articles on the front-end application development of Vue + element step by step, the processing and implementation of various functions of the system are introduced earlier. This essay introduces the integration of front-end and back-end development from a main line. Let’s make a complete introduction from the processing of query interface […]

  • A text teaches you to play with CSS combo selectors

    Time:2021-10-24

    CSS combination selectors include the combination of various simple selectors. CSS3 contains four combinations: Descendant selector (space delimited) Child element selectors (separated by a greater than sign) Adjacent sibling selectors (separated by a plus sign) Normal sibling selectors (separated by dashes) 1. Descendant selector The descendant selector is used to select the descendant elements of […]

  • 30 tips for HTML coding

    Time:2021-10-24

    1. Be sure to close the HTML tag In the previous page source code, we often see such statements: <li>Some text here. <li>Some new text here. <li>You get the idea. Maybe we could tolerate such non closed HTML tags in the past, but in today’s standards, this is very undesirable and must be avoided 100%. […]

  • JS events – add and remove events

    Time:2021-10-23

    element.addEventListener(event, function, useCapture)   Method to add an event handle to the specified element.   Event: required. String specifying the event name.be careful:  For example, use “click” instead of “onclick”.   Function: trigger function   Usecapture: optional. Boolean value that specifies whether the event is executed during the capture or bubble phase. Possible values: True – the […]