• HTML中设置在浏览器中固定位置fixed定位


    之前的博文 HTML布局排版之制作个人网站的文章列表,中链接到的文章本身,也需要返回到列表主页,可在每个文章页面加导航条,也可以只加个返回到列表主页的链接。
    刚开始是想在博文最下方,加个返回文章列表的链接,但是有些博文很长,需要到最下方再返回比较麻烦,如果在每个页面加导航条也可以,但是长博文需要回到上面再点导航条,也有点麻烦。
    如果有个方法在页面滚动条滚动后,还能让某元素固定在浏览器的固定位置就比较方便了,查看了下css样式里的position定位,里面个fixed定位。

    把返回这个链接用fixed定位后,位置固定,无论浏览到文章的哪个地方,都可以直接找到返回链接,不用再拖滚动条,或者鼠标滑轮,感觉还是挺方便的。返回链接设置的比较小,也不会遮挡文章内容,可以挂在浏览器右侧效果感觉还可以。

    本文测试用的是一个图片,本来是用的给图片加上链接,但是由于这个返回图片做的不是很喜欢,考虑到以后需要更换,如果用img图片,给图片加链接,那么一旦更换图片,需要每个文章页面都要更换图片的src路径,比较麻烦,所以用了css样式背景图的方式,这样需要修改图片,只需要修改css里的样式路径,修改一次就行了。
    给需要的a标签设置样式。
    1.a标签设置宽高,给a标签加背景图。
    2.给a标签设置fixed定位,设置位置,例如top,right。

    页面代码:

    <div id="back"><a href="../p1.html"><img src="../images/fixedback.png"></a></div>

    样式代码:

    #back a{position:fixed;width:97px;height:62px;top:30px;right:5px;background-image:url(../images/fixedback.png);}

    图示:

  • 相关阅读:
    CI登录验证
    兼容所有浏览器的JS动态显示当前日期时间
    Active Record 数据库模式-增删改查操作
    数据库链接的增操作举例
    CI框架获取post和get参数 CodeIgniter
    PHP日期操作类代码-农历-阳历转换、闰年、计算天数等
    根据两点间的经纬度计算距离
    Session 类
    mysql 查询优化规则
    php获取文件夹下面的文件列表和文件夹列表
  • 原文地址:https://www.cnblogs.com/huaxie/p/11590704.html
Copyright © 2020-2023  润新知