新闻中心

thinksaas如何固定顶部导航栏

作者 / 时间 2017-06-21 18:19:37

thinksaas是一款很受欢迎的源码,在thinksaas的默认模板中,首页在往下滚动时顶部的导航栏是随之滚动的,而我们经常访问的一些网站像新浪微博,在往下滚动时他的顶部是固定不动的。为了提升网站的体验度,我们也可以将自己的thinksaas网站设置成这种效果。无忧主机小编教您三分钟学会thinksaas导航栏的固定。 在没有设置固定导航栏的效果如图1所示: 图1 设置顶部导航栏为固定的方法非常简单,只需要两句代码就可以完成。找到顶部导航栏的层叠样式表文件,在源代码中可以看到该导航栏的css文件是在theme/sample下的base.css文件中,找到该文件后用文本编辑器打开: 1、找到.header{},在大括号里面添加 position:fixed;z-index:999999; 修改前后对比: 修改前

.header {
	background: #49a5de;
	width: 100%;
	border-radius: 0px;
	margin:0;
}
修改后
.header {
	position:fixed;
	z-index:999999;
	background: #49a5de;
	width: 100%;
	border-radius: 0px;
	margin:0;
}
如图2所示,完成此步骤后就实现了对顶部导航栏的固定。 图2 2、固定了顶部导航栏这个层,会导致下一个层被挡住的现象,当再次访问首页时,会发现下面一个导航标签栏已经被顶部导航栏遮住了,如图3所示。 图3 这时需要设置下面这个层的属性,同样是在这个base.css文件,找到.appnav{},把里面的padding: 0;改为padding:40px 0px 0px 0px; 如图4所示, 图4 修改前后对比: 修改前
.appnav {
	width: 100%;
	margin: 0 auto;
	padding:0;
	overflow: hidden;
	background: #fafafa;
	border-bottom: solid 1px #eee;
	margin-bottom: 10px;
}
修改后:
.appnav {
	width: 100%;
	margin: 0 auto;
	padding:40px 0px 0px 0px;
	overflow: hidden;
	background: #fafafa;
	border-bottom: solid 1px #eee;
	margin-bottom: 10px;
}
图5 保存后再次浏览网页发现刚才的出现的异常消失了,如图5所示,thinksaas的固定导航栏就设置好了。  

本文地址:https://www.51php.com/thinkphp/25100.html

1
1
1
1
1
1
1