代理加盟 2019全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

您现在的位置: 秀站网 > 站长学院 > 建站教程 >

网页头部导航,侧栏下拉时固定

来源:未知 发布时间:2019-03-30热度: ℃我要评论
网页设计中,特别是自适应布局,如果页面过长,用户下拉或滚动鼠标时,头部导航就看不到了。可以设计网页导航固定在页面顶部,让用户方便点击;设置页面侧栏固定的原因主要有: ①主栏内容很长,侧栏较短,用户滚动浏览时,侧栏就空白了,考虑布局时就需要固定侧栏全部...

崖柏造假过程模板秀站淘宝店开业,好礼送不停

? ? ? ?网页设计中,特别是自适应布局,如果页面过长,用户下拉或滚动鼠标时,头部导航就看不到了。可以设计网页导航固定在页面顶部,让用户方便点击;设置页面侧栏固定的原因主要有:

①主栏内容很长,侧栏较短,用户滚动浏览时,侧栏就空白了,考虑布局时就需要固定侧栏全部或部分内容。

②强调主要内容,方便用户进行扩展阅读,增加PV。主要内容一般指主要分类、TAG标签、推荐文章(产品)、询盘下订单等。

网页设计顶部下拉固定

一直固定在页面顶部

CSS样式主要部分

导航HTML部分

 

下拉或滚动才固定

? ? ? ?把下面代码放在之前,在不产生冲突的情况下,放在页面代码的最下面也没什么问题,就是加载快慢的区别而已。


? ? ? ?说明:需要固定的p可以用id或者class进行选择,如红色部分,向上、下滚动会在相应的p增加或去掉class="fixed",如橙色部分。注意变量名要一一对应,请自行修改即可。

CSS样式主要部分

.fixed{position:fixed;top:0;z-inden:999}
.fixed_a{position:fixed;top:0;z-inden:999}

HTML部分

header">

tag_list">

侧栏部分内容

? ? ? ?最终效果参考本站首页,根据实际情况p选择用id还是class,如果是class,那这一类的都会被固定,而id是唯一一个。

本文地址:https://www.xiuzhanwang.com/news/1371.html

    责任编辑:秀站网

    发表评论

    评论列表(条)