网页导航条怎么做?

作者&投稿：资印（若有异议请与网页底部的电邮联系）

网页导航条中的竖线是怎么制作的啊？~

一, 键盘上可以直接输 |
二, 如果是一条虚线的话, 那么是这样做的:
用Fireoworks新建一个1*3PX的图片, 在中间画一个点,然后将其导出,再在DW里建一个单元格,将其背景设为这个图片(注意,让它垂直方向重复,水平方向不重复 -- CSS),大功告成
三,CSS
链接

不麻烦啊。。。。css文本导航条，你多去学学就很简单啊。。。你加我qq，我传个给你，这个里面有很多精美的导航。。。 //css代码 body { margin:0; padding:0; font: bold 11px/1.5em Verdana; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px; } img { border: none; } /*- Menu Tabs 1--------------------------- */ #tabs1 { float:left; width:100%; background:#F4F7FB; font-size:93%; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url("images/tableft1.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url("images/tabright1.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } //图片 //html代码 Tab Menu 1 Link 1 Link 2 Link 3 Longer Link Text Link 5 Link 6 Link 7

记得采纳啊

1、打开Deamweaver8，新建一网页文件。接着输入以下导航菜单的内容：

<head>

<title>导航栏示例</title>

</head>

<body>

</ul>

</body>

</html>

2、此时对应效果如图：

3、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。

4、然后将以下CSS代码加入到<head></head>之间：

body {text-align:center;}

#navigation

{ list-style-type:none; height:auto;}

#navigation li { width:154px; height:60px; text-align:center;

float:left; padding-top:18px;font-size:20px; font-family:"微软雅黑", "宋体", "隶书";

background-image:url(images/noactive.jpg);}

a {width:154px; height:72px;}

a:link { text-decoration:none; color:#FFFF00;}

a:visited { text-decoration:none; color:#FFFF00; }

#navigation li:hover { color:#CC0000; text-decoration:underline;

background-image:url(images/active.jpg);}

a:hover{ color:#CC0033;}

#left {background-image:url(images/left.jpg); width:22px;}

</style>

5、在加入CSS代码之间，网页此时的效果如图：

1、文字导航
国内网站的面向用户大部分是国内网民，因而用文字完成导航功用对错常有必要的，假如你用英语，尽管看起来很巨大上，但小编觉得许多人都看不懂，这有含义吗？当然，咱们在文字导航中尽量运用较为一般的HTML文字导航，防止运用图片作为导航连接，更不要运用JavaScript主动生成导航系统，又或许运用Flash做导航都是不可取的。
2.系统具有近来的点击间隔
主页简直是一切站点投入优化的要点页面，权重天然也是较高的，所以离主页越近的页面被点击的可能性也会更高一些，当然要想完成这么的功用，站长在连接结构规划上必定要让网站尽量向扁平化的视点开展。
3.运用带锚文本的关键字

可以用div+css做的

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body { background-color:#000000;}
#nav { height:30px; list-style:none;}
#nav li { float:left;}
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(/uploadfile/200806/17/66191858519.gif); margin-left:5px; font-size:14px; font-weight:bold;}
#nav li a:hover { background:url(/uploadfile/200806/17/66191858519.gif) left -42px; color:#ffffff;}
#nav li a#current { background:url(/uploadfile/200806/17/66191858519.gif) left -84px; color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="/index.asp">主页</a></li>
<li><a id="current" href="/Sort/List_4.html">DIV+CSS教程</a></li>
<li><a href="/Sort/List_5.html">常用代码</a></li>
<li><a href="/Sort/List_6.html">水晶图标</a></li>
<li><a href="/Sort/List_7.html">幻灯图片</a></li>
<li><a href="/Sort/List_10.html">软件下载</a></li>
<li><a href="/css2/">CSS2.0实用手册</a></li>
</ul>
</body>
</html>
文章出处：标准之路(http://www.aa25.cn/div_css/289.shtml)

然而，人们很难记住数字形式的计算机网络地址，特别是互联网上数以千万计的IP地址。为了解决这个问题，我们使用人们擅长记住的名字来表示计算机。为了保证互联网上计算机标识的唯一性，方案可以采用集中命名和管理。

不用做，最简单的方法就是用它 —— 小花园网，很干净实用

如何做好网站导航条优化
答：导航是一个文本形式的链接。而且是可以点击的。最好，最好在网站的底部或者其他合适的位置增加一个包含所有栏目的文字链接区域。4、图片做导航链接如果使用图片作为网站的导航链接，就要对图片进行SEO优化，以图片链接指向页面的主要关键词作为ALT内容，另外在图片的周围布置文字链接作为辅助。

如何设置好网站的导航栏目?
答：一、简洁明了清晰的导航条导航命名要清晰、易懂。一般来说导航主要是公司简介，服务项目，产品资料。新闻资讯，经典案例以及联系方式为通用标准化的参考方式。有些企业喜欢给网站栏目起些别出心裁的名字，有创意是好的但是名称一定要跟里面的内容产生关联。方便用户清晰明了的可以直接查询他所想要的信息...

淘宝导航栏怎么设置
答：问题一：淘宝店铺的导航条怎么添加栏目怎么修改点击【卖家中心】-【店铺装修】，进入旺铺装修后台，点击”页面装修“下的【页面管理】，点击【新建页面】，创建自定义页面。自定义页面创建成功后，点击导航栏右上角的【编辑】后点击右下角的【添加】，选择【页面】，勾选已经创建的自定义页面，点击【...

淘宝这样的导航条是怎么做的 ?
答：如果是导航的颜色那是模板的问题，这个一般是去购买模板，当然如果你要研究也可以到论坛上学。如果你问的是导航条里的分类的话，可以参照下列图示完成。1、首先你的商品需要进行分类管理 2、添加手工分类，这样你就可以给自己 3、完成分类之后，就可以直接在首页装修的页面里，点你的导航条编辑：4、进入...

html网站上面添加一个白色的导航条怎么写,就是图片里红色上面的地方...
答：设置导航条的宽和高，网站图标靠左，其他链接靠右。用css+html,布局差不多就是下面这样： body{background:#777} header{ width:100%;/*全屏宽*/ height:40px;/*40像素高*/ background:#fff;/*白色背景*/ } ul{float:right} li{ align:right;display:inline;line-height:10px;padding:10...

html怎么用和制作导航条?求简便一点的代码
答：HTML：<!DOCTYPE html> html, body{ margin: 0; padding: 0; background: #E6E6E6; } .nav{ list-style: none; width: 100%; height: 30px; background: #171714; } .nav li{ float: left; width: 80px; height: 30px; back...

用DW怎样制作网页导航条?鼠标经过的时候和鼠标离开两种背景效果,和两 ...
答：可以直接在DW的代码区域输入相应代码即可解决：背景图片hover 很简单的 globalNavi { width: 908px;margin: 0 auto 18px;height: 42px;overflow: hidden;} globalNavi li { float: left;} globalNavi li a { display: block;} globalNavi li.gnavi01 a { width: 97px;background: url(../...

dreamweaver里如何添加记录集导航条?
答：DreamWeaver中可以使用 ‘应用程序’中的‘服务器行为’来建立记录集导航条。值得注意的是在此之前你必须连接数据库测试成功还要绑定了相应的记录集。具体操作为插入记录集的数据在相应的网页中创建重复区域重复区域创建完成后点 + 选择记录集分页分别在网页中插入移至第一条记录移至前一...

网页设计中怎样设计简单的导航条?谢谢
答：导航条有很多种的，最简单的就是你设置超链接就行了，按钮的你就把图片加进去嘛。复杂一点的有加Javas Script或者Flash导航条

淘宝店铺导航条怎么做,源代码怎么找到哪里有?具体如何做?
答：发觉右边的颜色还没有变呢，好的，接着下一步 */ /* 3、导航条整个分类段背景色，还是要设为红色，整体布局好看些 */ .skin-box-bd .menu-list{background:red;} /* 注意观察，最右边还有一丝地方没有变 */ /* 4、导航条背景色（是最底层了吧），修补导航右侧缺口，再设为红色 */ ....

生活知识网

网页导航条怎么做?

相关热门