Category:HTML/CSS

  • Set the default text for the search box to disappear when you click

    Time:2020-4-1

    Copy code The code is as follows: < input type = “text” name = “kword” value = “search by project name…” onfocus = “if (this. Value = = ‘search by project name…’) this. Value = ‘;” onblur = “if (this. Value = =’ ‘) this. Value =’ search by project name… ‘;” style = “color: […]

  • CSS3 implements footer fixed at the bottom (always at the bottom no matter how high the page is)

    Time:2020-4-1

    Preface Fix the footer area at the bottom, no matter how wide the page is, it will not change at the bottom, just like the menu on the mobile end. <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>document</title> <!– css –> <style> #demo{ position: fixed; left: 0px; bottom: 0px; width: 100%; height: 50px; background-color: #eee; […]

  • Interface for node express to process forms

    Time:2020-4-1

    Write a small interface and use postman to test whether the interface is feasible Chinese style import express from ‘express’ import config from ‘./config’ import router from ‘./router’ import queryString from ‘querystring’ const app = express() app.use(‘/node_modules’, express.static(config.node_modules_path)) app.use(‘/public’, express.static(config.public_path)) //Parsing and processing form post request body Middleware app.use((req, res, next) => { //Since the […]

  • CSS style with HTML tags centered in browser

    Time:2020-3-31

    CSS Style: Copy code The code is as follows: <style type=”text/css”> #login{ position:absolute; top:50%; left:50%; Margin left: – half width of label;Margin top: – label half height;} </style> HTML part: Copy code The code is as follows: <div></div >

  • A detailed explanation of the problems in the combination of CSS ellipsis and padding

    Time:2020-3-31

    Text truncation implemented by CSS Consider the following code to realize the style code of text exceeding automatic truncation: .truncate-text-4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } Test with the following HTML fragment: <style> .my-div { width: 300px; margin: 10px auto; background: #ddd; } </style> <div class=”my-div truncate-text-4″> How Not […]

  • How can nunjucks be used?

    Time:2020-3-31

    Basic use const nunjucks = require(‘nunjucks’) // nunjucks.configure({ autoescape: true }); // const result = nunjucks.renderString(‘Hello {{ username }}’, { username: ‘James’ }); // console.log(result) //The view relative path here is affected by the node execution path nunjucks.configure(‘views’, { autoescape: true }); // var result = nunjucks.render(‘index.html’, { foo: ‘bar’ }); var result = nunjucks.render(‘login.html’); […]

  • HTML page nesting use example (frameset use method)

    Time:2020-3-30

    Copy code The code is as follows: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>”><html xmlns=”<a href=”http://www.w3.org/1999/xhtml”>http://www.w3.org/1999/xhtml</a>”><head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />Nesting of frames in HTML</head><!–Framepacking = “2”: change the gap size between two windowsScrolling = “yes”: set whether there is a scroll bar in the corresponding frame label–><frameset rows=”10%,*” frameborder=”0″ framespacing=”10″>< frame SRC = […]

  • Introduction to SVG path tracing animation using CSS3

    Time:2020-3-30

    Do not rely on JavaScript, directly use pure CSS implementationsvgDraw the animation effect of the stroke, the effect shows the animation. Basic knowledge: There is an important attribute branch in SVGstroke, which is called “edge tracing” in Chinese software. The properties related to stroke are as follows: 1、 strokeIndicates the stroke color. The name of […]

  • Learning jsonp

    Time:2020-3-30

    jsonp I’ve learned it before, but I was quite ignorant at that time. I forgot all about it. This time, I should review jsonp once, A kind of This is to solve the cross domain problem of the client. The server can solve the cross domain problem simply by adding a request header const express […]

  • Example of setting and using HTML suspension framework (iframe loading HTML)

    Time:2020-3-30

    Copy code The code is as follows: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>”><html xmlns=”<a href=”http://www.w3.org/1999/xhtml”>http://www.w3.org/1999/xhtml</a>”><head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />< title > setting of frame in HTML</head><!–Setting of suspension frame: no need to remove the body labelFormat: < iframe > </iframe>Property name property value descriptionHeight pixel /% absolute / relative heightWidth pixel /% […]

  • CSS implementation of Google material design text input box style (recommended)

    Time:2020-3-29

    Hello everyone, today I want to share with you how to use pure CSS to realize the style of Google material design text input box. Although we have many frameworks today that can help us implement these styles, we can enhance our ability to customize these framework components according to business needs in the future […]

  • NVM, NRM and yarn

    Time:2020-3-29

    nvm Node Version Management NVM list view all installed node versions NVM install version No. install the node of the specified version NVM use version number switches to the specified version number NVM proxy proxy address configuration proxy for download nrm(node registry manager) Download using Taobao’s cnpm image source: npm install –save express –registry=https://registry.npm.taobao.org First: […]