母版页左侧菜单栏及顶端导航栏设置成固定栏

登录

本帖最后由 houtenghui 于 2018-3-6 14:23 编辑

在咱们群里技术人员的帮助下（非常感谢），解决了母版页左侧菜单栏及顶端导航栏设置成固定，滚动页面的时候左侧和顶端保持不动。

大概就是这样一个构成，分成5部分。左上角可以放Logo，左侧为菜单栏，顶端中间部分为导航条（这部分内容暂时还在实现），右上角为登录栏，中间就是页面显示区域了。
一定记住一点就是所有单元格不要设置背景色！！不要设置背景色！！不要设置背景色！！（如需要设置背景色可以在css文件中设置）
1.去掉所有单元格默认的背景色（如果有的话）
2.上传css文件

3.在css文件中已经给除页面区域以外的4个部分写好了代码，选择对应的单元格设置对应的css类名。如下
logo部分的类名为logopanel，
4.重点讲一下css文件的代码
1）position属性是规定元素的定位类型。可能的值absolute，fixed，relative，static，inherit。咱们这里用到的是fixed，即是生成绝对定位的元素，就是说是相对于浏览器窗口来定位，可以用top，bottom，right，left来设置。
2）z-index属性可以理解为三维坐标里面的z坐标，也可以理解成ps里面的层，它的值是绝对数值，哪个的值越大它的层级越高，即是置于最顶层，在顶端三个区域，我将三个都设置成一样大（z-index:100000;），让三个区域处于同一层级。
3）相对位置
Logo用的logopanel类，处于左上角------left:0px; top:0px;
导航条用的是menu_h类，处于顶端中部------top:0px；
登录用的是loginpanel类，处于右上角------right:0px; top:0px；
菜单栏用的是menu_v类，处于左侧------left:0px; bottom:0px;
4）宽度
Logo与菜单栏同宽，在活字格中菜单栏为6列，每列为20px，因此设置logopanel的width为120px
导航栏及登录栏的width设置成auto（这个地方我是经过很多尝试，找不到合适的，最终auto显示最合适，如果谁有更好地设置可以给我说）
5）其他不重要的
box-shadow为阴影，background背景等等其他的属性大家有兴趣可以尝试，很多都可以百度

大家有什么自己的见解也可以给我说，非常感谢！
另外，再次感谢活字格的工作人员！