博主最近在 白嫖万恶的资本 将博客部署到新的CDN上，所以在寻找免费的静态Web应用部署工具，发现了Google Firebase。...zup1nxeh.png 选择“添加项目”，输入您的项目名称，如果你喜欢，可以编辑您项目的唯一标识符（位于名称框的左下角） 8N1PLfg0.png 点击下一步，到询问是否启用分析页面，这里根据你个人的喜好来吧...5j0QsL4j.png 然后会进入到选择计划的页面（由于博主先前已经创建过了，并没有弹出），按照你的喜好来 （不会有人给Google交钱吧），选择完后整个项目就OK了。...o1m0xdWC.png 安装Hexo插件 因为Hexo在之前并没有将博客发布到Firebase的插件，博主就自己做了一个hexo-deployer-firebase，但在使用前，还需要你安装Firebase...项目的标识符 例如博主的是这个样子： s4G3udAw.png 现在，你可以愉快的将博客发布到Google Firebase上啦~ 参考 Firebase - 维基百科 hexo-deployer-firebase
HTTP （ 超文本传输协议 ）是万维网 （ WWW ）上数据通信的基本协议; 通常在Web浏览器和存储Web文件的服务器之间。...本教程将向您展示如何在Linux中将HTTP重定向到Apache HTTP服务器上的HTTPS 。...在为您的域设置Apache HTTP到HTTPS重定向之前，请确保已安装SSL证书，并在Apache中启用mod_rewrite 。 有关如何在Apache上设置SSL的更多信息，请参阅以下指南。...如何为Apache创建自签名的SSL证书和密钥 如何安装我们在CentOS / RHEL上加密SSL证书7 如何安装我们在Debian / Ubuntu上加密SSL证书 使用.htaccess文件将HTTP...重定向到Apache上的HTTPS 对于这种方法，确保启用了mod_rewrite ，否则在Ubuntu / Debian系统上启用它。
（200-transformZ的值）就是视点和xy平面的距离（初始是屏幕的位置，此时transformZ的值为0）。 perspective属性用在容器上时，容器内每个元素的表现形式会不一样。...视口/视窗 (屏幕可见部分(去除书签栏等, 真正用于渲染页面部分), 非整个浏览器窗口) height：100% 铺满父容器的高度 height：100vh 铺满屏幕(viewport)的高度 "100vh...这些浏览器没有将 100vh 的高度调整为视口高度变化时屏幕的可见部分，而是将 100vh 设置为隐藏地址栏的浏览器高度。...结果是，当地址栏可见时，屏幕的底部部分将被切断，从而破坏了100vh的初衷。 如下所示： 当地址栏可见时，由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏， 因此屏幕底部被切断。...遗憾的是，仍然没有一种简单的方法可以让一个元素在不依赖javascript的情况下占据整个视口高度。 height: 100vh 是如此接近伟大，但考虑到它在移动设备上的局限性，最好避免它。
另一个需要考虑的重要问题是字体大小在大屏幕上的表现，例如 27” iMac。会发生什么呢?你猜对了，字体大小为95px左右，这是一个很大的值。...粘性布局(footer) 在大屏幕上，网站内容有时候很少，footer 没有粘在底部。这很正常，也不被认为是一种不好的做法。但是，还有改进的余地。考虑下面代表问题的示图： ?...在我的职业生涯中，我没有使用固定高度的页脚，因为在例如不同的屏幕尺寸下，此footer是不可行的。...从容器中挣脱出来 我注意到一个用例最适合编辑版面。 一个子元素，即使父元素的宽度受到限制，它也会占据视口100％的宽度。 考虑下面： ?...流行的顶部边框 你知道大多数网站使用的顶部边框吗？ 通常，它的颜色与品牌颜色相同，这会赋予一些个性。 ? 我们支持边框的初始值为3px。 如何将固定值转换为视口对象？下面是如何计算它的等效的vw。
是不是好麻烦，这样你可以到 PyPi 到上面去找找有没有已经写过这个内容，幸运的是，你真找到了，你找到了一个 package 叫做 yfinance。...那我们如何将自己开发的一个包上传到PyPI，供其它人使用呢。...2.Python包发布步骤 下面就开始介绍如何将自己的Python项目发布到PyPI 2.1 创建目录结构 创建一个测试项目，例如project_demo,在该项目下，创建一个待发布的包目录，例如：package_mikezhou_talk...它告诉PyPI我们的项目叫什么名字，是什么版本，依赖哪些库，支持哪些操作系统，可以在哪些版本的Python上运行，等等。...需要注意的是，PyPI上只允许一个版本存在，如果后续代码有了任何更改，再次上传需要增加版本号 author和author_email：项目作者的名字和邮件, 用于识别包的作者。
窗口管理知识图谱.png WMS的作用是窗口管理 不负责View绘制 既然是概述，我们不妨直观的思考一个问题，Activity是如何呈现到屏幕上的，或者说View是如何被绘制到屏幕上来的？...wmParams.width = 800; wmParams.height = 800; mWindowManager.addView(mview, wmParams); 以上代码可以在主屏幕上添加一个...，但是从直观理解上，比较像子窗口（其实不是）。...每个View都有自己的onDraw回调，开发者可以在onDraw里绘制自己想要绘制的图像，很明显View的绘制是在APP端，直观上理解，View的绘制也不会交给服务端，不然也太不独立了，可是View绘制的内存是什么时候分配的呢...，通知SF图层混排，之后，SF再将数据渲染到屏幕。
说的简单点就是，滚动屏幕时，网页中元素的位置会发生变化。但是不同的元素位置变化的速度不同，导致网页中产生分层元素的错觉。 看完上面这段，相信你对视差滚动的概念已经有了一个初步的了解。...background-attachment CSS 属性决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动。 它一共有三个属性: fixed: 键字表示背景相对于视口固定。...即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。 local: 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动。...scroll: 此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动。...()，这时不同子元素在 3D Z 轴方向距离屏幕的距离也就不一样; 3、滚动滚动条，由于子元素设置了不同的transform: translateZ()，那么他们滚动的上下距离translateY相对屏幕
（2）主体部分： div id="board">：定义一个容器，作为整个布局的基础。它具有sticky定位，使其在页面滚动时保持固定在顶部。...align-self: flex-end;：使元素在 Flex 容器中沿交叉轴（垂直方向）对齐到末尾。...min-width: 300px; min-height: 300px;：设置最小宽度和高度为 300px，防止在小屏幕上布局过小。...max-width: 100vh; max-height: 100vh;：设置最大宽度和高度为视口高度的 100%，防止在大屏幕上布局过大。...最终效果呈现： 页面加载时，#board容器固定在顶部，#pond和#background中的青蛙和荷叶元素按照设定的布局和样式显示，形成类似水果摆盘的效果。
作为一名软粉，看到新版鲍叔毒瘤，我当然是激动万分，抱着批判的态度，第一时间很不情愿的更新了我的服务器。 4月23日发布的 Ubuntu 20.04 是个 LTS 版。...下载地址：https://ubuntu.com/download Azure现状 Microsoft Store 几天前就提前上架了 WSL2 的 Ubuntu 20.04 LTS，Azure 国际版也毫不示弱...，第一时间上架了 Ubuntu Server 20.04 LTS（啥时候Windows能有这样的待遇就好了）。...apt autoremove 然后安装一个 Windows Update 组件，啊呸，Update Manager： sudo apt install update-manager-core Azure 上的...服务器重启完成后，就能在登录欢迎界面到 20.04 的字样了！ ? 你也可以使用命令来查看 Ubuntu 的版本： lsb_release -a ?
position:sticky是 CSS 3.0新增的定位属性，可以说是相对定位relative和固定定位fixed的结合，它主要用在对scroll事件的监听上，简单来说，在滚动过程中，元素距离其父元素的距离达到...sticky粘性定位的要求时，效果会变成fixed定位，固定到适当位置，下面给大家看一个效果。...div class="img-box"> div> div class="...Apple Watch是苹果公司于2014年9月公布出来的智能手表，分为运动款、普通款和定制款三种，采用蓝宝石屏幕，有银色，金色，红色，绿色和白色等多种颜色可以选择 Apple Watch是苹果公司于2014年9月公布出来的智能手表，分为运动款、普通款和定制款三种，采用蓝宝石屏幕，
在 Github 上看到一些不错的仓库，想要贡献代码怎么办？ 在 Github 上看到一些有用的网站，想部署到自己的服务器怎么办？ 。。。 我想很多人都碰到过这个问题。...如果要贡献代码，之前我的做法通常是将代码克隆到本地，然后在本地的编辑器中修改并提交 pr。...如果想部署到自己的服务器，之前我的做法通常是克隆到本地，然后本地修改一下部署的配置，最后部署到自己的服务器或者第三方的云服务器（比如 Github Pages）。...而现在随着云技术的普及，我们「没有必要将代码克隆到本地进行操作，而是直接在云端编辑器中完成修改，开发，并直接部署到云服务器」。今天就给大家推荐一个工具，一键将代码部署到云服务器。 什么是一键部署？...你可以通过右键在新的「无痕模式」中打开来验证。你会发现右键在新的无痕模式中打开是无法正常部署的。 这有什么用呢？ 一键部署意味着部署的门槛更低，不仅是技巧上的，而且是成本上的。
postion定位法 看到小标题应该知道我要say什么了吧 div class="container">div> .container{...这里扩展了解下vh在移动端设备上的部分“特性” 我们依然设置body 100vh的情况下，分别打开微信内置浏览器、Safari浏览器、Google浏览器 从效果图不难看出，在Safari浏览器、Google...浏览器中100vh这个方案都是不完美的，都出现了滚动条，并不能达到我们预期的可视区域的满屏高度。...作为一个cv高手，借助搜索引擎我们了解到，Safari把网址栏与工具栏算进了100vh中，是第一个通过选择根据屏幕的最大高度为vh定义固定值来更新其实现的移动浏览器之一，而后Google浏览器也效仿它。...变量 为了防止旋转屏幕功能的使用，我们需要监听窗口调整大小事件来更新我们创建的--vh值 window.addEventListener("resize",()=>{ let vh=(document
上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。 1024程序员节，160就能买到400的书，红宝书 5 折 网格布局是现代CSS中最强大的功能之一。...但是，最终按我们网络区域的顺序来展示。 image.png 下一步是使我们的页面具有响应性。我们希望在更大的屏幕上使用不同的布局。CSS网格使得处理媒体查询和创建响应式布局变得非常容易。...假设我们有两列，它们均匀地占据了屏幕上的可用空间。...但是，如果我们想要其中一个在200px到500px之间呢?我们的列可以适应不同的屏幕尺寸，但其中一个永远不会大于500px或小于200px。 对于这些类型的场景，我们使用minmax函数。...image.png 今天就跟大家分享到这里，感谢大家的观看，我们下期再见！
但是，最终按我们网络区域的顺序来展示。 下一步是使我们的页面具有响应性。我们希望在更大的屏幕上使用不同的布局。CSS网格使得处理媒体查询和创建响应式布局变得非常容易。...假设我们有两列，它们均匀地占据了屏幕上的可用空间。...但是，如果我们想要其中一个在200px到500px之间呢?我们的列可以适应不同的屏幕尺寸，但其中一个永远不会大于500px或小于200px。 对于这些类型的场景，我们使用minmax函数。...然而，第二列的最小值可以是100px，对于更大的屏幕，它将覆盖屏幕的其余部分。 如何使用 repeat 函数？ 我们讨论一下元素中的重复模式。我们如何处理它们?...今天就跟大家分享到这里，感谢大家的观看，我们下期再见！
flex-wrap 默认情况下，项目都排在一条线（又称"轴线"）上。...如何进行布局 通过给父容器 的 宽度 和 高度 都 100% ， 铺满整个屏幕， 父容器 display 为 flex, 使用justify-content: center; 决定 子元素在主轴的方向上怎么显示...，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时代，瀑布流可以提供很好的用户体验，通过结合下拉刷新，上拉加载进行数据的懒加载等操作...瀑布流的特点： 等宽不等高，高度是动态识别图像的高度来显示的。 它会当计算当前屏幕的宽度，来显示对应的个数，一行排满的话，它会找到第一行高度最低的继续排列第二行，依次类推排列。...JS实现方法： 固定死图片的宽度， 图片放置到一个数组中， 浏览器根据动态识别宽度来判断当前显示多少项，然后遍历数组，将url 放置 src 中， 下拉刷新数据，重新调取请求数据接口，push到数组中
感觉有帮助的小伙伴请点赞鼓励一下~ 两栏布局 左侧宽度固定。 右侧自适应。 浮动法 左栏做浮动。 右栏添加 margin-left 。...圣杯布局 头部(header)和尾部(footer)各自占领屏幕所有宽度。 中间的部分(container)是一个三栏布局。 三栏布局两侧宽度固定，中间部分自动填充整个区域。...">this is footerdiv> grid 这种布局也要按照 left ，middle， right 的顺序书写 html； 先定义好 header 和 footer 的样式...">this is footerdiv> 双飞翼布局 双飞翼布局和圣杯布局很类似，不过是在 middle 的盒子里又插入一个盒子，通过调整内部盒子的 margin 值，而非父容器的...div> 其它知识点 圣杯布局由于设置了相对定位，所以当 left 原来的位置和 right 的位置产生重叠时，由于浮动的原因一行放不下就会换行，当页面小于最小宽度时布局就会乱掉
在我们现实生活中，常见的长度单位有米（m）、厘米（cm）、毫米（mm），每一种单位的长度都是固定，比如 5cm，你走到任何地方 5cm 的长度都是一致的例如：div class="container"...常见的绝对单位长度如下：这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用 cm。惟一一个经常使用的值，估计就是 px(像素)。...上面的单位中，常用的有 em、rem、vw、vh，其中 vw 和 vh 代表的是视口的宽度和高度，例如：div class="container">div>*{ margin: 0; padding...: 0;}.container { width: 50vw; height: 100vh; background-color: pink;}在上面的代码中，我们设置了容器的宽度为 50vw，也就是占视口的一半...，而高度我们设置的是 100vh，就是占满整个视图。
❞ 两个效果 翻盖效果 一个是屏幕慢慢打开的效果，在屏幕打开的过程中，「电脑图片」 是在屏幕中固定不动的，直到打开完毕或者关闭完毕的时候再让 「电脑图片」 随着滚动条滚动。 ?...粘性定位 sticky 可以简单的认为是 「相对定位 relative」 和 「固定定位 fixed」 的混合，元素在跨越指定范围前为相对定位，之后为固定定位。...之后，元素将固定在与顶部距离 0px 的位置。...❞ 缩放图片 缩放图片到屏幕这个动画我们可以用两个方式实现，一个是 「滚动视差」 实现，一个是 canvas 在滚动过程中实时渲染图片。 开始之前我们来看一下没有放大的之前图，如下： ?...它由两张图片组成，屏幕中显示的图片，他与 电脑外壳 的上间距是 18px，当放大了之后，图片与电脑外壳图片 的上边距应该是 18 * 放大比率。 电脑外壳图片，如下： ?
大家好，又见面了，我是你们的朋友全栈君。...介绍 vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; ---- 我的案例： 元素没有设置高度的时候， 我写移动端界面的时候用100vh会把屏幕撑大到需要滑动框...我是怎么解决的呢：在最外层包一个div,给这个div设置height：100vh 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/136340.html原文链接：https
当视口高度变化时，这些浏览器没有将100vh的高度调整为屏幕的可见部分的高度，而是将100vh设置为隐藏了地址栏的浏览器的高度（其实就是100vh高度没变，但是地址栏那块把内容顶出去了一块）。...结果导致：当地址栏可见时，屏幕的底部将被切断，从而破坏了开始时100vh的目的。...例如，尝试在移动浏览器上打开wordsheet.io/demo/V3Y。无论地址栏是否可见，屏幕都将是视口的高度。...此外，在页面首次加载时将高度固定为适当的大小，可以防止在使用该网站的过程中地址栏隐藏，从而带来尴尬的屏幕调整大小体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。100vh是如此接近伟大（greatness），但考虑到它在移动设备上的局限性，最好避免使用它。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
