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风格的转换是不合适的,因为它可以在任意类型之间转换,比 ...
随机推荐
- Miller-Rabin学习笔记
首先给出两个定理: 1.费马小定理 设p是一个素数,a是一个整数,且不是p的倍数,那么 \(a^{p−1} \equiv\ 1 \pmod p\) 2.二次探测定理 若\(p\)是素数,\(x\)是一 ...
- 通过ideviceinstaller获取IOS APP bundleId
查看ios设备udid: idevice_id -l 查看ios应用的bundleId: # 安装ideviceinstaller brew install ideviceinstaller # 查看 ...
- silky微服务快速开始
项目介绍 Silky框架旨在帮助开发者在.net平台下,通过简单代码和配置快速构建一个微服务开发框架. Silky 通过 .net core的主机来托管微服务应用.通过 Asp.Net Core 提供 ...
- VS2019、Qt5.12及QGis3.16开发常见问题汇总
在C++.Qt软件开发过程中,常常遇到一些编译错误或警告:本文将VS2019.Qt5.12.10和QGis3.16.10的二次开发过程常见的问题做了整理,供大家参考,也便于日后查阅.该内容分为四部分: ...
- RF射频传输，原理介绍，三分钟看懂！发射功率、接收灵敏度详解！
射频是什么? 官方说法:RF,Radio Frequency. (不懂的人,看了还是不懂,不过对于物联网行业的开发工程师.产品经理和项目经理,还是有需要对射频有个基础了解的.) 燚智能解读: 两个人, ...
- Python课程笔记（三）
1.python定义类.创建对象 class Myclass: # 定义Myclass类 def sum(self,x,y): self.x = x self.y = y return self.x+ ...
- 021中国大学生程序设计竞赛（CCPC）- 压力测试赛题解
A.Matrix 挺狗的一道题,从开始冲到最后都没冲出来,都没啥思路. 其实分开考虑每个数的贡献,这个想法也存在过,就是不知道该怎么计算,我们考虑我们单独考虑一个数字\(i(1\leq i\leq n ...
- tarjan知识点梳理
tarjan在图论中还是挺重要的.这里就简要的梳理一下tarjan的知识点. tarjan算法与无向图连通性. 首先说一下图中割点和桥的定义. 桥:也称割边,定义类似,在无向图中,若去掉某条边,导致整 ...
- hdu 5178 pairs（BC第一题，，方法不止一种，，我用lower_bound那种。。。）
题意: X坐标上有n个数.JOHN想知道有多少对数满足:x[a]-x[b]<=k(题意给)[a<b] 思路: 额,,,直接看代码吧,,,, 代码: int T,n,k; int x[100 ...
- [Vue warn]: Unknown custom element: <sapn> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <Evaluate> at src/views/index/
关于vue报错: [Vue warn]: Unknown custom element: <sapn> - did you register the component correctly ...