Common CSS techniques for data collection and css data collection

Common CSS techniques for data collection and css data collection

1. Reset the font size of the browser

Reset the default browser value and then reset the font size of the browser. You can use the CSS solution reset on the Yahoo user interface. If you do not want to download a 9 MB 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; }

Second, we reset the browser font size to 10 pixels, using the following:

Html {font-size: 62.5% ;}

This size is basically suitable, and you can adjust the size as needed, for example, Title 1 is 120 pixels:
H1 {font-size: 2em ;}

2. Set horizontal center 
Most websites are currently fixed in width. The CSS code is as follows:
Div # container {margin: 0 auto ;}

3. control position: absolute position, relative position 
Assume there are two divs.

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

Div has the left and top attributes for positioning.

If the position attribute of the div in the inner layer is absolute, it is relative to the position in the upper left corner of the document ..
If the position attribute of the inner div (the one whose id is son) is relative, its left and top values are the distance from 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 at 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, and set the top and left attributes to half of them, so that this part can be returned to the center of the screen.

5. Reusable rules

.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 sheets so that you can directly add tags as needed.

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

7. Simple navigation menu 
It is very helpful to preset a navigation bar in your design. Let others have a general understanding of the main content of your web page. The first 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. Do not use table form

As we are currently designing table-free for websites, the focus is on using DIVs. The table columns and fields are no longer restricted, so we need some useful CSS, which can be 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. Keep footer at the bottom of the page

The company version information is always kept at the bottom of the webpage. How can this information be implemented? This is an old technology, 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:

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; }

10. Use multiple types on the same element

With more and more useful functions, most people ignore the choice of internal CSS. A single element can be applied to many classes, such:
. Red {color: red ;}
. Bold {font-weight: strong ;}

We can use it:
<P class = "red bold"> This text will be red yet also bold! </P>