前端网页css实现固定定位
2017-09-26 15:16
676 查看
前端网页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>这是 b15a 文本内容</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>
相关文章推荐
- CSS实现定位DIV固定在网页底部
- 用css实现的固定定位
- 纯CSS实现左侧伸缩固定和头部固定布局 之 css布局定位再学习
- css absolute定位,让层固定在网页的底部
- 一、静态网页的实现 1.运用CSS,让导航菜单在右侧绝对定位显示。 2.运用锚点,实现导航定位。
- 用CSS实现拉动滚动条时固定网页背景不动
- 纯css实现固定在网页底部菜单导航
- 响应式网页中,如何只用CSS实现div的高和宽保持固定比例
- (div+css)上下固定中间自适应高度网页布局的实现(FF,IE)
- 前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应
- 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位
- DIV始终固定在网页右下角位置的CSS实现方法,返回顶部功能
- footer固定在网页底部且居中,超过一屏自动撑开(最简单的CSS实现)
- (div+css)上下固定中间自适应高度网页布局的实现
- 前端CSS - 相对定位,绝对定位,固定定位
- 用CSS实现定位DIV绝对位于网页底部
- CSS,实现IE6固定定位及解决"抖动"的原理
- (div+css)上下固定中间自适应高度网页布局的实现(FF,IE)
- CSS行为expression轻松实现IE6无抖动固定定位
- CSS实例(六):实现网页固定大小三态图形按钮简单方法