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)

Detailed application of Vue dynamic form

Summary of some common techniques in front-end development

Detailed application of Vue dynamic form

SQL left join and right join principle and example analysis

Three networking methods and principles of VMware virtual machines (summary)

Analysis of the principle of Mybatis mapper dynamic proxy

The difference between Div and table in HTML (discussed in detail in all aspects)

Add unlimited fonts to your website with Google Web Fonts

Detailed example of installing FastDfs file server using docker compose

Detailed explanation of the use of grid properties in CSS

25 Examples of News-Style Website Design

VMWare Linux MySQL 5.7.13 installation and configuration tutorial

Recommend

Solve the problem after adding --subnet to Docker network Create

How to generate PDF and download it in Vue front-end

The problem of jquery.form.js denying access in IE and the input upload button must be actively clicked

Common tags in XHTML

Recommend a cool interactive website made by a front-end engineer

Detailed steps for using jib for docker deployment in Spring Cloud

Some questions about hyperlinks

Use of kubernetes YAML files

Detailed explanation of the conflict between flex layout and position:absolute/fixed

A few front-end practice summaries of Alipay's new homepage

Vue3 navigation bar component encapsulation implementation method

Comparison of 5 CSS scrolling ceiling implementation methods (performance upgrade version)

Common attacks on web front-ends and ways to prevent them

Solution to the problem that MySql always pops up the mySqlInstallerConsole window

Example of how to implement keepalived+nginx high availability