导航:首页 > 万维百科 > 网页设计插入导航条

网页设计插入导航条

发布时间:2021-01-24 07:51:19

1、网页设计 制作导航条 如何制作

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

2、网页设计中,怎么做成上面是导航条,下面是内容....... (我要简单的代码,让我做参考)

没明白你什么意思!你是说就像百度知道首页一样,导航条在上面,导航条的下面也有内容?还是内容在导航条里面,鼠标放在导航条上自动弹出导航内容的效果?

3、什么是网页设计导航条

上面有各个栏目,例如百度,新闻,网页,知道,这一横向就是导航条,放的位置比较明显,导向的作用!

4、网页制作怎么添加导航

自己在你需要放导航的地方代码前面加
<div id="">
<ul class="">
<li><a href="#">导航栏目名</a></li>
<li><a href="#">导航栏目名</a></li>
<li><a href="#">导航栏目名</a></li>
<li><a href="#">导航栏目名</a></li>
<div style="clear:both"></div>
</ul>
</div>
去掉li和a标签 默认样式 ,设置向左浮动定义文字大小,间距,行高以及鼠标滑上去的hover样式

5、DW网页导航条的制作。请大家教下! 附图

看不到你的图...给按钮做成a标签的背景a{background:url(你要做背景的图片路径); width:119px; height:60px; display:block;}然后定义a:hover{background:url(你要做背景的图片路径);}需要叠加的效果的话就在hover的样式里面加上filter:alpha(opacity=50);-moz-opacity:0.6;opacity:0.6;
打字不易,希望采纳

6、求网页制作达人,dreamweaver怎样在图片上放导航条?

可以在表格和层中插入导航条,导航条的图片可用Fireworks中做,实现在图片中插入字,而且版做鼠标经过图像权用它是非常简单的。
插入导航条中还有超链接的,用它来实现网页间的联系,具体位置为:菜单栏中 插入—图像对象—导航条。

7、在网页设计中的,我想导航栏下方插入轮播图片的的特效代码,是如何插入的?请高手指点。。。谢谢

试试这个图片切换
有12345数字一起切换
鼠标点一下数字会变换到另一张图片,不点就会自动换
里面有教程和源码

8、网页导航条怎么做?

可以用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)

9、网页设计导航条

下面的代码,你去看看,不好用再说。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
background-color: #0099FF;
}
#navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navigation li {
border-bottom-style: none;
border-bottom-color: #ed9f9f;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-top-color: #ed9f9f;
border-right-color: #ed9f9f;
border-left-color: #ed9f9f;
float: left;
}
#navigation li a {
text-decoration: none;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 0.5em;
border-right-width: 1px;
border-left-width: 12px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #711515;
border-left-color: #711515;
border-top-style: none;
border-bottom-style: none;
width: 50px;
text-align: center;
margin: 0px;
}
#navigation li a:link, #navigation li a:visited {
color: #FFFFFF;
background-color: #c11136;
}
#navigation li a:hover {
color: #ffff00;
background-color: #990020;
}
#navigation ul li:hover ul,#navigation ul a:hover ul {
visibility: visible;
}
#navigation ul ul {
visibility: hidden;
}
#navigation ul ul li {
clear: both;
}
#navigation ul ul li a {
border: 1px solid #CCCCCC;
}
#navigation ul ul li a:link, #navigation ul ul li a:visited {
color: #000000;
background-color: #FFCC66;
}
#navigation ul ul li a:hover {
color: #006699;
background-color: #99CC00;
}
.nav {
border: 1px solid #0099CC;
position: absolute;
width: 357px;
left: 112px;
top: 34px;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 12px;
}
.nav li {
float: left;
}
.nav li a {
border: 1px solid #FF3333;
display: block;
padding: 5px;
background-color: #FFCC33;
text-decoration: none;
}
-->
</style>
</head>

<body>
<div id="navigation">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品展示</a>
<div>
<ul>
<li><a href="#">产品1一</a></li>
<li><a href="#">产品2一</a></li>
<li><a href="#">产品3一</a></li>
<li><a href="#">产品4一</a></li>
<li><a href="#">产品5一</a></li>
<li><a href="#">产品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">联系电话</a>
<div>
<ul>
<li><a href="#">产品1一</a></li>
<li><a href="#">产品2一</a></li>
<li><a href="#">产品3一</a></li>
<li><a href="#">产品4一</a></li>
<li><a href="#">产品5一</a></li>
<li><a href="#">产品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">公司介绍</a></li>
</ul>
</div>

</body>
</html>

与网页设计插入导航条相关的知识