css| Button | navigation | filter
Plane navigation to see more, do not want to do a 3D, of course, a lot of methods of production, really different people, benevolent. I tried to do a button-style, the effect is good, each menu item looks like a button, the production method is not complicated, and the size of only a few k, counted thin. Just a little bit of HTML and CSS basics is enough.
Here we start making:
First step:
Use Dreamweaver to build a 3x1 table with a width of 70px, no height value, border set to 0, spacing (cellspacing) to 2.
Step Two:
Insert a 1x1 table in the cells of the table that you have already established, with height and width values set to 100%, border and spacing set to 0, and a menu name in each table.
The code is:
<table width= "border=" 0 "cellpadding=" 0 "cellspacing=" 2 ">
<tr>
<td>
<table width= "100%" border= "0" cellpadding= "0" cellspacing= "0" height= "100%" >
<tr>
<TD > Interactive School </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width= "100%" border= "0" cellpadding= "0" cellspacing= "0" height= "100%" >
<tr>
<td> Market Experts </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width= "100%" border= "0" cellpadding= "0" cellspacing= "0" height= "100%" >
<tr>
<td> Information Center </td>
</tr>
</table> |
Step Three:
Now we've created two CSS styles named up and down respectively, and the code is as follows:
. up{
Border:3 outset Royalblue;color:yellow;font:12px;text-align:center;background:blue;cursor:hand
} |
Description: The boundary is 3, uses the outset namely the protrusion style, the color is royalblue, the font color is yellow, the font size is 12px, the center aligns, the background color is blue, the mouse model is the hand type.
. down{
Border:3 inset Royalblue;color: #33ff33; font:12px;text-align:center;background:blue;cursor:hand;position:relative ; left:1px; top:1px
} |
Description: boundary style is inset that is concave, the font color is #33ff33,position:relative; left:1px; The top:1px can produce 1 pixel displacements so that the button is better when pressed.
Fourth Step:
Add the style and behavior to the table in step two, which adds the following code to the table label:
| Class=up Onclick=window.open ("Http://www.ccidnet.com/school/web", "_blank") |
Description: in general as well as the mouse bounce and move out when the up style, in the mouse down when the down style, link with the onclick, do not use a, because the latter will leave ugly dotted box after the visit.
In addition, you can add some modifications, such as CSS filters, but avoid too loud, otherwise the effect is not good!
In order to facilitate your study, the following provides all the code, you can copy them to WordPad, generate a TXT file, and then the file extension to the HTM, you can use IE directly open!
<title>3d button-type navigation bar </title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<style>
Body{text-align:center;background: #ffffff}
. up{
Border:3 outset Royalblue;color:yellow;font:12px;text-align:center;background:blue;cursor:hand
}
. down{
Border:3 inset Royalblue;color: #33ff33; font:12px;text-align:center;background:blue;cursor:hand;position:relative ; left:1px; top:1px; Clip:rect ()
}
</style>
<body>
<table width= "border=" 0 "cellspacing=" 2 "cellpadding=" 0 ">
<tr>
<TD width= "10%" >
<table width= "100%" border= "0" height= "100%" Class=up onclick=window.open ("Http://www.ccidnet.com/news", "_blank" ) cellpadding= "0" cellspacing= "0" >
<tr>
<td> Information Center </td>
</tr>
</table>
</td>
<TD width= "10%" >
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td> Technology World </td>
</tr>
</table>
</td>
<TD width= "10%" >
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td> Software Specials </td>
</tr>
</table>
</td>
<TD width= "10%" >
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td>it Finance </td>
</tr>
</table>
</td>
<TD width= "10%" >
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td> Market Experts </td>
</tr>
</table>
</td>
<TD width= "10%" >
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td> Interactive School </td>
</tr>
</table>
</td>
<TD width= "10%" >
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td>diy Zone </td>
</tr>
</table>
</td>
<TD width= "10%" >
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td> Media Full Text </td>
</tr>
</table>
</td>
<TD width= "10%" >
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td>it Compass </td>
</tr>
</table>
</td>
<TD width= "10%" >
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td>it Talent </td>
</tr>
</table>
</td>
</tr>
</table> <p> </p>
<table width= "border=" 0 "cellpadding=" 0 "cellspacing=" 2 ">
<tr>
<td>
<table width= "100%" border= "0" height= "100%" Class=up onclick=window.open ("Http://www.ccidnet.com/news", "_blank" ) cellpadding= "0" cellspacing= "0" >
<tr>
<td> Information Center </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td> Technology World </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td> Software Specials </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td>it Finance </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td> Market Experts </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td> Interactive School </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td>diy Zone </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td> Media Full Text </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td>it Compass </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width= "100%" border= "0" height= "100%" Class=up cellpadding= "0" cellspacing= "0" >
<tr>
<td>it Talent </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
|
