HTML四种定位-粘滞定位
粘滞定位
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <link rel="stylesheet" href="../CSS/reset.css">
9 <style>
10 body{
11 height: 3000px;
12 }
13 .nav{
14 width: 1210px;
15 height: 48px;
16 background-color: #EBE7E3;
17 margin: 100px auto;
18 /*
19 粘滞定位
20 -当元素的position属性设置为sticky时则开启了元素的粘滞定位
21 -粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
22 */
23 position: sticky;
24 top: 0;
25 }
26 .nav li{
27 /* 水平设置 */
28 float: left;
29 /* 设置li的高度
30 height: 48px; */
31 /* 将文字在父元素中垂直居中 */
32 line-height: 48px;
33
34 }
35
36 .nav a{
37 text-decoration: none;
38 color: #777;
39 font-size: 18px;
40 /* 设置为块元素 整体可点 */
41 display: block;
42
43 padding: 0 39px;
44 }
45 .nav li:last-child a{
46 padding: 0 42px 0 41px;
47 }
48 .nav li:hover{
49 background-color: #3f3f3f;
50 color: #e8e7e3;
51 }
52 </style>
53 </head>
54 <body>
55 <ul class="nav">
56 <li><a href="#">HTML/CSS</a></li>
57 <li><a href="#">Browser Side</a></li>
58 <li><a href="#">Server Side</a></li>
59 <li><a href="#">Programming</a></li>
60 <li><a href="#">XML</a></li>
61 <li><a href="#">Web Building</a></li>
62 <li><a href="#">Reference</a></li>
63 </ul>
64 </body>
65 </html>
HTML四种定位-粘滞定位的更多相关文章
- HTML四种常见的定位-相对定位
相对定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&q ...
- android 定位的四种方式
[原文] 开发中对于地图及地理位置的定位是我们经常要用地,地图功能的使用使得我们应用功能更加完善,下面总结了一下网络中现有对于介绍android定位的4种方式,希望对大家有帮助: android 定 ...
- css四种定位
概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用.边偏移加定位定位模式才能构成一个完整的定义方式. 偏移量说明: 边偏移属性 描述 top: 顶端偏移,定义元素相对 ...
- CSS四种定位及应用
定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...
- HTML四种定位-固定定位
固定定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&q ...
- CSS定位:几种类型的position定位的元素
当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...
- 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
- Netty解决粘包和拆包问题的四种方案
在RPC框架中,粘包和拆包问题是必须解决一个问题,因为RPC框架中,各个微服务相互之间都是维系了一个TCP长连接,比如dubbo就是一个全双工的长连接.由于微服务往对方发送信息的时候,所有的请求都是使 ...
- C++四种类型转换方式。
类型转换有c风格的,当然还有c++风格的.c风格的转换的格式很简单(TYPE)EXPRESSION,但是c风格的类型转换有不少的缺点,有的时候用c风格的转换是不合适的,因为它可以在任意类型之间转换,比 ...
随机推荐
- qsort()函数的使用
函数声明 void qsort(void *base, size_t nitems, size_t size, int (*compar)(const void *, const void*)) 参数 ...
- pandas 取 groupby 后每个分组的前 N 行
原始数据如下: (图是从 excel 截的,最左1行不是数据,是 excel 自带的行号,为了方便说明截进来的) 除去首行是标题外,有效数据为 28行 x 4列 目前的需求是根据 partition ...
- Upload-labs通关指南(上) 1-10
Upload-labs 所有文章和随笔(随笔将不于csdn更新)将于我的个人博客(移动端暂未适配)第一时间更新. 一些网站存在文件上传接口,一旦存在这个接口就有可能存在漏洞. 文件上传漏洞的逻辑是将一 ...
- 【UE4 设计模式】装饰器模式 Decorator Pattern
概述 描述 动态地给一个对象增加一些额外的职责(Responsibility),就增加对象功能来说,装饰模式比生成子类实现更为灵活.是一种对象结构型模式. 套路 抽象构件(Component) 具体构 ...
- cunda 常用命令，删除，创建，换源
https://github.com/tensorflow/tensorflow/ conda create --name [虚拟环境名] python=3.7 创建一个环境 conda activa ...
- 5.31日 Scrum Metting
日期:2021年5月31日 会议主要内容概述:讨论草稿箱前后端接口,讨论账单页面设计. 一.进度情况 组员 负责 两日内已完成的工作 后两日计划完成的工作 工作中遇到的困难 徐宇龙 后端 文件导入功能 ...
- pyinstaller和wordcloud和jieba的使用案列
一.pyinstaller库 1.简介 pyinstaller库:将脚本程序转变为可执行(.exe)格式的第三方库 注意:需要在.py文件所在目录进行以下命令,图标扩展名是.ico 2.格式: pyi ...
- 2021.9.7考试总结[NOIP模拟49]
T1 Reverse $BFS$暴力$O(n^2)$ 过程中重复枚举了很多点,考虑用链表记录当前点后面可到达的第一个未更新点. 搜索时枚举翻转子串的左端点,之后便可以算出翻转后$1$的位置. $cod ...
- Windows平台编译器相关的几个预定义宏
WIN32 是在windows.h 中定义的宏,包含winodws.h则定义该宏 _WIN32/_WIN64跟windows平台有关的宏,_WIN32在windows 32位和64位下都有该宏,_ ...
- stm32学习心得体会
stm32作为现在嵌入式物联网单片机行业中经常要用多的技术,相信大家都有所接触,今天这篇就给大家详细的分析下有关于stm32的出口,还不是很清楚的朋友要注意看看了哦,在最后还会为大家分享有些关于stm ...