导航:首页 > 万维百科 > 网页设计导航栏固定在顶端

网页设计导航栏固定在顶端

发布时间:2021-01-10 03:06:53

1、导航栏是网页设计中非常重要的元素。

设计网页(⊙_⊙)? 我觉得不是专业的设计出来也不怎么好看 建议去买个套装 我之前就是自己学设计 学了3天头都搞大了 结果后来我在淘宝网店和拍拍网店买的套装 真划算 30块钱就解决了 最重要的是节约了我的时间 弄那个不懂的人真的很费头脑 就拿PS来说吧 我学那个逐帧动画就学了很久 最后祝你好运!!!

2、在用DW做网页设计中如何使导航栏不被选项卡遮住

这个原因层的z-index属性导致,试着把图片轮播的z-index属性定义为-1

3、用dw制作网页上面导航栏的文字太靠上 怎么往中间调整 如图

用样式控制,可以使用行高,(line-height:24px;)
也可以使用内填充,(padding-top:5px;)

4、网页导航栏模块设计CSS控制默认第一个LI背影

像上面那种,就是定义ACTIVE属性,使其A的背影带色,每个页植入对应的ACTIVE,比如,首页专只属植入在第一个LI,第二个页只植入第二个LI。。。另外定义LI属性,使其HOVER的背影跟ACTIVE的背影色一样,这样子移动鼠标时对应的LI就显示背影色,点击后的背影色也不变。

5、网页设计中的导航栏问题

<style type="text/css">
<!--
ul,li{margin:0;padding:0;}
#nav {
height: 400px;
width: 200px;
border: 1px solid #000000;
}
#nav li {
list-style-image: none;
list-style-type: none;
background-color: #99FF00;
}
#nav li:hover{ background-color: #333333;cursor:pointer;}
-->
</style>
这样也能实现你要的效果,不过ie6好像不支持。如果用<a>的话会比较复杂

6、制作网页时 如何让导航栏始终保持在顶端不随滚动条拖动

.nav{
position: fixed;
}

7、网页设计 导航栏问题

这段代码比较经典的下拉菜单,不过没有美化,自己要美化的话,对列的项a a:hover的属性进行定义即可,比如定义一个好的背景等。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*
body
#nav
#nav li
#nav li a
#nav li a:hover
#nav li ul
#nav li.show ul
#nav li.show ul li
#nav li.show ul li a
#nav li.show ul ul
#nav li li.show ul
</style>
<script type="text/javascript">
function getCss(elem,property){
if(elem.style[property]){
return elem.style[property];
}
else if(elem.currentStyle){
return elem.currentStyle[property];
}
else if(document.defaultView && document.defaultView.getComputedStyle){
property = property.replace(/([A-Z])/g,'-$1').toLowerCase();
var s = document.defaultView.getComputedStyle(elem,'');
return s&&s.getPropertyValue(property);
}
else{
return null;
}
}
window.onload = function() {
var obj = document.getElementById("nav");
var lis = obj.getElementsByTagName("li");
var arr = new Array();
var uls = obj.getElementsByTagName("ul")[0];
for(var i=0; i<lis.length; i++){
if(lis[i].className.indexOf("firstLevel")>=0){
arr.push(lis[i]);
}
}
for(var i=0; i<lis.length; i++){
lis[i].style.width = obj.offsetWidth/arr.length - 1 + "px";
if(lis[i].className.indexOf("thirdLevel")>=0){
lis[i].parentNode.style.marginLeft = obj.offsetWidth/arr.length - 1 + "px";
lis[i].parentNode.style.marginTop = -parseInt(getCss(uls,"lineHeight")) + "px";
}
lis[i].onmouseover=function(){
this.className+=(this.className.length>0?" ":"") + "show";
}
lis[i].onmouseout=function(){
this.className=this.className.replace(new RegExp("( ?|^)show\\b"), "");
}
}
}

</script>
</head>

<body>
<ul id="nav">
<li class="firstLevel">
<a href="#">一级栏目</a>
<ul>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
<li>
<a href="#">二级栏目</a>

</li>
<li>
<a href="#">二级栏目</a>

</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一级栏目</a>
<ul>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一级栏目</a>
<ul>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一级栏目</a>
<ul>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一级栏目</a>
<ul>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
</ul>
</li>

</ul>
</body>
</html>
网页设计 导航栏问题

8、急急急!!!网页设计,导航栏总是浮在弹出的页面上,这个问题如何解决?需要添加什么代码或者修改什么吗?

如果给个链接,我能在2分钟内解决。

1,先了解position:relative; position:absolute;属性,弹框必须版加的属性是absolute,如果导航权栏也有这个属性,需要用z-index控制,让弹框比他大就可以,比如导航栏是z-index:50,一般弹出窗是z-index:999,这样写还可以避免其他权值比他高。

2,还有一种情况,就是导航是flash制作的,这样只要在插入页面swf的时候,加上<param name="wmode" value="transparent">就可以了

9、网页制作中,dreamweaverCS4中如何冻结顶端的导航菜单?就是下拉时,顶端菜单栏一直在最上方不消失

两种可能:
1、利用js捕获窗口拖动的距离,并动态赋值给导航菜单的div,使其跟着走。
2、导航菜单是一个frameset框架,所以拖动scroll的时候,frame元素固定在最上层。
3、如果你不懂js,建议使用第2种方法

与网页设计导航栏固定在顶端相关的知识