Category:HTML/CSS

  • Implementing Form Submission without Refreshing Pages Based on HTML

    Time:2019-8-24

    Form submission without refresh page using Ajax is often used in projects. Some time ago, I learned several other methods of submitting forms without refreshing, mainly based on iframe framework. Now I’ll sort it out and share it with you.The first is:(html page) HTML CodeCopy content to clipboard <!DOCTYPE HTML>     <html lang=“en-US”>     <head>     <meta charset=“utf-8”>     […]

  • Implementation Code of CSS Warping Shadow

    Time:2019-8-24

    This paper introduces the implementation code of CSS warping shadow and shares it with you. Specifically as follows: Looking carefully, you can see that the two corners below each picture have different degrees of warping edges. The principle of implementation is similar to that of [CSS] curve shadow, which is also realized by pseudo-elements. HTML […]

  • Bottom-up and top-down methods for height control of CSS elements

    Time:2019-8-23

    Start with a common question: how to use CSS to set the height of an element to the height of the browser’s content window. Solution 1: Fill the screen with elemental height In css, VH is a special unit of length, and the value of 100vh is the height of the browser’s content window. thereforeheight:100vh;This […]

  • Use Semantic Tags to Write Your HTML Compatible IE6, 7, 8

    Time:2019-8-23

    HTML5 adds more semantic tags, such as header, footer, nav… Let’s not use the following method to lay out the page when we write it: XML/HTML CodeCopy content to clipboard <div class=“header”>This is the head.</div>   <div class=“content”>This is the middle content area.</div>   <div class=“footer”>This is the bottom.</div>     It can be laid out in this way: XML/HTML CodeCopy […]

  • Simple Analysis of Adding Monitoring Events to Equivalent Change of HTML Input

    Time:2019-8-22

    The effect to be achievedIn many cases, we will immediately monitor the changes in input box values, in order to make immediate actions to guide visitors to enhance the user experience of the site. For example, display the number of bytes that the input box has been inputted, or read the input value to boot […]

  • CSS input [type = file] style beautification (input upload file style)

    Time:2019-8-22

    Effect: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>Untitled Document </title> <style> /* Style 1*/ .a-upload { padding: 4px 10px; height: 20px; line-height: 20px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; display: inline-block; *display: inline; *zoom: 1 } .a-upload input { position: absolute; font-size: 100px; right: 0; […]

  • Tips on setting HTML table borders

    Time:2019-8-21

    For many new HTML learners, table < Table > is the most commonly used tag, but for the control of table borders, many beginners do not understand. Generally, when we use a table, we always give it a border attribute, such as < table border= “1”. The effect is as follows: For many new HTML […]

  • CSS3 column implementation of card waterfall flow layout example code

    Time:2019-8-21

    This paper introduces the example code of CSS3 column to realize the layout of card waterfall flow, and shares it with you as follows: Achieving results Today, we have the problem of realizing the waterfall flow layout of a card. The height of the card is different. Finally, we use the column attribute in CSS3 […]

  • Example Code for Implementing Background Transparent Text in CSS3

    Time:2019-8-20

    Recently, a requirement was met to display text with a translucent background on the picture. The effect is as follows: Demand. png When you see this requirement, the first response is to use opacity in CSS3 to set the transparency of elements. <!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” […]

  • Timing refresh or jump of pages based on Meta

    Time:2019-8-20

    Using meta to achieve regular page refresh or jump XML/HTML CodeCopy content to clipboard <meta http-equiv=“refresh” content=“5”>      This means that the current page is brushed every five seconds.~ XML/HTML CodeCopy content to clipboard <meta http-equiv=“refresh” content=“2; url=’/’”>    This means that the current page jumps to the home page in 2 seconds~  XML/HTML CodeCopy content to clipboard <meta http-equiv=“refresh” content=“0; url=’http://www.qq.com/’”>    Page jumps directly […]

  • Discussion on Dimension Unit in CSS

    Time:2019-8-19

    The compatibility of browsers is getting better and better. The mobile terminal is basically a uniform webkit. It often uses different size/length units of css. Here is a collation. overview Absolute unit Px: Pixel pixels Pt: Points pounds Pc: Picas Paika In: Inches inches Mm: Millimeter mm Cm: Centimeter cm Q: Quarter millimeters 1/4 mm […]

  • Simple Analysis of the Quick Solution to the Automatic Line-changing of Table Header in Responsive Framework

    Time:2019-8-19

    Recently, when developing a website with bootstrap, when processing a table, we found that the style of viewing through PC is normal. When viewing on mobile phone, because the screen is small and the table is compressed badly, the table head and data distortion are as follows Later, I searched the Internet and found a […]