We can take advantage of sticky positioning to keep a section header at the top of the page while the user scrolls. This is useful for neat categorisation of sections on the page.

  <dl>
<dt>Premier League</dt>
<dd>Brighton & Hove Albion 2 - 2 AFC Bournemouth</dd>
<dd>Burnley 1 - 2 Liverpool</dd>
<dd>Leicester City 3 - 0 Huddersfield Town</dd>
<dd>Stoke City 0 - 1 Newcastle United</dd>
<dd>Everton 0 - 1 Manchester United</dd> <dt>Championship</dt>
<dd>Bolton Wanderers 1 - 0 Hull City</dd>
<dd>Derby County 1 - 1 Sheffield United</dd>
<dd>Leeds United 0 - 0 Nottingham Forest</dd>
<dd>Norwich City 2 - 1 Millwall</dd>
<dd>Preston North End 2 - 3 Middlesbrough</dd>
<dd>Queens Park Rangers 2 - 1 Cardiff City</dd>
<dd>Sheffield Wednesday 0 - 3 Burton Albion</dd>
<dd>Sunderland 0 - 1 Barnsley</dd>
<dd>Aston Villa 3 - 0 Bristol City</dd> <dt>League 1</dt>
<dd>AFC Wimbledon 2 - 0 Southend United</dd>
<dd>Bristol Rovers 2 - 1 Portsmouth</dd>
<dd>Charlton Athletic 1 - 2 Gillingham</dd>
<dd>Fleetwood Town 1 - 2 Bradford City</dd>
<dd>Northampton Town 0 - 1 Wigan Athletic</dd>
<dd>Oxford United 3 - 1 Milton Keynes Dons</dd>
<dd>Peterborough United 1 - 1 Doncaster Rovers</dd>
<dd>Plymouth Argyle 1 - 0 Walsall</dd>
<dd>Rochdale 1 - 2 Blackpool</dd>
<dd>Rotherham United 1 - 1 Blackburn Rovers</dd>
<dd>Scunthorpe United 1 - 0 Bury</dd>
<dd>Shrewsbury Town 1 - 0 Oldham Athletic</dd>
</dl>
dl {
font-size: 30px;
} dt {
background-color: mediumseagreen;
position: sticky; /*sticky positioning*/
position: -webkit-sticky;
top:;
} dd {
padding: 20px 0;
}

[CSS3] Use Sticky Positioning for Section Headers的更多相关文章

  1. ConfigParser.MissingSectionHeaderError: File contains no section headers.

    今天使用ConfigParser解析一个ini文件,报出如下错误: config.read(logFile) File "C:\Python26\lib\ConfigParser.py&qu ...

  2. python ConfigParser读取配置文件,及解决报错(去掉BOM)ConfigParser.MissingSectionHeaderError: File contains no section headers的方法

    先说一下在读取配置文件时报错的问题--ConfigParser.MissingSectionHeaderError: File contains no section headers 问题描述: 在练 ...

  3. 【问题解决方案】CentOS7替换yum的问题:使用yum makecache出现File contains no section headers

    参考链接 CentOS7替换yum的问题:使用yum时出现File contains no section headers centos安装网络repo源及错误说明 一.centos替换yum的步骤 ...

  4. Android7.0后JNI库必须保留Section Headers

    此修改在官网的描述如下: Each ELF file has additional information contained in the section headers. These header ...

  5. css3 position:sticky

    最近在写一个小程序,项目中遇到一个需求:页面滚动到tab切换菜单时,菜单fixed到页面顶部: 实现方法: 使用小程序的onPageScroll事件,滚动到指定位置添加fixed样式: bug1:获取 ...

  6. raise missingsectionheadererror:file containe no section headers问题解决

    本人亲测,遇到这个问题,就换到管理员方式运行命令 因为太小白,所以这次重新装包的时候切换到D盘了,想着省一点儿C盘内存,结果,每次pip install安装的时候都是这个问题,中间还有什么反序列失败, ...

  7. CentOS7使用yum时File contains no section headers.解决办法

    本文转载于  https://blog.csdn.net/trokey/article/details/84908838 安装好CenOS7后,自带的yum不能直接使用,使用会出现如下问题: 原因是没 ...

  8. CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  9. CSS3与页面布局学习总结(四)——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

随机推荐

  1. notepad + +使用步骤

    原文地址:https://blog.csdn.net/so_geili/article/details/79317001#一-安装notepad 一. 安装notepad + +   notepad+ ...

  2. 【BZOJ3294/洛谷3158】[CQOI2011]放棋子(组合数+DP)

    题目: 洛谷3158 分析: 某OIer兔崽子的此题代码中的三个函数名:dfs.ddfs.dddfs(充满毒瘤的气息 显然,行与行之间.列与列之间是互相独立的.考虑背包,用\(f[k][i][j]\) ...

  3. python爬虫之处理验证码

    云打码实现处理验证码 处理验证码,我们需要借助第三方平台来帮我们处理,个人认为云打码处理验证码的准确度还是可以的 首先第一步,我们得先注册一个云打码的账号,普通用户和开发者用户都需要注册一下 然后登陆 ...

  4. iOS图片瘦身总结

    前言 最近在公司写了个小程序来为iOS应用中的图片瘦身,进而减小APP大小,减少用户下载时的流量. 瘦身是在一个专门为图片瘦身的网站进行的. 地址:https://tinypng.com 这个网站提供 ...

  5. [Android]异常4-javax.mail.AuthenticationFailedException

    javax.mail.AuthenticationFailedException 背景:JavaMail发送电子邮件 异常原因: 可能一>发件人帐号.密码有误 可能二>需要使用SSL安全认 ...

  6. [文章转载]-Java后端,应该日常翻看的中文技术网站 -江南白衣

    Java后端,应该日常翻看的中文技术网站 1.内容生产者 InfoQ 中文技术第一站,佩服霍老板,真金白银地为中国程序员们生产内容. ImportNew 专门面向Java的内容生产者兼聚合者,偶然也有 ...

  7. Centos安装smokeping教程

    Centos安装smokeping教程 一 .安装基本依赖包 ntpdate time.windows.com #64bit rpm -Uhv http://apt.sw.be/redhat/el6/ ...

  8. 扩增子图表解读5火山图:差异OTU的数量及变化规律

    火山图 Volcano plot 在统计学上,火山图是一种类型的散点图,被用于在大数据中快速鉴定变化.由于它的形成像火山喷发的样子,所以被称为火山图.和上文讲的曼哈顿图类似.   火山图基本元素 火山 ...

  9. GridView中字符串太长处理方式

    <asp:TemplateField HeaderText="子机构编号"> <ItemTemplate> <asp:Label ID="L ...

  10. CDR真实图片转水墨画效果制作教程

    CorelDRAW创造性滤镜组是最具有创造力的滤镜,使用里面的散开滤镜能够实现类似于水墨的表现手法,然后再结合图层的合并模式,让您的图片产生意想不到的视觉效果.本文将利用CorelDRAW软件中提供的 ...