Category:HTML/CSS

  • Table adaptation and overflow of some of the settings explained in detail

    Time:2020-9-21

    1. Two properties of table reset: ① Border collapse: collapse; / * set merge border model for table*/ ② Border spacing: 0; / * sets the spacing between cells in the table to 0*/ code: <div class=”fz”> <div style=”width: 600px;” class=”bg-grey p10″> <table class=”bg-white”> <tr> < th > serial number < / th > < […]

  • How to calculate flex grow and flex shrink in flex layout

    Time:2020-9-21

    In CSSFlex (flexible layout)Can be very flexible control of the layout of the web page, which determinesFlexThe width / height of an item in a layout has three properties: flex-basis, flex-grow, flex-shrink. flex-basis Flex basis determines how much space the project occupies on the main axis, unless you use thebox-sizingOtherwise, it will set the size […]

  • How to align text boxes in multiple forms with HTML

    Time:2020-9-20

    The code of the form is as shown in the figure. The style sheet has not been added. The form is not aligned, so it is difficult to see. However, HTML does not provide the label or function of form alignment. HTML source code: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>massage-board</title> </head> <body> <form […]

  • What answers would the interviewer want to hear during the interview (about some Vue questions)

    Time:2020-9-19

    preface I’m just a front-end little white, because the company’s bosses are busy, the interview fell on me. When I first asked me to go, I refused in every way, because I still had self-knowledge, but other people really couldn’t get away from it. They joked that they would just follow your level and let […]

  • N kinds of methods to realize adaptive dividing line skillfully in CSS

    Time:2020-9-19

    Segmentation line is a common kind of design in web pages, such as Zhihu’s more answers The adaptation here means that the horizontal lines on both sides will be adaptive with the number of text and the width of the parent Secretly look at the realization of Zhihu, it is obviously covered with a white […]

  • Example code of input keyboard of license plate number province abbreviation in HTML

    Time:2020-9-19

    The principle is to write out a div of a key, and then automatically generate a keyboard according to the size of the screen The specific implementation code is as follows. <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no”> <script type=”text/javascript” src=”../js/jquery-2.1.4.js”></script> <style> /* *{ Font family: “bold type”; } */ .content{ […]

  • The principle of the distance between img Tags

    Time:2020-9-18

    Basic analysis of img tag in HTML5: four elements of img Tag Image: (1) SRC: image path (2)width: (3)height: (4)alt: The effect of alert is as follows When there is an error in the image, the function in ALT is used to represent the error content, which is convenient for the search engine to grab […]

  • How to make your HTML button itself centered

    Time:2020-9-18

    How to center your HTML button itself? This is a good way to find a way to set the center attribute in its parent tag, as follows: <html> <body> <center><button onClick=”myClick()”>hit me</button></center> <script> function myClick() { alert(“123″); } </script> </body> </html> Or: <html> <body> <div align=”center”><button onClick=”myClick()”>hit me</button></div> <script> function myClick() { alert(“123”); } </script> […]

  • CSS3 realizes the rectangle with missing corner, the rectangle with broken corner and the frame with missing corner

    Time:2020-9-17

    preface A few days ago, I happened to see the function of missing corner rectangle. My first thought in my head was to make a pseudo element with absolute positioning, where I need to block it, or I would like to talk to my UI brother. Suddenly, I thought of the book “CSS uncover secrets” […]

  • Three ways of HTML setting border

    Time:2020-9-17

    Three ways of HTML setting border border-width: 1px 2px 2px; border-style: solid dashed dotted; border-color:red green blue; /*Set the top, left, right and bottom border respectively*/ 1. Frame composition: border: 1px solid #fff Parameters: The first is the thickness of the border, 1 px The second is the border style solid solid dashed dotted dotted […]

  • JavaScript emulator case source code

    Time:2020-9-16

    design sketch index.html calc.css *{ margin:0px; padding:0px; } div{ width: 170px; } #div1{ top:60px; left: 100px; position: absolute; } input[type=”button”]{ width: 30px; margin-right: 5px; } input[type=”text”]{ width: 152px; text-align: right; background-color: #fff; border: 1px solid; padding-right: 5px; box-sizing: border-box; } input[type=”button”]:hover{ background-color: yellow; border: 1px solid; } calc.js function init(){ var num=document.getElementById(“num”); num.value=0; num.disabled=”disabled”; var […]

  • Image fragmentation loading function based on HTML code

    Time:2020-9-16

    Today, let’s implement an image fragmentation loading effect. The effect is as follows:   We implement it in three steps: Define HTML structure Split picture Write animation function Define HTML structure All you need is a canvas element. <html> <body> <canvas id=”myCanvas” width=”900″ height=”600″ style=”background-color: black;” ></canvas> </body> </html> Split picture In this example, we […]