[Web 前端] 020 css 定位之绑定定位
绑定定位
- 少废话,上例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body style="height:3000px"> <!-- 为了可以滚动页面 -->
<div class="box">返回顶部</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</body>
</html>
div{
height: 500px;
background: #edd094;
border: 2px solid;
box-sizing: border-box;
}
.box{
width: 100px;
height: 50px;
text-align: center;
line-height: 40px;
background: cyan;
/*绑定定位
以浏览器窗口为参考进行定位
主要用在:固定在头部的导航栏 返回顶部,网页的侧边栏菜单 */
position: fixed;
bottom: 20px;
right: 20px;
}
- 效果截图
[Web 前端] 020 css 定位之绑定定位的更多相关文章
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- 1+x 证书 Web 前端开发 css 专项练习
官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/
- Web前端面试指导(十):元素定位有哪些?
本题点评 在web前端中,元素定位是必须掌握的,是网页制作的必备技能,也是衡量是否为一个合格的web前端开发的标准之一,在网页设计中,很多地方都需要使用定位,例如菜单弹出,提示信息层等都需要定位.所以 ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- web@前端--html,css,javascript简介、第一个页面(常用标签简介)
1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...
随机推荐
- python文件读写详解
# Python3 open(file, mode='r', buffering=-1, encoding=None, errors=None, newline=None, closefd=True, ...
- ubuntu下安装/升级软件
参考博客:https://blog.csdn.net/yjk13703623757/article/details/78945576 1.查看软件所有来源 ①.使用apt-cache madison列 ...
- pycharm快捷键的使用、内存管理、变量、数据类型、注释相关笔记
目录 pycharm快捷键的使用 变量 python内存管理 小整数池 引用计数 垃圾回收机制 循环引用 变量的三种打印形式 数字类型 字符串 注释 pycharm快捷键的使用 ctrl+c复制,默认 ...
- 【NOIP2013模拟联考6】选课
题目 你真的认为选课是那么容易的事吗?HYSBZ的ZY同志告诉你,原来选课也会让人产生一种想要回到火星的感觉.假设你的一周有n天,那么ZY编写的选课系统就会给你n堂课.但是该系统不允许在星期i和星期i ...
- Excel: assign label to scatter chart using specific cell values
ref: https://www.get-digital-help.com/custom-data-labels-in-x-y-scatter-chart/ Improve your X Y Scat ...
- Oracle的分页和MySQL的分页
Oracle的分页: select * from ( select rownum r,a from tabName where rownum <= 20 ) where r > 10 使用 ...
- springboot + 注解 + 拦截器 + JWT 实现角色权限控制
1.关于JWT,参考: (1)10分钟了解JSON Web令牌(JWT) (2)认识JWT (3)基于jwt的token验证 2.JWT的JAVA实现 Java中对JWT的支持可以考虑使用JJWT开源 ...
- POJ 2229 sumset ( 完全背包 || 规律递推DP )
题意 : 给出一个数 n ,问如果使用 2 的幂的和来组成这个数 n 有多少种不同的方案? 分析 : 完全背包解法 将问题抽象==>有重量分别为 2^0.2^1.2^2…2^k 的物品且每种物 ...
- MySql中报错:java.sql.SQLException: Incorrect string value: '\xF0\x9F\x90\xBB' for column
问题描述: java.sql.SQLException: Incorrect string value: '\xF0\x9F\x90\xBB' for column 'nickName' at row ...
- C++ STL bitset总结
基础用法 C++ Reference 神犇博客 余下的就是例题了 [BZOJ3687]简单题 考虑\(DP\),设\(f[i][j]\)表示前\(i\)个元素的算数和为\(j\)的子集个数,有: \[ ...