Dreamweaver cleverly creates a navigation bar button with a table

Have you seen the navigation bar above? You can click here to see its effect. Please note that this is made from a table. Do you believe it? In fact, the code is very simple. Now let's take a look at how to do it.

1. Create a 1x6 table with the parameter border = 0 cellspacing = 3 cellpadding = 0;

2. Insert a table in each cell of the table with the width and height set to 100%;

3. Create a css style. up and. down. The code is as follows:

<Style> . Up { Border: 4 outset royalblue; color: yellow; background: blue; cursor: hand } . Down { Border: 4 inset royalblue; color: #33ff33; background: blue; cursor: hand } </Style>

4. The code for calling styles and behaviors of inserted tables is as follows:

Class = up onMouseDown = "className = ''low''" onMouseUp = "className = ''up''" onMouseOut = "className = ''up''" onclick = window. open ("button.htm", "_ blank ")

Note: use onclick instead of href for the link, because the latter has a dotted box after access, which is not beautiful. Save the disk and check the effect!