| Web page Production WEBJX article introduction: Some tips for front-end development are shared with experience. |
Some of the techniques and problem-solving methods commonly used in the front-end development are often updated, hoping to help the friends on the front end.
1, the article title List of the date in the right display method (provides two methods, when used as appropriate):
Method One: This version 2 floor train of thought (thanks ~), the cost source is relatively few, more two code.
| <p> @Mr. This is the article title <span>2010-10-10</span></p> |
CSS definition:
| P{position:relative} P Span{position:absolute; right:0} |
Method Two: The code relative method one less, but compares the cost source
| <p><span>2010-10-10</span> @Mr. This is the article title </p> |
And then define span right float:
| P Span{float:right} |
In fact, this method can be extended to many cases, a very practical way of writing;
2, the Web Standard, the same page can only have a H1 tag. Many people know this concept, but they do very little;
3, the gap between the outer margin of the problem:: generally by adding a transparent border or 1px to avoid the internal margin. Detailed explanation: http://mrthink.net/css-margin-overlying-way/;
4, IE6 under Max/min-width/height implementation, _width:expression (This.width >600? "600px": true); , height is the same.
5, HTML/CLASS/ID, preferably unified in lowercase writing, so more rigorous (in line with XHTML standards);
6, do not recommend the following code compatible with IE8:
| <meta http-equiv= "x-ua-compatible" content= "ie=7"/> |
If it is not a short-term page, try to avoid using, the page should be as far as possible to ensure backward compatibility;
7, empty div in IE (FF) is a default height, you can use the definition:
| div {witdh:100%; background: #9c0; ling-height:0} |
Way to remove the default height;
8, in the use of table labels should be as much as possible to use its own properties, the maximum separation structure and style. Detailed explanation: http://mrthink.net/csshtml-colgroup-col-style/;
9, make full use of label tags in the form to enhance the user experience; This is good for the small boxes on the page, and for people with disabilities to read the site, details are the first step in the user experience;
10, fieldset,legend tag, a little-known, but very practical set of tags; it can be very clear to the set of elements of the box, mainly for the form;
11, Optgroup label, little known, it is helpful to enhance the selection of the form user experience. Role? Is that you can group these options when you have many options:
| <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> |
Effect Demo:
<label for= "Selectid" > Effect Demo: </label><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>
Tip: You can modify some of the code before running
12, the form must add a name value, the name value is a mark, different from the ID, as far as I found, if the name value is not defined, non-IE browser cannot get to the form element through Document.formid. Please look at the following code and comments:
| <script> Window.onload=function () { alert (document.mrform.length); All browsers will pop form element length alert (document.thinkform.length); Only IE will eject the form element length } </script> <body> <form name= "Mrform" id= "Thinkform" action= "#" > ...... </form> </body> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
