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 process of changing apt source to Alibaba Cloud source in Ubuntu 18.04

Summary of some common techniques in front-end development

Detailed process of changing apt source to Alibaba Cloud source in Ubuntu 18.04

How to display and format json data on html page

CSS list sliding to prevent being covered by the bottom and adapt to the longer screen model processing

Two solutions for Vue package upload server refresh 404 problem

Usage of Vue filters and timestamp conversion issues

Detailed explanation of Nginx configuration parameters in Chinese (load balancing and reverse proxy)

Detailed analysis of the MySQL slow log opening method and storage format

A simple way to call desktop exe programs on a web page

React gets input value and submits 2 methods examples

How to add configuration options to Discuz! Forum

Recommend

Description of meta viewport attribute in HTML web page

mysql5.7.21.zip installation tutorial

MySQL 8.0.17 installation and configuration graphic tutorial

Methods and steps for deploying multiple war packages in Tomcat

How to solve the background tiling and border breaking of CSS style div or li in IE6

React's transition from Class to Hooks

Share MySql8.0.19 installation pit record

MySQL data insertion optimization method concurrent_insert

Display ellipsis effect when table cell content exceeds (implementation code)

Let's learn about MySQL database

Introduction to JavaScript Number and Math Objects

Use of vuex namespace

Detailed tutorial on installing MySQL 8.0.20 database on CentOS 7

Disable IE Image Toolbar

Detailed explanation of the implementation process and usage of the Linux Recycle Bin mechanism