css制作3D按钮式导航条

<html>
<head>
<title>3D按钮式导航条</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>
</head>
<body>
<table width="700" border="0" cellspacing="2" cellpadding="0">
<tr>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" onclick=window.open("http://www.jzread.com","_blank") cellpadding="0" cellspacing="0">
<tr>
<td>资讯中心</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>技术天地</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>软件特供</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>IT财经</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>市场专家</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>互动学校</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>DIY专区</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>媒体全文</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>IT罗盘</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>IT人才</td>
</tr>
</table>
</td>
</tr>
</table>

　　<p>&nbsp;</p>
<table width="70" border="0" cellpadding="0" cellspacing="2">
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" onClick=window.open("http://www.jzread.com","_blank") cellpadding="0" cellspacing="0">
<tr>
<td>资讯中心</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>技术天地</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>软件特供</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>IT财经</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>市场专家</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>互动学校</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>DIY专区</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>媒体全文</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>IT罗盘</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" cellpadding="0" cellspacing="0">
<tr>
<td>IT人才</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

时间： 2024-09-20 00:57:18

css制作3D按钮式导航条的相关文章

用CSS滤镜巧制3D按钮式导航条

css|按钮|导航|滤镜 平面的导航条看多了,想不想做个3D的,当然制作的方法很多,真是仁者见仁,智者见智.我试着做了个按钮式的,效果还不错,每一个菜单项看起来都是一个个的按钮,制作方法也不复杂,并且大小只有几k,算瘦小的了.你只要有点html和CSS的基础知识就够了. 下面我们开始制作: 第一步: 用Dreamweaver建立一个3x1的表格,宽度为70px,不设高度值,边框设为0,间距(cellspacing)为2. 第二步: 在上面已经建立好的表格的单元格中分别插入一个1x1的表格,高度值

css下拉菜单导航条

提示:您可以先修改部分代码再运行 css下拉菜单导航条 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

CSS+DIV设计实例：纯CSS制作下拉导航菜单

css|菜单|设计|下拉 纯CSS制作的下拉导航菜单-这是一个老外的作品,基本上全是用CSS+HTML写出来的,值得大家学习 以下是引用片段:<style type="text/css">.menu {font-family: verdana, sans-serif; width:750px; position:relative; font-size:0.85em;padding-bottom:250px;}.menu ul {padding:0; margin:0;lis

Flash MX 2004实例制作视频教程：导航条的制作

导航|教程|视频教程 第 40 节:导航条的制作 课程目标:制作一个简易的网站导航条. 课程要点:使用Flash MX2004制作一个简易的网站导航条,主要应用了按钮及脚本实现.例中使用到的ActionScript脚本请下载源文件查看. 观看教程:[全屏观看] (2.60MB) (必须安装Flash Player 7.0或更高版本的播放器,[官方下载]) 下载教程:[下载教程] [下载源文件] 本节实例效果预览:

PhotoShop设计制作网页头部导航条教程

效果 1, 在PS中新建文件,宽度定义为1000px,实际上我们所要用到的宽度一般在950px-980px之间.为了方便更好的展示网站的整体效果.所以文件的宽度应大于网页实际的宽度.高度自定,但最好要大于整个页面的高度,在没有办法确定页面的高度范围时,我们可以把高度定到大于网页高度.这样,整个页面制作好了.我们可以使用裁切工具.将多余的部分裁切掉. 2, 这个实例,以网站实际宽度为800像素为例进行操作.为了加快制作流程,节省制作的时间成本.我通常的做法是:a,选矩形选框工具;b,定义固定宽度8

用Fireworks制作简单金属导航条

导航 PS作者:天外飞猪 http://www.yesky.com/20020820/1626109.shtml 这是一篇短小精悍的教程,非常适合初学者. 漂亮的导航条为我们的网站增色不少,现在我们来看一个例子,这个别具特色的导航条主要充分运用了Fireworks MX渐变功能. 1.新建一个以白色为背景的400*50 pixels的文件.用矩形工具(按U键)画一长方形,并填充颜色,连按两次G键,打开渐变工具,对矩形进行填充,如图: 颜色分别为#FFA621,#333333,#FFA621,按V

网页代码实例:CSS制作淘宝导航交互的小三角箭头

文章简介:淘宝导航的小三角箭头图标. 没事做了一个淘宝导航的小三角箭头图标,测试/支持环境:IE7+.Firefox8.chrome 以下为源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

CSS制作网页的15条常识

首先大家应该明白,使用DIV+CSS做网页排版不是换个标签然后再去按照表格的方式去排版,而是需要做到网页制作的内容与表现的分离. 首先大家应该明白,使用DIV+CSS做网页排版不是换个标签然后再去按照表格的方式去排版,而是需要做到网页制作的内容与表现的分离.    1: ID用于标识页面单独元素以及持久行的结构性元素 方便JS的调用,类用于标识同一页面可重复定义使用的结构性元素 ID与类的命名需与表现形式无关 :leftContent 而使用有意义的定义方式:sideBar等等.命名方式遵循"驼

纯CSS制作下拉导航菜单实例代码

css|菜单|导航|下拉 <style type="text/css">.menu {font-family: verdana, sans-serif; width:750px; position:relative; font-size:0.85em;padding-bottom:250px;}.menu ul {padding:0; margin:0;list-style-type: none;}.menu ul li {float:left;position:relat