网站首页导航栏代码(网页设计导航栏代码怎么写)
网页制作中 主页和内页 有相同导航栏HTML代码如何处理的问题
第一个问题：
网站开发中，每页重复出现的部分一般涉及到，head头部文件，即导航菜单；和foot文件即页脚部分。为了避免每个页面都重复写代码。可以有一个方法：如果是asp的话!-- #include file="head.asp" --，这里的head.asp就是导航菜单。具体的用法也很简单。直接在内页的body里面引用即可。
如果是其他语言开发的网址，方法类似。你可以到网上查查。
第二个问题：
1、所谓动态网页，就是用户在浏览网页时，浏览器向服务器发出请求，服务器根据请求，对相应的页面进行编译，生成静态网页，最终返回给浏览器客户端。也就是说，用户浏览的过程中发生客户端与服务器端的数据请求。
2、所谓静态网页，即不发生任何与服务器端的交互，浏览器直接反馈给用户的网页，比如html文件。
3、正常公司的做法是：为了避免动态网页的交互而延迟网页的打开速度，增加用户体验，一般做法是通过后台程序，把所有的动态页面提前与服务器端交互，然后生成全部静态网页（html），保存在服务器文件夹内。这样的话，当用户在浏览器段打开任意网页的时候，实际上打开的都是后台提前生成好的静态网页，打开速度快，用户体验也好。
求网页制作导航栏的代码或方法
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更方便一些的
怎么用html+css做一个导航条？
首先要建立一个DIV，为其命名为“nav”，在DIV中建立一个ul无序列表，导航共有几个栏目，就为列表添加几个li的列表项，为每个列表项中的内容加上超链接，链接到所需的项目页面。
然后设置CSS样式，为列表规定宽度和高度，去掉列表前面的符号，代码为：
ul {width:宽度值；height：高度值； list-style:none；}
如果是横向导航，还需为里面的列表项li标签设置左浮动的样式，代码为：li {float:left;}
每个栏目之间分隔的距离可通过margin（外边距）属性来设置。
我用html做了一个导航栏，代码如下：
ul的父亲是div啊，你把div的内左边内边矩设为0，padding-left：0；试试。
网页导航栏制作：如何为网页添加导航栏
01
制作一个放导航栏的容器
制作一个放导航栏的容器，容器名为nav，容器宽为1000px，高为30px，背景颜
色为灰色，相关代码如下：
#nav
{
width:1000px;
height:30px;
background:#CCC;
margin:0 auto;
margin-top:50px;
}
div id="nav"/div
02
显示结果
在浏览器中显示的结果为下图所示：
03
在容器中放入一些导航栏
导航栏代码如下:
ul
li模块一/li
li模块二/li
li模块三/li
li模块四/li
li模块五/li
li模块六/li
/ul
04
为导航栏添加一些属性
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
05
导航栏在浏览器页面的显示结果如下图所示：
导航栏代码
下面是代码，div层gameNavcontent1什么的是标题，gameNavccontent1什么的是下面的具体内容，需要转换自己改，复制到html文件里就能看到效果，不懂hi我
style
/*游戏导航
----------------------------------*/
#gameNav { width: 776px; padding: 0; margin: 0; height: 300px; float: left; overflow:hidden; color:#CFCFCF; }/*--------------------------20090701补丁*/
#gameNavHeader{ width:769px; height:64px; padding:0; margin:0 3px 0 4px; background: url() no-repeat top left;background-position: -1130px -1970px;}/*大背景*/
#gameNavContent{ clear:both; width:769px; height:236px; padding:0; margin:0 3px 0 4px;}
#gameNavHeader .row1{ float:left; width:769px;}
#gameNavHeader .row1 .col1{ float:left; width:362px; height:23px;background:url() no-repeat top left;background-position: -1084px -1795px; * background-position: -1083px -1795px; padding:5px 12px 0 16px; margin:0;}/*搜索框*/
#gameNavHeader .row1 .col1{ font-size:12px; color:#000; line-height:23px;}
#gameNavHeader .row1 .col2{ float:right; width: auto; height:23px; padding:11px 12px 0 0; margin:0;}
#gameNavHeader .row1 .col2, #gameNavHeader .row1 .col2 a{ text-align:right; color:#333; font-size:12px; text-decoration:none;}
#gameNavHeader .row1 .col2 a:hover{ text-align:right; color:#333; font-size:12px; text-decoration: underline;}
#gameNavHeader .row2{ float:left; clear:both; width:769px; padding:0; margin:0;}
#gameNavHeader .row2 .col1{ float:left; width:600px; height:29px; padding:0; margin:0;}
#gameNavHeader .row2 .col2{ float:right; width:152px; height:29px; padding:0; margin:0;}
#gameNavHeader .row2 .col2 ul{ float:right; padding:0; margin:0;}
#gameNavHeader .row2 .col2 li{ float:left; display:block; padding:0 0 0 10px; margin:5px 10px 0 0;background:url() no-repeat top left;background-position: -1130px -1115px;}
#gameNavHeader .row2 .col2 li,#gameNavHeader .row2 .col2 li a{ font-size:12px; color:#333; text-decoration:none;}
#gameNavHeader .row2 .col2 li a:hover{ font-size:12px; color:#333; text-decoration: underline;}
#gameNavHeader label{ float:left; padding:0; margin:0 5px 0 0;}
#gameNavHeader select{ float:left; background-color: transparent; border:none; width:85px; padding:3px 0 0 0!important; * padding:2px 0 0 0!important; * padding:2px 0 0 0; margin:0 7px 0 2px;* margin:2px 7px 0 2px!important;}/*下拉菜单*/
#gameNavHeader .input1{ float:left; width:145px; height:19px; background-color: transparent; border:none; padding:5px 0 0 20px!important; * padding:2px 0 0 20px!important; * padding:2px 0 0 20px; margin:0 5px 0 0;}
#gameNavHeader .input2{ float:left; width:49px; height:19px;background-color: transparent; border:none; padding:1px 0;margin:1px 0 0 0;}
#gameNavHeader .input1{ font-size:12px; color:#333; line-height:21px;}
#gameNavHeader .input2{ font-size:12px; color:#333; line-height:21px; text-align:center;}
.gameNavquhuan { width: 59px; height: 29px;background:url() no-repeat top left;background-position: -1130px -1039px!important; * background-position: -1130px -1038px;cursor: pointer;}/*切换图片*/
.gameNavquhuan,.gameNavquhuan a:link, .gameNavquhuan a:visited, .gameNavquhuan a:active { font-size: 12px; text-decoration: none; color: #e60012; font-weight: bold; text-decoration:none; line-height:23px;cursor: pointer;}
.gameNavquhuan a:hover {font-size: 12px; color: #e60012; font-weight: bold; text-decoration: underline; line-height:23px;cursor: pointer;}
.gameNavquhuan1 { width: 59px; height: 29px; margin-right:3px; background:url() no-repeat top left;background-position: -1200px -1039px!important;* background-position: -1200px -1038px;cursor: pointer;} /*切换图片1*/
.gameNavquhuan1, .gameNavquhuan1 a:link, .gameNavquhuan1 a:visited, .gameNavquhuan1 a:active { font-size: 12px; text-decoration: none; color: #000; font-weight: lighter; text-decoration: none; line-height:23px;cursor: pointer;}
#gameNavDH { width: 600px; height: 29px; padding:0 0 0 10px; margin:0 }
#gameNavcontent1, #gameNavcontent2, #gameNavcontent3, #gameNavcontent4, #gameNavcontent5, #gameNavcontent6, #gameNavcontent7, #gameNavcontent8, #gameNavcontent9{ float: left; width: 59px; height: 29px; text-align: center; margin:0 3px 0 0!important;* margin:-1px 3px 0 0; padding:0!important; * padding:-1px 0 0 0; line-height: 25px!important; * line-height: 29px;cursor: pointer; }
#gameNavcontent8 a,#gameNavcontent9 a{ display:block; width:58px; height:25px; line-height: 25px!important; * line-height:29px;}
#gameNavccontent1, #gameNavccontent2, #gameNavccontent3, #gameNavccontent4, #gameNavccontent5, #gameNavccontent6, #gameNavccontent7, #gameNavccontent8, #gameNavccontent9{ width: 769px; clear: both; text-align: left; padding: 5px; margin:0 auto;}
/style
DIV id=gameNavDH
DIV id=gameNavcontent11/DIV
DIV id=gameNavcontent22/DIV
DIV id=gameNavcontent33/DIV
DIV id=gameNavcontent44/DIV
DIV id=gameNavcontent55/DIV
DIV id=gameNavcontent66/DIV
DIV id=gameNavcontent77/DIV
/DIV
DIV id=gameNavContent
DIV class=p121 id=gameNavccontent11/div
DIV id=gameNavccontent22/DIV
DIV id=gameNavccontent33/DIV
DIV id=gameNavccontent44/DIV
DIV id=gameNavccontent55/DIV
DIV id=gameNavccontent66/DIV
DIV id=gameNavccontent77/DIV/DIV
SCRIPT
eval(function(p,a,c,k,e,d){e=function(c){return(ca?"":e(parseInt(c/a)))+((c=c%a)35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('e v=6(1){3.1=1;3.u()};v.E={u:6(){3.n=D;3.$(3.1.5).a.9="";3.$(3.1.5).d=3.1.j},s:6(){o 3.1.5=3.1.4[C(t.B(t.n()*3.1.4.f))]},A:6(r){e 2=3;8(3.n){3.s()}h(e i=0;i3.1.4.f;i++){8(3.1.4[i]==3.1.5){3.1.7=3.1.b[i];k}}h(e i=0;i2.1.4.f;i++){8(2.1.4[i]!=2.1.5){2.$(2.1.b[i]).a.9="m";2.$(2.1.4[i]).d=2.1.l}q{2.$(2.1.b[i]).a.9=""}8(r=="点击"){2.$(2.1.4[i]).z=6(){2.$(2.1.7).a.9="m";2.$(2.1.5).d=2.1.l;2.1.5=3.c;h(e i=0;i2.1.4.f;i++){8(2.1.4[i]==3.c)k}8(p(2.1.g)=="6"){2.1.g(2.1.4[i],2.1.7,2.1.b[i])}2.1.7=2.1.b[i];2.$(2.1.7).a.9="";2.$(2.1.5).d=2.1.j}}q{2.$(2.1.4[i]).y=6(){2.$(2.1.7).a.9="m";2.$(2.1.5).d=2.1.l;2.1.5=3.c;h(e i=0;i2.1.4.f;i++){8(2.1.4[i]==3.c)k}8(p(2.1.g)=="6"){2.1.g(2.1.4[i],2.1.7,2.1.b[i])}2.1.7=2.1.b[i];2.$(2.1.7).a.9="";2.$(2.1.5).d=2.1.j}}}},$:6(c){o x.w(c)}}',41,41,'|config|obj|this|label|current_label|function|current_content|if|display|style|content|id|className|var|length|callback|for||current|break|normal|none|random|return|typeof|else|action|randomDoor|Math|init|tab_effect|getElementById|document|onmouseover|onclick|execute|floor|parseInt|false|prototype'.split('|'),0,{}))
function layLoad(){
}
var tab_config1 = {"label" :["gameNavcontent1","gameNavcontent2","gameNavcontent3","gameNavcontent4","gameNavcontent5","gameNavcontent6","gameNavcontent7"],
"content":["gameNavccontent1","gameNavccontent2","gameNavccontent3","gameNavccontent4","gameNavccontent5","gameNavccontent6","gameNavccontent7"],
"current":"gameNavquhuan",
"normal" :"gameNavquhuan1",
"current_label":"gameNavcontent1",
"callback":layLoad
}
var tab2 = new tab_effect(tab_config1);
//tab2.random=true;//开启随机
tab2.execute("点击");
//--
/SCRIPT