文档章节

网页导航定位的实现

大白0-0
 大白0-0
发布于 2015/01/15 20:57
字数 336
阅读 34
收藏 0

为了提高用户体验,现在的大部分网站都会在右侧添加回到顶部,反馈或者导航功能的链接,如:

百度新闻右侧

         

京东


那这些元素的定位是如何实现的呢?

其实很简单,以百度新闻的CSS样式为例:

#goTop {
    position: fixed;
    width: 54px;
    left: 50%;
    margin-left: 502px;
    bottom: 20px;
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop || document.body.scrollTop) +eval(document.documentElement.clientHeight || document.body.clientHeight) -305+'px');
    z-index: 998;
}

定位的原理主要是:

使用left:50%使元素左侧居中显示,然后设置左边距margin-left为主体div元素宽度的一半,即可实现贴着主体内容区定位。

当然定位的方式不止一种,上面的方式为设置left和bottom属性,也有网站使用bottom及right属性的,开源中国首页的回到顶部就是之一。

以上两种方法皆可,但我更换第一种,因为在浏览器变窄时,第二种会浮动在内容区之上,影响美观。

© 著作权归作者所有

大白0-0
粉丝 1
博文 10
码字总数 7381
作品 0
天津
程序员
私信 提问
[ Talk is Cheap Show me the CODE ] : jQuery Mobile

[ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏 Written In The Font “ Wirte less Do more” 学习内容: 页眉工具栏和页眉按钮 导航工具栏 页脚工具栏 定位工具栏 页眉工具栏和...

泥沙砖瓦浆木匠
2014/06/23
59
2
WEB前端工程师-练成

一、HTML和CSS基础 1.1 开发工具 1.1.1 前端开发工具技巧介绍-DW篇 1.1.2 前端开发工具技巧介绍-Sublime篇 1.2 HTML和CSS基础课程 1.2.1 HTML+CSS基础课程 1.3 网页布局 1.3.1 如何用CSS进行...

霞女
2015/12/02
89
0
请教个css 定位的问题

比如导航菜单,当网页在上半部分时 当网页滑到下面时,导航就紧贴上边界 我看好多网站都是这样的,比如淘宝等的搜索框,这是怎么定位的呢?

hphper
2014/07/23
129
5
selenium webdriver 元素定位问题

在用selenium webdriver,元素定位遇到一个问题。 我想定位网页左侧导航栏中的第二栏用户查询: 对应的html是这样的: 我用python写的元素定位: 找的是id为container下面的第二个h1标签的a...

songoex
2017/02/24
752
1
【京东商城首页实战2】导航条制作(1)

接下来,开始制作京东的导航条。效果如下图: 图1 业务分析: 1.通栏盒子,并且有背景颜色 2.有版心。 3.版心里面包含左右浮动的两个盒子。 4.有下拉效果的盒子后面,有三角形标志。 5.右边的...

sinat_34647836
2017/05/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

uni app 零基础小白到项目实战

$emit 子组件传给父组件$ref 父组件操作子组件 公用模板 uni-app全局变量的几种实现方法 const websiteUrl = 'http'const now = Date.now || function() { return new Date().getTime......

达达前端小酒馆
35分钟前
7
0
Tomcat是如何实现异步Servlet的

前言 通过我之前的Tomcat系列文章,相信看我博客的同学对Tomcat应该有一个比较清晰的了解了,在前几篇博客我们讨论了Tomcat在SpringBoot框架中是如何启动的,讨论了Tomcat的内部组件是如何设...

木木匠
今天
33
0
mysql中间件分享(Mysql-prxoy,Atlas,DBProxy,Amoeba,cobar,TDDL)

hello 各位小伙伴大家好,我是小栈君,这期我们分享关于mysql中间件的研究,也就是数据层的读写分离和负载均衡,希望能够在实际的应用中能够帮助到各位小伙伴。 下期我们将继续分享go语言的系...

IT干货栈
今天
16
0
OSChina 周一乱弹 —— 人生,还真是到处是意外

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @这次装个文艺青年吧 :#今日歌曲推荐# 分享lil peep的单曲《High School》 《High School》- lil peep 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
1K
14
Spring使用ThreadPoolTaskExecutor自定义线程池及实现异步调用

多线程一直是工作或面试过程中的高频知识点,今天给大家分享一下使用 ThreadPoolTaskExecutor 来自定义线程池和实现异步调用多线程。 一、ThreadPoolTaskExecutor 本文采用 Executors 的工厂...

CREATE_17
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部