前端网页css实现固定定位
来源:互联网 发布:哪里有冒险岛数据库 编辑:程序博客网 时间:2024/06/01 09:46
前端网页css实现固定定位
用css样式来实现固定定位,使用css的position属性;其中position的属性值有absolute(生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。)、fixed(生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。)在这里我们使用fixed值,来固定导航的盒子。
再通过a标签的herf属性和name属性搭配使用,将页面跳转至固定位置。
实现效果如下:
源代码如下:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> p{ line-height: 60px; } #dh{ border: 1px solid #000000; width: 100%; height: 50px; background-color: #FFFFFF; position: fixed;/*固定定位*/ top: 0px; } #dh2{ border: 1px solid #000000; background-color: #FFFFFF; width: 120px; height: 300px; position: fixed; left: 300px; top: 300px; } a{ display: block; margin: 20px; text-decoration: none; line-height: 50px; } </style> </head> <body> <div id="dh2"> <a href="#nz">女装</a> <a href="#man">男装</a> <a href="#dq">电器</a> <a href="">返回顶部</a> </div> <font color="red">这里是顶部</font> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <a name="nz"></a> <font color="red">这里是女装</font> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <a name="man"></a> <font color="red">这里是男装</font> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <p>这是文本内容</p> <a name="dq"></a> <font color="red">这里是电器</font> </body></html>
阅读全文
0 0
- 前端网页css实现固定定位
- CSS实现定位DIV固定在网页底部
- 用css实现的固定定位
- css absolute定位,让层固定在网页的底部
- css的固定定位
- css固定定位
- CSS定位之固定定位
- css 固定定位 相对定位 绝对定位
- css相对定位、绝对定位、固定定位
- css :相对定位,绝对定位,固定定位
- html+css网页前端实现(二)
- CSS固定定位{position:fixed}
- CSS基础之固定定位
- 什么是CSS中固定定位?
- 纯css实现固定在网页底部菜单导航
- CSS的定位(绝对定位 相对定位 固定定位)
- CSS的定位(绝对定位 相对定位 固定定位
- css定位(相对定位、绝对定位、固定定位)
- 用户注册
- 干货来袭,java用户登录与注销(前台+后台 框架springboot)
- 【LCA模板题】poj 1330 Nearest Common Ancestors
- 音标游戏阶段总结
- [9-01]git常见问题
- 前端网页css实现固定定位
- Oracle归档模式-设置及归档日志设置
- 微信公众号开发入门教程
- LNMP一键包安装后解决MySQL无法远程连接问题
- 头条号原创视频怎么做?快速制作高质量原创视频的思路和操作方法
- springmvc 异步请求(json + ajax + jquery)
- 新人报道,请多关照
- Xcode 9 代码折叠,全局折叠,快捷键
- XML第一节