CSS has become a very important part of web page design. As there are many issues to consider when writing CSS, the old CSS framework is usually used to create new pages. However, new users do not have their own frameworks. This article will give new users some inspiration.
1. Simple pure CSS Tooltip
With this code, you can make a simple Tooltip. Here is the CSS code:
Copy to ClipboardReference: [www.bkjia.com] a: hover {
Background: # ffffff;/* if you want to be compatible with IE6, you must add a background color */
Text-decoration: none;
}
A. tooltip span {
Display: none;
Padding: 2px 3px;
Margin-left: 8px;
Width: 130px;
}
A. tooltip: hover span {
Display: inline;
Position: absolute;
Background: # ffffff;
Border: 1px solid # cccccc;
Color: # 6c6c6c;
}
The HTML code is as follows:
Copy to ClipboardReference: [www.bkjia.com] Easy <a class = "tooltip" href = "#"> Tooltip <span> This is a Example by imbolo.com. </span> </a>. effect.
2. Reset the basic style
To unify the rendering of the default styles of various HTML tags in different browsers, we must define the styles of various tags to facilitate future development. To redefine HTML tags, you only need to add the following code at the beginning of CSS.
Copy to ClipboardReference content: [www.bkjia.com] html, body, div, span, applet, object, iframe,
H1, h2, h3, h4, h5, h6, p, blockquote, pre,
A, abbr, acronym, address, big, cite, code,
Del, dfn, em, font, img, ins, kbd, q, s, samp,
Small, strike, strong, sub, sup, tt, var,
B, u, I, center,
Dl, dt, dd, ol, ul, li,
Fieldset, form, label, legend,
Table, caption, tbody, tfoot, thead, tr, th, td {
Margin: 0;
Padding: 0;
Border: 0;
Outline: 0;
Font-size: 100%;
Vertical-align: baseline;
Background: transparent;
}
Body {
Line-height: 1;
}
Ol, ul {
List-style: none;
}
Blockquote, q {
Quotes: none;
}
Blockquote: before, blockquote: after,
Q: before, q: after {
Content: none;
}
/* The style when the element gets the focus! */
: Focus {
Outline: 0;
}
/* Special Text style! */
Ins {
Text-decoration: none;
}
Del {
Text-decoration: line-through;
}
/* Fine-line table style */
Table {
Border-collapse: collapse;
Border-spacing: 0;
} 3. Convenient CSS Debugger
This Code divides the labels nested on the page into different lines to help you identify bugs.
Copy to ClipboardReference: [www.bkjia.com] * {outline: 2px dotted red}
** {Outline: 2px dotted green}
* ** {Outline: 2px dotted orange}
* *** {Outline: 2px dotted blue}
* *** {Outline: 1px solid red}
* ***** {Outline: 1px solid green}
* ***** {Outline: 1px solid orange}
* ******* {Outline: 1px solid blue}
- Three pages in total:
- Previous Page
- 1
- 2
- 3
- Next Page
