Web development-Starting from the Foundation 2

Four styles of a hyperlink

Assume a hyperlink <a href = www.561.cn> This is a hyperlink </a>

a:link {color: #FF0000}/* Link not visited */a:visited {color: #00FF00}/* Visited link */a:hover {color: #FF00FF}/mouse move to link */a:act ive {color: #0000FF}/* Selected link */

The above defines the link style when the hyperlink is not visited, the link style that has been visited, the link style when the mouse is moved, and the selected link style. It is called a pseudo-class, that is, it is not a real class, the normal class is to start with a point, followed by a name, and it is a beginning with a colon, followed by a state-qualified character.

Ii. converting links to block-level elements

Links are inline elements by default and can be converted to block-level elements for a larger click area, set width and height, convert links to blocks, and simply add a display:block CSS property.

a {display:block; height:30px; width:100px; line-height:30px; text-align:center; background: #CCC;} a:hover {color : #FFF; Text-decoration:none; Background: #333; }

Third, make the button with CSS

a {display:block; height:34px; width:107px; line-height:2; text-align:center; Background:url (/upload/2010-08/14/014 304_btn_bg.gif) no-repeat 0px 0px; Color: #d84700; font-size:14px; Font-weight:bold; Text-decoration:none; padding-top:3px; } a:hover {Background:url (/upload/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px;}

Four, the first word sinking

p {width:400px; line-height:1.5; font-size:14px;} p:first-letter {font-family: "Microsoft Yahei"; font-size:40px; f Loat:left; padding-right:10px; Line-height:1; }

V. Horizontal graphic list four, floating stepfather container height adaptive

When an element inside a container floats, it will not increase as the height of the inner element increases, resulting in the display of content elements beyond the container.

To solve this problem, you need to use the following styles

Overflow:auto; Zoom:1;