导航:首页 > 万维百科 > 网页设计一级导航怎么做

网页设计一级导航怎么做

 发布时间：2020-12-15 08:31:47

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

自己在你需要放导航的地方代码前面加
<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样式

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

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

3、制作网页怎么在主导航上显示子导航

j

4、如何设计网站导航系统？

导航模式

网站的导航如何设计，在设计网站导航时首先应该明确用户的浏览习惯，根据用户的浏览习惯，首先会先大概地扫视一遍页面，其次则会开始寻找导航栏，快速从导航栏上找到主要信息，引导用户寻找网站对他有用的信息。一般来说左边的权重要比右边的权重要高一些。

网站的导航信息应该明确，，设计一个有魅力的导航还能留住用户浏览更多的内容信息，带给用户良好的体验。在网站导航设计上应该主要关注一下几点：导航的模式常见的导航模式有很多，例如顶部水平横栏式，垂直导航栏，侧边固定式，滑出或者弹出窗口导航等，通常网站是根据所要展示的内容要点来选择不同的导航。如果网站的内容较少，在网站导航上可以选取水平式导航，这样既可以重点内容而且简单清晰，网站内容较多的时候可以选择抽屉式的导航，用户在浏览网站时各种信息都很明确。如果网站的显示页过长，比较试用的是垂直式导航，方便用户在浏览内容时导 航信息始终保持在一个位置可以被快速找到。

导航内容

网站的导航应该是对整个网站想要展示的信息总结，导航的信息要与详细页面符合，标题的总结要精简，注意网站小内容最好不要以导航的总标题形式出现，可通过细分的下拉菜单，或者以更多形式的小菜单栏里出现。

导航细节

在导航设计时可以设置一个“回到顶部” 的标志，以便用户快速到达头部的导航位置。这样对于网站内容较多用户下滚的内容过长时就可以快速的回到顶部了。

导航创意

我们都喜欢新的东西，在看惯了千篇一律的导航形式如果能给导航加点创意，那么肯定会非常吸引人眼球。

网站的导航在网站设计中有着举足轻重的地位，好的网站导航是成功的一半，所以在网站的导航设置上更加注意。

5、设计网页我已经有弄一级导航了 然后怎么再弄个第二导航

<style>
body{
background-color:white;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
color:white;
}
ul,li{
margin:0px;
padding:0px;
}
li{
display:inline;
list-style:none;
list-style-position:outside;
text-align:center;
font-weight:bold;
float:left;
}
a:link{
color:#336601;
text-decoration:none;
float:left;
width:100px;
padding:3px 5px 0px 5px;
}
a:visited{
color:#336601;
text-decoration:none;
float:left;
padding:3px 5px 0px 5px;
width:100px;
}
a:hover{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#539D26;
}
a:active{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#BD06B4;
}
#nav{
width:600px;
height:30px;
border-bottom:0px;
padding:0px 5px;
position:absolute;
z-index:1;
}
.list{
line-height:20px;
text-align:left;
padding:4px;
font-weight:normal;
}
.menu1{
width:120px;
height:auto;
margin:6px 4px 0px 0px;
border:1px solid #9CDD75;
background-color:#F1FBEC;
color:#336601;
padding:6px 0px 0px 0px;
cursor:hand;
overflow-y:hidden;
filter:Alpha(opacity=70);
-moz-opacity:0.7;
}
.menu2{
width:120px;
height:18px;
margin:6px 4px 0px 0px;
background-color:#F5F5F5;
color:#999999;
border:1px solid #EEE8DD;
padding:6px 0px 0px 0px;
overflow-y:hidden;
cursor:hand;
}
</style>
<div id="nav">
<ul>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
</ul>
</div>

不知是不是这样，分享下。

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

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

7、dw网页二级菜单代码怎么做！很着急把它放在一级导航底下！

方法和详细的操作步骤如下：

1、第一步，打开dw软件并创建一个新文件，见下图，转到下面的步骤。

2、第二步，执行完上面的操作之后，单击“常用”选项，选择“布局”按钮，然后绘制一个图层，见下图，转到下面的步骤。

3、第三步，执行完上面的操作之后，再次单击该层并绘制另一个，看到第一层是layer1，第二层是layer2，见下图，转到下面的步骤。

4、第四步，执行完上面的操作之后，将光标放在layer1上，然后单击“插入表格”，建立一个具有一行三列且宽度为288的表，见下图，转到下面的步骤。

5、第五步，执行完上面的操作之后，在表格中输入百度经验，百度知道，百度文库，可以在属性栏中设置以下属性，见下图，转到下面的步骤。

6、第六步，执行完上面的操作之后，在第2层中输入经验首页，个人中心，小测首页，帮帮首页，然后设置以下属性，见下图。这样，就解决了这个问题了。

8、用CSS样式制作的网页二级导航！

<style> body{ background-color:white; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; color:white; } ul,li{ margin:0px; padding:0px; } li{ display:inline; list-style:none; list-style-position:outside; text-align:center; font-weight:bold; float:left; } a:link{ color:#336601; text-decoration:none; float:left; width:100px; padding:3px 5px 0px 5px; } a:visited{ color:#336601; text-decoration:none; float:left; padding:3px 5px 0px 5px; width:100px; } a:hover{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#539D26; } a:active{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#BD06B4; } #nav{ width:600px; height:30px; border-bottom:0px; padding:0px 5px; position:absolute; z-index:1; } .list{ line-height:20px; text-align:left; padding:4px; font-weight:normal; } .menu1{ width:120px; height:auto; margin:6px 4px 0px 0px; border:1px solid #9CDD75; background-color:#F1FBEC; color:#336601; padding:6px 0px 0px 0px; cursor:hand; overflow-y:hidden; filter:Alpha(opacity=70); -moz-opacity:0.7; } .menu2{ width:120px; height:18px; margin:6px 4px 0px 0px; background-color:#F5F5F5; color:#999999; border:1px solid #EEE8DD; padding:6px 0px 0px 0px; overflow-y:hidden; cursor:hand; } </style> <div id="nav"> <ul> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首页</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首页</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首页</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> </ul> </div>

采纳哦

9、html中制作一个网页导航，怎么弄

用表格做！看你的抄导航是横排的还是竖排的。横排的就建一个一行多列的表格，竖排的就建一个一列多行的表格。把每一个链接放在各个单元格中。最后把这个表格保存为一个HTML文件，在需要导航的页面上include这个文件在你指定的位置就OK了。这样的好处是你只要做一次导航文件就可以在所有你想要用！的地方引用。

与网页设计一级导航怎么做相关的知识