[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. ...
随机推荐
- Vscode窗口被覆盖
用Vscode用的好好的,突然就发现窗口被覆盖了 解决办法如下:1.ctrl+shift+p 快捷键打开如下界面, 2.接着在搜索框中输入settings,点击首先项:打开设置(json) 3.再se ...
- bzoj4530 [Bjoi2014]大融合 子树信息 LCT
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4530/ 题解 想要求出一条边的负载那么就是要求出一个点为根的时候的另一个点的子树大小. 又因为 ...
- 【Luogu4191】[CTSC2010] 性能优化
题目链接 题意简述 求循环卷积意义下的 \(A(x)*B(x)^C\). 模数为 n+1 ,长度为 n. Sol 板子题. 循环卷积可直接把点值快速幂来解决. 所以问题就是要快速 \(DFT\),由于 ...
- 【UOJ#349】[WC2018] 即时战略
题目链接 题意 一开始已知一号点. 每次可以选定一个已知点和一个未知点,然后交互库会返回从已知点出发到达未知点路径上的第二个点. 要求在有限步之内知道每一个点. 次数要求: 链的情况要求 \(O(n) ...
- Spring Batch Hello World
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11995146.html Project Directory Maven Dependency < ...
- Linux学习-LVS跨网段DR模型和FWM多服务绑定
一.实验环境 系统:CentOS7.6 主机:5台 (虚拟机) 客户端1台:172.16.236.134/24 (NAT网卡),网关指向 172.16.236.185/24(路由服务器) 路由服务器1 ...
- 适用于填空题出题 的随机算法 PHP
<?php #寻找一个满足给定空数和题数要求的随机方案,事先需统计出每题空格数情况队列$m_blk,以及这些题分别有多少个$m_que. #以下算法将找到一个随机方案,若未找到将返回假值,如果不 ...
- P1092 虫食算——题解
题目传送 (据说官方正解为高斯消元,但用搜索也能过,这里就讲讲搜索算法吧.) 对于一道搜索题,首先考虑一下大体怎样搜索.因为要考虑加法的进位,所以从左往右搜索对于考虑进位来说十分麻烦,而从右往左搜索就 ...
- AGC030F - Permutation and Minimum
https://atcoder.jp/contests/agc030/tasks/agc030_f 题解 我们先把这个排列从\(1 \sim 2n\)表达出来,然后题面中的每一对数我们可以用一条线把他 ...
- 关于VMware 15搭建MacOS 10.14后无法播放在线视频和客户端视频的问题
最近在自己的电脑上搭建了MacOS10.14系统,搭建是成功了,但是发现一个很坑的事,看视频发现黑屏.就是那种只有声音,没有视频的问题,在多个浏览器上和客户端都是一样的.百度了下,总结有2种可能,一是 ...