Hutshow – Css Web Design Home

Build up the initial layout, I began to fill the contents inside. The first is defined logo image:

Style sheet: # logo {MARGIN: 0px; padding: 0px; WIDTH: 200px; HEIGHT: 80px;}
Page code: <div id=”logo”> <a title=” WEB2.0 standards step by step tutorial to learn the basis of twelve days! “href=”http://www.hutshow.com/”> <img height =” 80 “alt =” WEB2.0 Standard Course “src =” logo.gif “width =” 200 “/> </ a> </ div>
The code above should now be easier to understand. CSS defines the first layer of a logo, and then call it in the page. It should be noted that, in order to make better use of web pages, web standards to all of us, part of the official content of the picture, add a alt attribute. The alt attribute is used to describe the role of the image (when image is not displayed on the display when the replacement text), so do not just write the name of meaningless images.
Next is to define the menu:

1. Do not form the menu (vertical)

We first look at the menu of the final results:

Click here to view

Usual method we have at least 2 layers nested tables to achieve such a menu, line spacing set by the td background color and insert a 1px transparent GIF images to achieve high; background color of the alternating effect of using the onmouseover event td implementation. However, View the menu page code, you will see only the following few:

Example Source Code [www.hutshow.com]

<div id=”menu”>
<ul>
<li> <a title=” WEB2.0 standards ” href=”http://www.hutshow.com”> What is web standards </ a> </ li>
<li> <a title=” benefits for WEB2.0 standards ” href=”http://www.hutshow.com/benefits.html”> the benefits of using the standard </ a> </ li>
How <li> <a title=” howto ” href=”http://www.hutshow.com/howto.html”> transition </ a> </ li>
<li> <a title=” tutorials ” href=”http://www.hutshow.com/tutorial.html”> tutorials </ a> </ li>
<li> <a title=” tools ” href=”http://www.hutshow.com/tools.html”> tools </ a> </ li>
<li> <a title=”> resources and links ” href=”http://www.hutshow.com/resources.html”> resources and links </ a> </ li>
</ Ul>
</ Div>

Did not use any table, but using a non-sequence <li>, the effect of the implementation of the secret menu is full id = “menu”, we will look at the definition of CSS on menu:

(1) First layer defines the main menu style:

Example Source Code [www.hutshow.com]

# Menu {
MARGIN: 15px 20px 0px 15px; / * define the outer layer of padding * /
PADDING: 15px; / * definition of the border for the inner layer of 15px * /
BACKGROUND: # dfdfdf; / * Define background color * /
COLOR: # 666; / * define font color * /
BORDER: # fff 2px solid; / * defined as a 2px white border lines * /
WIDTH: 160px; / * defines the width of the content of 160px * /
}

(2), followed by the definition of the style of unordered list:

Example Source Code [www.hutshow.com]

# Menu ul {
MARGIN: 0px;
PADDING: 0px;
BORDER: medium none; / * do not show border * /
LINE-HEIGHT: normal;
LIST-STYLE-TYPE: none;
}
# Menu li {BORDER-TOP: # FFF 1px solid; MARGIN: 0px;}

Note: This is the id selector with the derived method definition (see Chapter 7 days: CSS introductory description) layer in the sub-menu and <li> <ul> style elements. LIST-STYLE-TYPE: none an unordered list that does not use the default style, that is: do not show the small dots (which we later replaced with their own icon to the small dots). BORDER-TOP: # FFF 1px solid; the definition of the menu 1px spacing between the lines.

(3) defines the onmouseover effect

Example Source Code [www.hutshow.com]

# Menu li a {
PADDING: 5px 0px 5px 15px;
DISPLAY: block;
FONT-WEIGHT: bold;
BACKGROUND: url (attachments/month_0612/d2006122221544.gif) transparent no-repeat 2px 8px;
WIDTH: 100%;
COLOR: # 444;
TEXT-DECORATION: none;
}
# Menu li a: hover {BACKGROUND: url (attachments/month_0612/42006122221553.gif) # C61C18 no-repeat 2px 8px;
COLOR: # fff;}

Explained as follows:

● “display: block;” said a label to display as block elements, making the link into a button;
● “BACKGROUND: url (attachments/month_0612/d2006122221544.gif) transparent no-repeat 2px 8px;” This is an alternative definition of a small li dot icon. ”Transparent” means transparent background, “2px 8px” specify the location of the icon is from the left 2px, from the top 8px. This sentence can also be written as four split: “BACKGROUND-IMAGE: url (attachments/month_0612/d2006122221544.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent;”
● “# menu li a: hover” to define the link when the mouse moves beyond the icon color changes and small changes.
ok, do not form the menu so true. We can clearly feel, the original performance written in HTML, CSS style of all the strip into the paper gone. Page code to save the most. To modify the menu through the CSS style is very simple.

2. Do not form the menu (horizontal)

The above is a vertical menu, horizontal menu if you want to display, you can do with li? Of course it can, given the following code.
Results are as follows:

Click here to view

Page code

Example Source Code [www.hutshow.com]

<div id=”submenu”>
<ul>
<li id=”one”> <a title=” Home ” href=”http://www.hutshow.com/”> Home </ a> </ li>
<li id=”two”> <a title=” About Us ” href=”http://www.hutshow.com/aboutus.html”> About Us </ a> </ li>
<li id=”three”> <a title=” web standards ” href=”http://www.hutshow.com/webstandards.html”> web standards </ a> </ li>
<li id=”four”> <a title=” standard benefits ” href=”http://www.hutshow.com/benefits.html”> standard benefits </ a> </ li>
<li id=”five”> <a title=” how the transition ” href=”http://www.hutshow.com/howto.html”> how the transition </ a> </ li>
<li id=”six”> <a title=” tutorials ” href=”http://www.hutshow.com/tutorial.html”> tutorials </ a> </ li>
<li id=”seven”> <a title=” tools ” href=”http://www.hutshow.com/tools.html”> tools </ a> </ li>
<li id=”eight”> <a title=” resources and links ” href=”http://www.hutshow.com/resources.html”> resources and links </ a> </ li>
<li id=”nine”> <a title=” FAQ ” href=”http://www.hutshow.com/faq.html”> FAQ </ a> </ li>
</ Ul>
</ Div>

Style sheet code

Example Source Code [www.hutshow.com]

# Submenu {
MARGIN: 0px 8px 0px 8px;
PADDING: 4px 0px 0px 0px;
BORDER: # fff 1px solid;
BACKGROUND: # dfdfdf;
COLOR: # 666;
HEIGHT: 25px;}

# Submenu ul {
CLEAR: left;
MARGIN: 0px;
PADDING: 0px;
BORDER: 0px;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: center;
DISPLAY: inline;
}

# Submenu li {
FLOAT: left;
DISPLAY: block;
MARGIN: 0px;
PADDING: 0px;
TEXT-ALIGN: center}

# Submenu li a {
DISPLAY: block;
PADDING: 2px 3px 2px 3px;
BACKGROUND: url (attachments/month_0612/d2006122221544.gif) transparent no-repeat 2px 8px;
FONT-WEIGHT: bold;
WIDTH: 100%;
COLOR: # 444;
TEXT-DECORATION: none;
}

# Submenu li a: hover {
BACKGROUND: url (attachments/month_0612/42006122221553.gif) # C61C18 no-repeat 2px 8px;
COLOR: # fff;}

# Submenu ul li # one A {WIDTH: 60px}
# Submenu ul li # two A {WIDTH: 80px}
# Submenu ul li # three A {WIDTH: 80px}
# Submenu ul li # four A {WIDTH: 90px}
# Submenu ul li # five A {WIDTH: 80px}
# Submenu ul li # six A {WIDTH: 80px}
# Submenu ul li # seven A {WIDTH: 60px}
# Submenu ul li # eight A {WIDTH: 90px}
# Submenu ul li # nine A {WIDTH: 80px}

Each of the above code does not. The key lies in horizontal menu: the definition of style when <li> “FLOAT: left;” statement. Also note that the definition in the UL DISPLAY: inline; a force that will li presenting as inline objects, delete rows from the object, say that li is not popular line. The horizontal arrangement. You can also define, as examples of the width of each sub-menu, control menu intervals. Well, you can begin to try, with li achieve a variety of menu styles.

Tips: If your total is greater than the width of the submenu layer width, the menu will automatically break the line, the use of this principle can a single unordered list two or three layout, it is difficult to achieve the original HTML.

===============================================================

Related posts:

1. the tenth day : adaptive height If we want the end of the 3 column layout...
2. To achieve More div arranged Center To achieve More div arranged Center <?xml version=”1.0″ encoding=”iso-8859-1″?> <!DOCTYPE...
3. Commonly used methods and techniques CSS layout of the commonly used method float: none |...
4. The ninth day : The first example CSS layout Then start to really design the layout. And traditional methods, you...
5. HTML page layout structure of the DIV CSS Getting Started Guide You are learning CSS layout? Is not fully grasp the...

Related posts brought to you by Yet Another Related Posts Plugin.