Collection of commonly used CSS techniques_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:40:22
Original
1046 people have browsed it

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; }
Copy after login

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>
Copy after login

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;}
Copy after login

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;}
Copy after login

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>
Copy after login

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;}
Copy after login

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>
Copy after login

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;}
Copy after login

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> 
Copy after login

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; }
Copy after login
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!




Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template