[Preparations]
I. Instructions: create a website framework:
2. reset.css file reference content:
[Css] view plaincopyprint? /* CSS Reset of YUI
*/
Body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td
{
Padding: 0;
Margin: 0;
}
Table
{
Border-collapse: collapse;
Border-spacing: 0;
}
Fieldset, img
{
Border: 0;
}
Address, caption, cite, code, dfn, em, strong, th, var
{
Font-weight: normal;
Font-style: normal;
}
Ol, ul
{
List-style: none;
}
Caption, th
{
Text-align: left;
}
H1, h2, h3, h4, h5, h6
{
Font-weight: normal;
Font-size: 100%;
}
Q: before, q: after
{
Content :'';
}
Abbr, acronym
{
Border: 0;
}
/* CSS Reset of YUI
*/
Body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td
{
Padding: 0;
Margin: 0;
}
Table
{
Border-collapse: collapse;
Border-spacing: 0;
}
Fieldset, img
{
Border: 0;
}
Address, caption, cite, code, dfn, em, strong, th, var
{
Font-weight: normal;
Font-style: normal;
}
Ol, ul
{
List-style: none;
}
Caption, th
{
Text-align: left;
}
H1, h2, h3, h4, h5, h6
{
Font-weight: normal;
Font-size: 100%;
}
Q: before, q: after
{
Content :'';
}
Abbr, acronym
{
Border: 0;
}
[Description]
It is said that it is the CSS Reset of YUI, and the version is unknown. If you know the source file, please kindly advise.
The main function of this file is {padding: 0; margin: 0 ;}, which is equivalent to replacing the common settings * {padding: 0; margin: 0 ;}.
3. reference images
Bg-header.jpg
Bg-pattern.jpg
Nav.png
Procedure]
I. Results
Ii. HTML
[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Link href = "css/reset.css" rel = "stylesheet" type = "text/css"/>
<Link href = "css/layout.css" rel = "stylesheet" type = "text/css"/>
<Title> No title page </title>
</Head>
<Body>
<Div id = "header">
<Ul id = "nav">
<Li> <a href = "#" id = "farm"> Our Farm </a> </li>
<Li> <a href = "#" id = "blog"> The Blog </a> </li>
<Li> <a href = "#" id = "shop"> Shop </a> </li>
<Li> <a href = "#" id = "info"> Info & Extras </a> </li>
<Li> <a href = "#" id = "contact"> Contact Us </a> </li>
</Ul>
</Div>
</Body>
</Html>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Link href = "css/reset.css" rel = "stylesheet" type = "text/css"/>
<Link href = "css/layout.css" rel = "stylesheet" type = "text/css"/>
<Title> No title page </title>
</Head>
<Body>
<Div id = "header">
<Ul id = "nav">
<Li> <a href = "#" id = "farm"> Our Farm </a> </li>
<Li> <a href = "#" id = "blog"> The Blog </a> </li>
<Li> <a href = "#" id = "shop"> Shop </a> </li>
<Li> <a href = "#" id = "info"> Info & Extras </a> </li>
<Li> <a href = "#" id = "contact"> Contact Us </a> </li>
</Ul>
</Div>
</Body>
</Html> [description]
In this example, the three States of the navigation bar are in the format of the lay.css file, which is implemented by the background image nav.png. The list item text in the list is not displayed, and may be displayed on the handheld network device that does not support the style sheet.
Iii. CSS
[Css] view plaincopyprint? /*-LET's get started!
----------------------------------------------------------------------*/
Body
{
Background: url (../images/bg-pattern.jpg );
Font-family: "adobe-garamond-pro-1", "adobe-garamond-pro-2", Georgia, "Times New Roman", Times, serif;
Color: #6B5F51;
Font-size: 14px;
}
A
{
Text-decoration: none;
}
A: focus
{
Outline: none;
}
/*-HEADER
----------------------------------------------------------------------*/
# Header
{
Background: transparent url (../images/bg-header.jpg) repeat-x center top;
Overflow: hidden;
}
/*-NAV
----------------------------------------------------------------------*/
# Nav
{
Width: 847px;
Height: pixel PX;
Margin: 0 auto;
Z-index: 9999;
Position: relative;
Margin-top: 14px;
}
# Nav li
{
Display: inline;
}
# Nav li
{
Display: block;
Position: relative;
Float: left;
Height: pixel PX;
Background: url (../images/nav.png );
Text-indent:-9999px;
}
# Nav li a # farm
{
Width: pixel PX;
Margin-right: 40px;
}
# Nav li a # farm: hover
{
Background-position: left-pixel PX;
}
# Nav li a # farm: active
{
Background-position: left-224px;
}
# Nav li a # blog
{
Background-position:-171px top;
Width: pixel PX;
Margin-right: 41px;
}
# Nav li a # blog: hover
{
Background-position:-171px-pixel PX;
}
# Nav li a # blog: active
{
Background-position:-171px-224px;
}
# Nav li a # shop
{
Background-position:-344px top;
Width: 164px;
Margin-right: 33px;
}
# Nav li a # shop: hover
{
Background-position:-344px-pixel PX;
}
# Nav li a # shop: active
{
Background-position:-344px-224px;
}
# Nav li a # info
{
Background-position:-551px top;
Width: pixel PX;
Margin-right: 41px;
}
# Nav li a # info: hover
{
Background-position:-551px-pixel PX;
}
# Nav li a # info: active
{
Background-position:-551px-224px;
}
# Nav li a # contact
{
Background-position:-723px top;
Width: 130px;
}
# Nav li a # contact: hover
{
Background-position:-723px-pixel PX;
}
# Nav li a # contact: active
{
Background-position:-723px-224px;
}
/*-LET's get started!
----------------------------------------------------------------------*/
Body
{
Background: url (../images/bg-pattern.jpg );
Font-family: "adobe-garamond-pro-1", "adobe-garamond-pro-2", Georgia, "Times New Roman", Times, serif;
Color: #6B5F51;
Font-size: 14px;
}
A
{
Text-decoration: none;
}
A: focus
{
Outline: none;
}
/*-HEADER
----------------------------------------------------------------------*/
# Header
{
Background: transparent url (../images/bg-header.jpg) repeat-x center top;
Overflow: hidden;
}
/*-NAV
----------------------------------------------------------------------*/
# Nav
{
Width: 847px;
Height: pixel PX;
Margin: 0 auto;
Z-index: 9999;
Position: relative;
Margin-top: 14px;
}
# Nav li
{
Display: inline;
}
# Nav li
{
Display: block;
Position: relative;
Float: left;
Height: pixel PX;
Background: url (../images/nav.png );
Text-indent:-9999px;
}
# Nav li a # farm
{
Width: pixel PX;
Margin-right: 40px;
}
# Nav li a # farm: hover
{
Background-position: left-pixel PX;
}
# Nav li a # farm: active
{
Background-position: left-224px;
}
# Nav li a # blog
{
Background-position:-171px top;
Width: pixel PX;
Margin-right: 41px;
}
# Nav li a # blog: hover
{
Background-position:-171px-pixel PX;
}
# Nav li a # blog: active
{
Background-position:-171px-224px;
}
# Nav li a # shop
{
Background-position:-344px top;
Width: 164px;
Margin-right: 33px;
}
# Nav li a # shop: hover
{
Background-position:-344px-pixel PX;
}
# Nav li a # shop: active
{
Background-position:-344px-224px;
}
# Nav li a # info
{
Background-position:-551px top;
Width: pixel PX;
Margin-right: 41px;
}
# Nav li a # info: hover
{
Background-position:-551px-pixel PX;
}
# Nav li a # info: active
{
Background-position:-551px-224px;
}
# Nav li a # contact
{
Background-position:-723px top;
Width: 130px;
}
# Nav li a # contact: hover
{
Background-position:-723px-pixel PX;
}
# Nav li a # contact: active
{
Background-position:-723px-224px;
}
[Description]
1. The main technique of this style sheet is to set the background-position attribute. In the navigation bar, there are 5 links and 3 statuses. A total of 15 images are created on a nav.png image with a height of 3*112 =336px, you can capture different background images by setting the background-position attribute, that is, setting the starting position of the background image. The starting positions are calculated based on the rough calculations and obtained after adjustment.
2. style a mainly removes the default underline Of the connected text;
3. Style a: focus, mainly to remove a dotted box around the linked image because the focus is obtained when the clicked link is removed;
4. a: active effect. When you click a link, you can press and hold the mouse to show it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
