写静态页面——粘性定位练习

0、效果:

在这里插入图片描述


1、HTML代码:为了简洁采用内部样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{height:3000px;}/* 粘性定位的前提是有滚动条 */div p{width: 100%;height:50px;margin: 0;/* 首先是相对定位,top是0,left是0,到达临界值,就是绝对定位,top是0,left是0 */position: sticky;top:0; left:0;}</style>
</head>
<body><div><p>这是第一句诗</p><br> <!-- p是行类元素,通过br转化为块元素 --><p>这是第二句诗</p><br><p>这是第三句诗</p><br><p>这是第四句诗</p><br></div></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/444296.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么恢复回收站清空的文件?这3个方法收藏好!

“着急&#xff01;想问问大家平常如果不小心清空了回收站&#xff0c;有什么比较好的方法可以恢复回收站里的重要文件吗&#xff1f;” 在日常生活中&#xff0c;我们可能会将一些重要的文件或数据误删进回收站&#xff0c;甚至清空了回收站。这些文件可能包含重要的工作文档、…

交通模拟软件为市政交通发展再加速

城市规划人员利用 DYNAMEQ 开发埃德蒙顿道路模型路线图&#xff0c;推动更智能的未来规划 满足快速发展城市的出行需求 埃德蒙顿市是加拿大阿尔伯塔省的首府。在过去的 10 年中&#xff0c;埃德蒙顿市人口增长了 25&#xff05;&#xff0c;是加拿大发展最快的城市。城市规划人…

【Oracle云】使用 boto3 访问 OCI 对象存储 (AWS S3协议兼容)

在现代云计算环境中&#xff0c;S3&#xff08;Simple Storage Service&#xff09;协议已经成为云对象存储的事实标准。它提供了简单、可扩展、高度耐用的存储解决方案&#xff0c;得到了广泛应用。Oracle Cloud Infrastructure&#xff08;OCI&#xff09;秉承着开放性和灵活…

【PyQt】02-基本UI

文章目录 前言一、首先了解什么是GUI&#xff1f;二、初学程序1.界面展示代码运行结果 2.控件2.1按钮展示代码运行结果 2.2 纯文本和输入框代码运行结果 3、重新设置大小 -resize4、移动窗口-move()5、设置界面在电脑中央5.1 代码运行结果 6、设置窗口图标代码运行结果 7、布局…

电脑用的视频编辑软件有哪些 视频剪辑软件排行榜 视频剪辑软件推荐 视频剪辑培训学习 视频剪辑制作自学 电脑视频剪辑需要什么配置

电脑视频剪辑软件这么多&#xff0c;到底哪些比较好用&#xff1f;下面就让我们以十大电脑视频剪辑软件排行榜来细数好用的软件。另外&#xff0c;电脑视频剪辑需要什么配置&#xff1f;本文也会给大家从内存、CPU等参数上介绍&#xff0c;并推荐好用的电脑设备。 一、十大电脑…

springboot140体育馆使用预约平台的设计与实现

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

Go map 读写性能优化 - 分片 map

基本在所有的编程语言中&#xff0c;都有 map 这种数据结构&#xff0c;Go 语言也不例外。 我们知道 Go 是一门对并发支持得比较好的语言&#xff0c;但是 map 并不支持并发读写。 比如&#xff0c;下面这种写法是错误的&#xff1a; var m make(map[int]int) var wg sync.Wa…

人工智能时代:AI提示工程的奥秘 —— 驾驭大语言模型的秘密武器

文章目录 一、引言二、提示工程与大语言模型三、大语言模型的应用实践四、策略与技巧五、结语《AI提示工程实战&#xff1a;从零开始利用提示工程学习应用大语言模型》亮点内容简介作者简介目录获取方式 一、引言 随着人工智能技术的飞速发展&#xff0c;大语言模型作为一种新…

海外多语言盲盒App开发:机遇与挑战并存

随着全球化进程的加速&#xff0c;跨文化交流成为人们日常生活和工作中的重要部分。在此背景下&#xff0c;多语言盲盒App的开发成为了一个具有巨大潜力的市场。本文将探讨海外多语言盲盒App开发的机遇与挑战&#xff0c;以及如何应对这些挑战。 一、海外多语言盲盒App开发的机…

【SpringBoot系列】自动装配的魅力:Spring Boot vs 传统Spring

IT行业有哪些证书含金量高? 文章目录 IT行业有哪些证书含金量高?强烈推荐前言区别项目配置&#xff1a;依赖管理&#xff1a;内嵌服务器&#xff1a;开发体验&#xff1a; 实例Spring项目示例&#xff1a;Spring Boot项目示例&#xff1a; 总结强烈推荐专栏集锦写在最后 强烈…

关于JVM常见的十道面试题

方法区、永久代和元空间有什么区别&#xff1f; 方法区、永久区和元空间是Java虚拟机用于存储类信息的区域&#xff0c;它们在不同的Java虚拟机版本有所不同&#xff1a; 方法区&#xff1a;方法去是一块用于存储类的结构信息、常量、静态变量、即时编译器编译后的代码等数据…

酷开科技依托酷开系统新剧热播,引领潮流风向

随着科技的不断发展&#xff0c;智能电视已经成为了家庭娱乐的主流&#xff0c;是消费者居家休闲放松的好帮手。其中&#xff0c;作为国内智能电视操作系统领军者的酷开系统&#xff0c;一直致力于为消费者提供丰富的内容和贴心的体验。近日&#xff0c;酷开系统新剧热播&#…