导航:首页 > 万维百科 > 网页设计中导航栏的制作教程

网页设计中导航栏的制作教程

发布时间:2020-10-18 14:39:57

1、如何使用Dreamweaver做一个网页的导航栏

Dreamweaver,简称“DW”,中文名称"梦想编织者",是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器。
想用DW做出导航栏必熟知div+css,基本代码:
ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto}
ul#nav li{display:inline; height:60px}
ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px;
color:#FFF; font-family:"\5FAE\8F6F\96C5\9ED1"; font-size:16px}
ul#nav li a:hover{background:#0095BB}/*设置鼠标滑过或悬停时变化的背景颜色*/

<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">HTML教程</a></li>
<li><a href="#">CSS基础</a></li>
<li><a href="#">CSS开发工具</a></li>
<li><a href="#">CSS特效</a></li>
<li><a href="#">CSS问题</a></li>
</ul>

2、用PS制作的网站导航栏,怎么应用到自己的网页里

网站的“导航栏”作为网页设计中的重要组成部分,扮演着极为重要的角色。网页导航栏设计的成功与否,在很大程序上决定着整个网页的美观程度。用Photoshop设计“导航栏”,不仅讲究ps技术,更在于发挥你的创造力和想象力,这是学习ps最难之所在。具体制作过程见网上教程。

3、css html制作网页,用ul和li制作横向导航栏

将ul里面的li标签都设置为右浮动即可。如:

<ul style="overflow:hidden; display:block">
    <li class="float:right; padding:10px;>项目1</li>
    <li class="float:right; padding:10px;>项目1</li>
    <li class="float:right; padding:10px;>项目1</li>
    <li class="float:right; padding:10px;>项目1</li>
</ul>

4、网页中的导航条怎样简单的制作出来??

不麻烦啊。。。。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代码 <h2>Tab Menu 1</h2> <div id="tabs1"> <ul> <li><a href="#" title="Link 1"><span>Link 1</span></a></li> <li><a href="#" title="Link 2"><span>Link 2</span></a></li> <li><a href="#" title="Link 3"><span>Link 3</span></a></li> <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li> <li><a href="#" title="Link 5"><span>Link 5</span></a></li> <li><a href="#" title="Link 6"><span>Link 6</span></a></li> <li><a href="#" title="Link 7"><span>Link 7</span></a></li> </ul> </div> <br /><br />
记得采纳啊

5、网页设计导航是怎么做的

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

<html xmlns="网址">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

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

</head>

<body>

<ul id="navigation">

<li></li>

<li><a href="#">首  页</a></li>

<li><a href="#">我的博客</a></li>

<li><a href="#">互动交流</a></li>

<li><a href="#">开心一刻</a></li>

<li><a href="#">悬 赏 令</a></li>

<li></li>

</ul>

</body>

</html>

2、此时对应效果如图:

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

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

<style type="text/css">

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代码之间,网页此时的效果如图:

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

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

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

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

8、求网页制作导航栏的代码或方法

css代码如下:---------------------
#box_topbar {
/*width: 980px;*/
width:100%;height:135px;
z-index:100;
_position: relative ;
_top:0px;
}
#topNav {
width: 100%;height: 105px;
z-index: 100;
overflow: visible;
position: fixed;
top: 0px; /* position fixed for IE6 */
_position: absolute;
_top: expression(documentElement.scrollTop + "px");background:#1a1a1a;
color:#fff;

}
html代码如下------------------------------
<div id="box_topbar">
<div id="topNav">
</div></div>

做网页还是用Dreamweaver更方便一些的

9、DW中网页导航栏制作~~~

最上层一个div里面为ul下N个li,li里是a。 用javascript写onmouseover 和onmouseout属性,下面为li下对应的div层,平时设为隐藏一旦触发onmouseover设置相对应div显示,onmouseout则再隐藏,大概这个思路。。 如果听不懂用firework,和方便的添加下拉列表框

与网页设计中导航栏的制作教程相关的知识