网页制作导航栏代码,怎么做网页导航栏
html框架如何实现左边为导航栏,右边为连接页面,代码写出来
1、首先打开Deamweaver8，新建一网页文件，接着输入以下导航菜单的内容。
2、此时对应效果如图。
3、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。
4、然后将以下CSS代码加入到head/head之间。
5、网页此时的效果如图，就完成了。
网页导航栏制作：如何为网页添加导航栏
制作一个放导航栏的容器
制作一个放导航栏的容器，容器名为nav，容器宽为1000px，高为30px，背景颜
色为灰色，相关代码如下：
#nav
{
width:1000px;
height:30px;
background:#CCC;
margin:0 auto;
margin-top:50px;
}
div id="nav"/div
显示结果
在浏览器中显示的结果为下图所示：
在容器中放入一些导航栏
导航栏代码如下:
ul
li模块一/li
li模块二/li
li模块三/li
li模块四/li
li模块五/li
li模块六/li
/ul
为导航栏添加一些属性
style type="text/css"
#nav
{
width:1000px;
height:30px;
background:#CCC;
margin:0 auto;
margin-top:50px;
}
#nav ul
{
width:960px;
height:35px;
}
#nav ul li
{
float:left;
width:100px;
float:left;
list-style:none;
background:yellow;
line-height:35px;
}
/style
导航栏在浏览器页面的显示结果如下图所示：
怎样用PHP来给网页做导航栏
本文只需要读者具备PHP、HTML的初步知识就可以基本读懂了。 译文：如大家所知PHP对于用数据库驱动的网站（making database-driven sites）来讲可谓功能强大，可是我们是否可以用它来做点其他事情呢？PHP给了我们所有我们期望的工具：for与while的循环结构、数学运算等等，还可以通过两种方式来引用文件：直接引用或向服务器提出申请。其实何止这些，让我们来看一个如何用它来做导航条的例子：完整的原代码：！—— This "？" is how you indicate the start of a block of PHP code， —— ？PHP # and this "#" makes this a PHP comment. $full_path = getenv（"REQUEST_URI"）； $root = dirname（$full_path）；$page_file = basename（$full_path）；$page_num = substr（$page_file， strrpos（$page_file， "_"） + 1， strpos（$page_file， ".html"） - （strrpos（$page_file， "_"） + 1））； $partial_path = substr（$page_file， 0， strrpos（$page_file， "_"））； $prev_page_file = $partial_path . "_" . （string）（$page_num-1） . ".html"；$next_page_file = $partial_path . "_" . （string）（$page_num+1） . ".html"； $prev_exists = file_exists（$prev_page_file）；$next_exists = file_exists（$next_page_file）； if （$prev_exists） { print "a href="$root/$prev_page_file"previous/a"；if （$next_exists） { print " | "；} if （$next_exists） { print "a href="$root/$next_page_file"next/a"；} ？//原程序完。 代码分析：OK！ 前面做了足够的铺垫工作，现在让我们来看看如何来用PHP来完成这项工作： ！—— This "？" is how you indicate the start of a block of PHP code， —— ？PHP # and this "#" makes this a PHP comment. $full_path = getenv（"REQUEST_URI"）； $root = dirname（$full_path）；$page_file = basename（$full_path）； /* PHP函数getenv（）用来取得环境变量的值，REQUEST_URI的值是紧跟在主机名后的部分URL，假如URL是， 那它的值就为/dinner/tuna_1.html. 现在我们将得到的那部分URL放在变量$full_path中，再用dirname（）函数来从URL中抓取文件目录，用basename（）函数取得文件名，用上面的例子来讲dirname（）返回值：/dinner/；basename（）返回：tuna_1.html.接下来的部分相对有些技巧，假如我们的文件名以story_x的格式命名，其中x代表页码，我们需要从中将我们使用的页码抽出来。当然文件名不一定只有一位数字的模式或只有一个下划线，它可以是tuna_2.html，同样它还可以叫做tuna_234.html甚至是candy_apple_3.html，而我们真正想要的就是位于最后一个“_”和“。html”之间的东东。可采用如下方法：*/ $page_num = substr（$page_file， strrpos（$page_file， "_"） + 1， strpos（$page_file， ".html"） - （strrpos（$page_file， "_"） + 1））；/* substr（$string， $start，[$length] ）函数给了我们字符串$string中从$start开始、长为$length或到末尾的字串（方括号中的参数是可选项，如果省略$length，substr就会返回给我们从$start开始直到字符串末尾的字符串），正如每一个优秀的C程序员告诉你的那样，代表字符串开始的位置开始的数字是“0”而不是“1”。 函数strrpos（$string， $what）告诉我们字符串$what在变量$string中最后一次出现的位置，我们可以通过它找出文件名中最后一个下划线的位置在哪，同理，接着的strpos（$string， $what）告诉我们“。html”首次出现的位置。我们通过运用这三个函数取得在最后一个“_”和“。html”之间的数字（代码中的strpos（）+1代表越过“_”自己）。 剩下的部分很简单，首先为上页和下页构造文件名：*/ $partial_path = substr（$page_file， 0， strrpos（$page_file， "_"））； $prev_page_file = $partial_path . "_" . （string）（$page_num-1） . ".html"；$next_page_file = $partial_path . "_" . （string）（$page_num+1） . ".html"； /*（string）（$page_num+1）将数学运算$page_num+1的结果转化为字符串类型，这样就可以用来与其他字串最终连接成为我们需要的文件名。 */ /*现在检查文件是否存在（这段代码假设所有的文件都位于同样的目录下），并最终给出构成页面导航栏的HTML代码。
我用html做了一个导航栏，代码如下：
ul的父亲是div啊，你把div的内左边内边矩设为0，padding-left：0；试试。
求网页制作导航栏的代码或方法
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更方便一些的
网页导航条怎么做?
1、打开Deamweaver8，新建一网页文件。接着输入以下导航菜单的内容：
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title导航栏示例/title
/head
body
ul id="navigation"
li/li
lia href="#"首 ? ?页/a/li
lia href="#"我的博客/a/li
lia href="#"互动交流/a/li
lia href="#"开心一刻/a/li
lia 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代码之间，网页此时的效果如图：