Summary of some common techniques in front-end development

1. How to display the date on the right in the article title list:

Copy code

The code is as follows:

<p><span>2010-10-10</span>@Mr.ThinkThis is the title of the article</p>

Then define span to float right:

p span{float:right}
In fact, this method can be extended to many situations, which is a very practical way of writing;
2. According to web standards, there can only be one h1 tag on a page. Many people know this concept, but few actually do it.
3. The problem of overlapping blank margins: generally avoid it by adding transparent borders or 1px inner margins. Detailed explanation: https://www.jb51.net/css/28157.html
4. Max/min-width/height implementation in IE6, _width: expression(this.width >600 ? "600px" : true);, height is the same.
5.html/class/id, it is best to write them in lowercase, which is more rigorous (in line with xhtml standards);
6. It is not recommended to use the following code to be compatible with IE8:

<meta http-equiv="X-UA-Compatible" content="IE=7" />
If it is a non-short-term page, try to avoid using it, and the page should ensure backward compatibility as much as possible;
7. Empty div has a default height in IE (not in FF), you can remove the default height by defining: div { witdh:100%; background:#9c0; ling-height:0};
8. When using the table tag, you should make use of its own properties as much as possible to separate the structure and style to the maximum extent. Detailed explanation: https://www.jb51.net/css/28158.html
9. Make full use of the label tag in the form to improve the user experience; this is good for those small option boxes on the page and for people with disabilities to read the website. Details are the first step to user experience;
10.fieldset, legend tags, a little-known but very practical set of tags; it can clearly frame a group of elements, mainly used in forms;
11. The optgroup tag is a little-known one, but it is very helpful in improving the user experience of select forms. What does it do? It can group options when there are many options:

Copy code

The code is as follows:

<select id="selectId">
<optgroup label="GROUP ONE">
<option value="1">one select</option>
<option value="2">two select</option>
</optgroup>
<optgroup label="GROUP TWO">
<option value="3">three select</option>
<option value="4">four select</option>
</optgroup>
</select>

12. The form must have a name value. The name value is a label, different from the id. As far as I have found, if the name value is not defined, the form element cannot be obtained through document.formid in non-IE browsers. Please see the following code and comments:

Copy code

The code is as follows:

<html>
<head>
<script>
window.onload = function(){
alert(document.mrform.length); //All browsers will pop up the form element length
alert(document.thinkform.length); //Only IE will pop up the length of the form element
}
</script>
</head>
<body>
<form name="mrform" id="thinkform" action="#">
......
</form>
</body>
</html>

Source: http://mrthink.net/css-common-summary/

<<: Learn about CSS label display mode in one article

>>: IDEA uses the Docker plug-in (novice tutorial)

Based on JavaScript ES new features let and const keywords

CSS achieves the effect of rotating the outermost layer of a multi-layer nested structure while keeping other layers unchanged

Blog

Solutions to the failure and invalidity of opening nginx.pid

Summary of some common techniques in front-end development

Based on JavaScript ES new features let and const keywords

Vue+element+oss realizes front-end fragment upload and breakpoint resume

Docker swarm simple tutorial

Detailed explanation of mktemp, a basic Linux command

CSS achieves the effect of rotating the outermost layer of a multi-layer nested structure while keeping other layers unchanged

Solutions to the failure and invalidity of opening nginx.pid

A brief discussion on the pitfalls and solutions of the new features of MySQL 8.0 (summary)

Summary of MySQL stored procedure permission issues

How to view Docker container application logs

Detailed explanation of modifying the default style of external component Vant based on Vue cli development

Recommend

JavaScript implements page scrolling animation

How to install MySQL via SSH on a CentOS VPS

Binary Search Tree Algorithm Tutorial for JavaScript Beginners

HTML tag marquee realizes various scrolling effects (without JS control)

Node connects to MySQL and encapsulates its implementation code for adding, deleting, modifying and checking

Example code for setting hot links and coordinate values for web images

Node quickly builds the backend implementation steps

Perfect solution for vertical centering of form elements

The implementation principle of Vue router-view and router-link

How to Dockerize a Python Django Application

MySQL Basic Tutorial Part 1 MySQL5.7.18 Installation and Connection Tutorial

Detailed explanation of importing/exporting MySQL data in Docker container

Detailed explanation of how to use the canvas operation plugin fabric.js

Historical Linux image processing and repair solutions

A brief discussion on VUE uni-app's commonly used APIs