CSS如何实现网页导航栏置顶
以下即为我的问题点:期待达到的效果导航栏实现置顶,并且能够自动适应;当前问题点导航栏无法置顶!请高手指教!谢谢!...
以下即为我的问题点:期待达到的效果导航栏实现置顶,并且能够自动适应;当前问题点导航栏无法置顶!请高手指教!谢谢!
展开
3个回答
展开全部
1、在电脑上打开软件,新建一个html文件,在head部分,编写css样式, list-style-type: none;是除掉导航前面默认带的点,li a,li a.active ,li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。
2、在html页面body里面编写导航栏内容,可以看到是通过<ul><li><a href=""></a></li></ul>的格式来实现导航。
3、在浏览器中打开页面,可以看到已经制作成了一个比较美观的垂直导航栏。
4、将鼠标滑向垂直导航栏的列表项上,可以看到列表项颜色发生变化。
5、也可以制作成水平导航栏,overflow: hidden;代码的意思是超出高度和宽度的部分自动隐藏,float: left;使导航栏水平显示。
6、在浏览器中打开页面,可以看到制作出美观的水平导航栏,已经置顶了。
展开全部
一般来讲实现导航栏指定是采用绝对定位的方式。示例代码如下:
<div class="nav">这里是导航所在的DIV容器。</div>
CSS代码:
.nav{
position:fixed; /* 绝对定位,fixed是相对于浏览器窗口定位。 */
top:0; /* 距离窗口顶部距离 */
left:0; /* 距离窗口左边的距离 */
width:100%; /* 宽度设置为100% */
height:40px; /* 高度 */
z-index:99; /* 层叠顺序,数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
}
设置方式,原理及大致内容请看css代码注释。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
你那个问题应该就是要在写样式的时候先初始化一下 写上*{margin:0;padding:0;border:0;}把所有的之都初始为0,你在火狐firebug里面,应该就是多了一个margin或者padding
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询
广告 您可能关注的内容 |