首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我想把带有类"height_mark“的div从网页底部每隔980px放一次。

您可以使用CSS和JavaScript来实现将带有类"height_mark"的div从网页底部每隔980px放一次的效果。

首先,您可以使用CSS来设置div的样式和位置。将div的position属性设置为fixed,bottom属性设置为0,即可将div固定在网页底部。例如:

代码语言:txt
复制
.height_mark {
  position: fixed;
  bottom: 0;
}

接下来,您可以使用JavaScript来实现每隔980px放置一次div的效果。您可以通过计算网页的高度,然后根据980px的间隔动态地插入新的div。以下是一个示例的JavaScript代码:

代码语言:txt
复制
window.addEventListener('load', function() {
  var windowHeight = window.innerHeight;
  var divHeight = 100; // 假设div的高度为100px
  var gap = 980; // 间隔为980px

  var numDivs = Math.floor(windowHeight / gap); // 计算需要插入的div数量

  for (var i = 0; i < numDivs; i++) {
    var newDiv = document.createElement('div');
    newDiv.className = 'height_mark';
    newDiv.style.bottom = (i * gap + divHeight) + 'px';
    document.body.appendChild(newDiv);
  }
});

上述代码会在页面加载完成后,根据窗口高度计算需要插入的div数量,并动态地创建并插入这些div,每个div的位置会根据间隔和div的高度进行计算。

这样,带有类"height_mark"的div就会从网页底部每隔980px放置一次。

请注意,以上代码仅为示例,实际应用中您可能需要根据具体需求进行适当的调整和优化。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,建议您访问腾讯云官方网站,查找与云计算相关的产品和服务,以获取更详细的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

关于web前端大作业HTML网页设计——班级网页HTML+CSS+JavaScript

二、✍️网站描述 ⭐个人网页设计网站模板采用DIV CSS布局制作,网页作品有多个页面,如 :个人介绍(文字页面)、作品(图片列表)、个人技能(图文页面)、在线留言(表单页面)CSS样式方面网页整体采用左右布局结构...网站素材方面:计划收集各大平台好看图片素材,并精挑细选适合网页风格图片,然后使用PS做出适合网页尺寸图片。...; border-bottom:1px dashed#d18f2f;">班级通知 国庆七天大假,10月1号~7号 国庆七天大假,10月1号~7号,小伙伴们请安排好时间... 国庆七天大假,10月1号~7号 查看更多...该专题为编程入门级别,适合刚学完语法小白练习,题目涉及编程基础语法,基本结构等,每道题带有练习模式和考试模式,可还原考试模式进行模拟,也可通过练习模式进行练习 。

1.7K20

前端三件套——看HTML及CSS

前言 码神也是开学快一个周了,好长时间没有更新了,由于刚来院长让去打蓝桥杯,感觉也算是一个机会吧,但是前端弄了一半多,还是比较喜欢,所以说想把前端弄完再重新回到高中刷算法时光,今天借着大学生心理课时间来更新一下...网页结构 网页结构,应该算是比较简单,虽然没有写过一个正经网页,目前主流网页结构是由Html,CSS,js(JavaSprint)写,大致结构如下: HTML 相信大家对HTML都并不陌生...,在映像里初中时候老师写第一个网页就是用HTML写,如今过去好多年了,也用HTML写网页了 ,哈哈。...用英文来解释的话是,div——division,表示分割分区,span意思是跨度,跨距 有一点区别 div在h5中一行只能一个,又称为大盒子 span可以多个,所以可以称为小盒子 CSS 不知道你们有没有见过化妆之前和化妆之后女生...区别就是 id定义一次只能调用一次,而class定义一次可以调用多次 用代码实现就是 <!

45710
  • body标签中相关标签

    学习p第一天开始,就要死死记住:p标签是一个文本级标签,p里面只能文字、图片、表单元素。其他一律不能。 错误写法:(把h系列标签放到p里) <!...div在浏览器中,默认是不会增加任何效果,但是语义变了,div所有元素是一个小区域。 div标签是一个容器级标签,里面什么都能,甚至可以div自己。...锚链接: 指给超链接起一个名字,作用是在本页面或者其他页面的不同位置进行跳转。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就是利用到了锚链接。...上图中解释: 第一个a标签,顶部这个锚名字叫做top。 然后在底部设置超链接,点击时将回到顶部(此时,网页url末尾也出现了#top)。...问题:网页在C盘,图片却在D盘,能不能插入呢? 答案: 用相对路径不能,用绝对路径也不能。 总结一下: 我们现在无论是在a标签、img标签,如果要用路径。

    4.6K10

    2017移动前端一些总结web前端 —— 移动端知识一些总结一.css部分二.js部分

    =device-width,initial-scale=1,user-scalable=no"/> 移动端加上这个标签才是真正自适应,不加的话,假如你把一个980px宽度(手机端常规是980)PC网页...放在手机上显示,倒也能正常显示不出现滚动条,不过是移动设备对页面 做了缩小优化,所以字体等都相应缩小了 (980px是相对于手机像素是超过1000px多一些就出现滚动条了,这个没具体研究)。..., width:0是关键(在这个坑里陷了好久,直到偶然一次设置了 width:0突然就好了,后来在天猫上也看到了同样设置 width:0)  10.使用 a 标签的话,尽量让 a 标签 block ...,尽量让用户可点击区域最大化  11.对两个 div使用了 transform之后, div z-index有时就会失效,遇到过,但没去认真探究,只是把 z-index提高就好了  12.在 iOS...CSS权重: style是 1000, id是 100, class是 10,普通如 li、 div和伪是 1,通用如 *是 0;  17.使用 rem时,设某个 div比如 height:3rem

    3.7K40

    CSS Sprites(精灵图)

    引入 当用户访问网站时,需要向服务器发送请求,网页每张图像都要经过一次请求才能展现给用户。...,这样当用户访问该页面时,只需向服务器发送一次请求,网页背景图像即可全部显示出来,通常情况这个由很多小背景图像合成大图被称为精灵图。...在观察html代码,发现他还有一个tbh-icon,通过Style我们可以看到tbh-icon引入了一张背景图片,打开背景图片链接 如下,一张图片包含了很多个小背景图,这便是【精灵图】 很多大型网页都使用了这种技术...> 效果图 制作精灵图 制作精灵图就是将小图标图一个大背景中即可...,这里就不一一阐述,精灵图制作遵循一下原则 1.精灵图必须为透明背景 2.精灵图中个各个小图应该有一定间距 3.精灵图底部应该预留位置方便以后添加 4.精灵图存储为png格式

    95420

    ❤️创意网页:超简单好看HTML5七夕情人节表白网页(表白直接拿去用) HTML+CSS+JS

    ✨前言: 最近天气一直在下雨,本来是像写一个有着下雨效果网页也不知道怎么写着写着就开始表白了(●'◡'●)废话不多说我们直接看网页效果展示好了,有下雨效果网页也写了都在专栏里有兴趣小伙伴可以去看看...图片看不清我们下面有视频展示(图片这块大小超过5M所以传输时候就会有点问题) ✨视频展示 爱心——命运之光(表白) ✨源代码 这里先直接放上源代码需要直接复制粘贴即可 这里我们先源代码为就是让即便没有学过代码小伙伴们...`setInterval(getTimeElapsed, 1000);`:每隔一秒调用一次`getTimeElapsed`函数,更新时间流逝显示。 16....`setInterval(createSakura, 200);`:每隔200毫秒调用一次`createSakura`函数,创建樱花效果。...这段代码实现了一个带有下雪背景效果和爱心网页,同时显示了两个倒计时效果,一个是指定日期开始计算时间流逝,另一个是每秒钟刷新下雪效果。

    2.4K20

    Alist宝塔部署及其美化

    碎碎念 在过去,Alist一直作为本地服务运行,它承载着托管各种杂七杂八网盘重任,比如收集文件用坚果云,存放资源蓝奏云,课程视频百度云。最近才意识到,这个好像可以在服务器上部署!...因此,决定将我Alist部署到服务器上,这不仅提升了访问便捷性,也让服务更加稳定可靠,也会在上面分享一些代码文件,但是因为带宽原因,不会放大于10MB文件,防止给大家带来不好体验。...在AList管理页面,点击底部按钮进入。左侧菜单栏中,选择“存储”选项,这里是添加本地文件夹或远程云盘地方。...文件预览设置 在“预览”设置中,您可以指定哪些类型文件可以直接在网页上显示内容。例如,如果您希望分享源码文件,可以在设置中添加对.css文件支持。...版权声明:作为一个资源站,免责声明是很重要(虽然也没打算什么东西)主要是能凑字数,可以避免很多没必要麻烦,为网站或服务提供者设定责任边界,减少法律风险,并告知用户使用时应注意事项。

    67110

    如何使用 CSS 设置和自定义水平和垂直滚动条

    创建带有导航项目的导航栏为了创建导航栏,我们将使用HTML nav元素。...截图中可以看出,侧边栏底部看起来不像设置在底部。这是因为内容比其容器高度长。在下一节中,我们将学习如何防止导航项目列表显示在侧边栏之外。d)....c) 一次性样式所有滚动条a). 样式特定滚动条。有一种简单方法可以为网站上不同滚动条设置特定样式。这涉及通过设置滚动条容器来添加样式。您可以通过标签名称或名称选择容器并向其分配样式。...以下代码片段描述了如何一次性地应用滚动条样式到整个网站所有滚动条。...这意味着它们将适用于整个网站所有滚动条。正在参与2024腾讯技术创作特训营第五期有奖征文,快来和我瓜分大奖!

    1.6K00

    HTML语法规范

    回车自动补全 ctrl+/,自动生成注释标签 元素 定义: HTML中元素指的是开始标签到结束标签所有代码,或者开放标签和闭合标签 实体 在网页中,编写多个空格,会被浏览器自动解析为一个空格 在html...h2~h6重要性一次降低 搜索引擎先搜素title标签,然后就会搜索标题标签,h1到h6 对于搜索引擎来说,h1重要性仅次于title,搜索引擎检索完title,会立即查看h1中内容 h1标签非常重要...和c++main函数一样,一个页面中只能有一个 网页底部 可以是网页某一个部分底部,所以footer标签不只有一个 表示网页导航 标签里面<...例如header里面三个section 没有语义,就是用来表示一个区块 上面的,,,,,都可以用div来代替 段落标签 用于表示内容中一个自然段,使用p标签来表示一个段落 中间段落 p标签中文字,默认会独占一行,并且段和段之间会有一个间 但是如果没有p标签则会出现在一行

    13010

    文本标签「程序员培养之路第二天」

    是二级标题 是三级标题 是四级标题 是五级标题 是六级标题 • 标签在每个页面中通常只出现一次...Theora 视频编码和 Vorbis 音频编码 Ogg 文件 – MPEG4 = 带有 H.264 视频编码和 AAC 音频编码 MPEG 4 文件 – WebM = 带有 VP8 视频编码和...• rows :多行输入域行数 第六节、其他语义化标签 盒子 • 俗称为盒子,division(分割) • 在网页制作过程过中,可以把一些独立逻辑部分划分出来,放在一个  • HTML5新增语义化标签,定义网页头部 • 主要用于布局,分割页面的结构 底部信息  • HTML5新增语义化标签,...定义网页底部 • 主要用于布局,分割页面的结构 导航 • HTML5新增语义化标签,定义一个导航 • 主要用于布局,分割页面的结构 文章 •

    93520

    学生静态HTML个人博客主页【Web大学生网页作业成品】HTML+CSS+JavaScript

    网站素材方面:计划收集各大平台好看图片素材,并精挑细选适合网页风格图片,然后使用PS做出适合网页尺寸图片。...div id="mian"> 主页 家乡 爱好 <a href...喜欢在空余时间看书和听音乐,从中减轻平时学习中带来压力,还可以学到书本中学不到知识,开拓自己眼界、积极并不断进取是做事原则,谦虚和谨慎是优点,懂得不断生活和学习中提高和完善自己、为人诚实...该专题为编程入门级别,适合刚学完语法小白练习,题目涉及编程基础语法,基本结构等,每道题带有练习模式和考试模式,可还原考试模式进行模拟,也可通过练习模式进行练习 。

    1.8K31

    前端学习(1)~html标签讲解(一)

    交互角度描述页面的行为。相当于人动作,让人有生命力。...其他一律不能。 块级标签 :和 div和span是非常重要标签,div语义是division“分割”; span语义就是span“范围、跨度”。...div在浏览器中,默认是不会增加任何效果,但是语义变了,div所有元素是一个小区域。 div标签是一个容器级标签,里面什么都能,甚至可以div自己。...比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就是利用到了锚链接。 首先我们要创建一个锚点,也就是说,使用name属性或者id属性给那个特定位置起个名字。...相对路径使用有一个前提,就是网页文件和你图片,必须在一个服务器上。 问题:网页在C盘,图片却在D盘,能不能插入呢? 答案: 用相对路径不能,用绝对路径也不能。

    1.3K42

    前端学习笔记之CSS网页布局 CSS网页布局

    CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1、什么是网页布局方式 布局可以理解为排版,我们所熟知文本编辑工具都有自己排版方式,比如word...,nodpad++等等 而网页布局方式指就是浏览器这款工具是如何对网页元素进行排版 #2、网页布局/排版三种方式 2.1、标准流 2.2、浮动流 2.3、定位流 二 标准流 标准流排版方式...>div 是标题 是段落 JetPropellSnake 是强调...,那么这个元素看上去就像被标准流中删除了一样,这个就是浮动元素脱标 #2、如果前面一个元素浮动走了,而后面一个元素没有浮动,那么垂直方向元素会自动填充,浮动元素重新归位后就会覆盖该元素  <!...元素浮动之后就会被标准流中扔到浮动流这个薄膜上,他在这个薄膜上位置还是以前在标准流位置上找同方向浮动元素进行贴靠,贴靠准则就是: (1)同一个方向上谁先浮动,谁在前面 (2)不同方向上左浮动找左浮动

    4.8K20

    前端性能优化之防抖与节流,大幅度降低你事件处理性能

    class="nav-bar">是导航栏 是内容1 是内容2 是内容3 是内容...4 是内容5 是内容6 是内容7 是内容8 ...) }, 500) } } 我们来解读一下这段代码: 我们在全局定义了一个用于存放定时器变量timer, 当我们在网页一次滚动页面时...可以很明显看到,利用时间戳节流以后,获取数据操作没有像初始那样频繁触发了,而是只要你在滚动,每隔一定时间进行一次触发,这个时间你是可以自己随意定义。...四、总结 简单做个总结吧,防抖和节流区别: 防抖是频繁触发执行变为最后一次才执行 节流是频繁触发执行变为每隔一段时间执行一次 结束语 相信你看完这篇文章,对防抖和节流有了很深印象了吧, 其实在你项目中

    1.6K20

    这30个CSS选择器,你必须熟记(上)

    CSS魅力就是让我们前端工程师像设计师一样进行网页设计,我们能轻而易举改变颜色、布局、制作出漂亮影音效果等等,我们只需要改几行代码,不需要借助任何软件,就能轻而易举实现,感觉就像魔法师一般,几秒钟就能得到一个想要效果...CSS为我们提供了选择器,这个酷酷魔法工具,让我们随意能够操作网页元素样式,CSS选择器众多,我们不可能一次性学完,但是这30个CSS选择器我们必须熟练记忆,可能有的同学觉得没必要学这么多,掌握了id...本篇文章起,给大家归纳了常用30个CSS选择器,希望通过总结,你能够喜欢上这些常用选择器,废话不多说,我们这篇文章将介绍前10个。...如若想把紧跟在h1元素段落上外边距去掉,你可以这么写: h1 + p { margin-top:0 } ?...例如想让带有title属性链接标签才会被匹配,没有title属性标签不会受到影响。

    66720

    Selenium+PhantomJS抓取数据

    Selenium在前面的一篇文章中说过是一种浏览器自动化测试工具,可以利用浏览器驱动去控制浏览器访问网站, 而模拟浏览行为抓取数据,这种方式可以抓到更多数据,但是效率不是很高,而且浏览器页面必须一直开着..."); 第三步先在浏览器中访问这个网址,观察网页DOM结构规律,去将所有的城市酒店列表地址所在元素获取到,也就是使用css选择器来筛选DOM结构   //锁定留个城市名模块            ...,而且切换字母时数据就是在一个页面中,所以可以一次性把所有的城市对应酒店介绍地址获取到,下面就可以去分别访问每个城市酒店列表,获取每个酒店更加详细信息 ,这里因为单线程比较慢,所以开了多线程去跑...,跑多线程时候原来想把每个城市建一个文本文件记录,但是多线程执行方式会是的有很多重复数据写入(坑了自己好久),所以就将数据分组,然后一组一个文本文件就好了 分组代码:   int p = 10;...class,来定位网站底部在哪里,然后控制div店家来切换到评论窗口    //切换到评论             driver.FindElementById("commentTab").Click

    28830

    Python带你薅羊毛:手把手教你揪出最优惠航班信息

    目前让脚本大约每隔 4 到 6 个小时就抓一次网页,虽然偶尔会出现一些小问题,但总体上还是比较 OK 。...保存成 Excel 表格文件,放在指定目录中 每隔 X 小时就重复一遍上面的每一步 通常情况下,每一个 Selenium 项目都是从一个网页驱动框架(webdriver)开始。...——毕竟你完全没必要每隔10分钟就搜索一次价格,对吧?...字符串: '//*[@id="wtKI-price_aTab"]/div[1]/div/div/div[1]/div/span/span' 这是实际使用定位“最便宜”结果 XPath 语句...而前面这种写法,它先定位一个 ID 是 wtKI-price_aTab 元素,然后找它第一个子 div然后往下找 4 层 div 以及 2 层 span …… 怎么说呢,它这次应该是会成功吧,但一旦网页层次有变化

    1.3K20

    案例中学习JavaScript》之酷炫音乐播放器(三)进度条音轨

    Paste_Image.png 这是上一次绘制好音乐播放器,本节也在它基础上进行完善。 进度条 对于进度条,它可以实时地展示音乐进度,相信大家都不陌生。...1.绘制进度条 我们在按钮区上面,也就是屏幕底部区域绘制进度条。...Paste_Image.png 我们希望让它紧挨着播放器屏幕底部,只需要给它一个定位就行了。关于元素定位,在之前章节中已经详细地讲过,所以在这里就不再赘述了。...6.gif 原理就是用了一个js定时器,每隔200毫秒就改变所有音轨高度,当然,高度是一个随机数值。...至于音轨和播放器对接,虽然已经写好,并且已经集成到musicBox里面,但是里面牵扯到比较多知识点,写起来需要很多时间,所以暂且先吧。

    1.5K60
    领券