Collection of commonly used CSS techniques_html/css_WEB-ITnose

1. Reset the browser's font size

Reset the browser's default value, and then reset the browser's font size. You can use Yahoo CSS scheme for user interface reset, if you don’t want to download a 9MB file, the code is as follows:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, blockquote,th,td {margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:”; } abbr,acronym { border:0; }

Secondly, we Reset the browser font size to 10 pixels, use the following:

html {font-size: 62.5%;}

This size is basically suitable, and then you can adjust the size according to your needs , such as title 1 is 120 pixels:
h1 {font-size: 2em;}

2. Set horizontal centering
Most websites are currently Fixed width. The CSS code is as follows:
div#container {margin: 0 auto;}

3. Control position: absolute position, relative position
If there are two divs

<div id='parent'> <div id='son'></div> </div>

div has left and top attributes, which are used for positioning.

If the position attribute of the inner div is absolute, then it is relative to the top left of the document The position of the corner..
If the position attribute of the inner div (the one with the id of son) is relative, then its left and top values ​​are the distance relative to the upper left corner of the outer div.

4. Place important elements in the center of the screen
If you want to put what you want in the center, you can use the following CSS:

div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;} div.popup { margin-top: -200px; margin-left: -250px;}

You must specify the width and height explicitly, and then set the top and left properties to half of them, so that this part can be returned to the center of the screen.

5. Rules that can be reused

.left {float: left;} .right {float: right;} img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;} img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}

Set your own CSS style sheet, and you can directly use it when you need it Just add a tag.

6. Solve the double margin problem of floating elements in IE6
If float:left and margin-left:100px are set for a div, then in IE6, this bug will will appear. You only need to set up one more display, the code is as follows:
div {float:left;margin:40px;display:inline;}

7. Simple navigation menu
It is very beneficial to have a navigation bar in your design. It can give others a general understanding of the main content of your web page. First time XHTML:

<div id=”navbar”> <ul> <li><a href=”http://www.peakflowdesign.com”>Peakflow Design</a></li> <li><a href=”http://www.google.com”">Google</a></li> <li><a href=”http://zenhabits.net/”>Zen Habits</a></li> </ul> </div>

CSS code:

#navbar ul li {display:inline;margin:0 10px 0 0;} #navbar ul li a {color: #333;display:block;float:left;padding:5px;} #navbar ul li a:hover {background:#eee;color:black;}

8. Don’t use table forms

Just as we are now designing table-free websites, we focus on using DIVs. There are no longer constraints on the columns and fields of the table, so we need some useful CSS, found at JeddHowden.com
XHTML:

<form action=”form.php” method=”post”> <fieldset> <legend>Personal Information</legend> <div> <label for=”first_name”>First Name:</label> <input type=”text” name=”first_name” id=”first_name” size=”10″ value=”" /> </div> <div> <label for=”last_name”>Last Name:</label> <input type=”text” name=”last_name” id=”last_name” size=”10″ value=”" /> </div> <div> <label for=”postal”>Zip/Postal Code:</label> <input type=”text” name=”postal” id=”postal” size=”10″ value=”" /> </div> </fieldset> </form>

CSS:

form div {clear:left;display:block;width:400px;zoom:1;margin:5px 0 0 0;padding:1px 3px;} form div label {display:block;float:left;width:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right;}

9. Let the footer always stay at the bottom of the page

On the web page The company's version information is always retained at the bottom. How to implement this part of information? This is a very old technique, all thanks to The Man in Blue.
XHTML:

<body> <div id=”nonFooter”> <div id=”content”> *Place all page content here* </div> </div> <div id=”footer”> *Place anything you want in your footer here* </div> </body> 

CSS: 🎜>10. Use multiple classes on the same element

html, body { height: 100%; } #nonFooter { position: relative; min-height: 100%; } * html #nonFooter { height: 100%; } #content { padding-bottom: 9em; } #footer { position: relative; margin-top: -7.5em; }

With more and more useful features, most people ignore the internal CSS option. An element can apply many classes, for example: .red {color: red;}

.bold {font-weight: strong;} We can use it:

< p class=”red bold”>This text will be red yet also bold!