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风格的转换是不合适的,因为它可以在任意类型之间转换,比 ...
随机推荐
- css如何简单设置文字溢出盒子显示省略号
1.单行文本溢出显示省略号单行文本溢出显示省略号,必须满足三个条件:(1)先强制一行内显示文本white-space:nowrap;(默认 normal自动换行)(2)超出的部分隐藏overflow: ...
- javascriptRemke之类的继承
前言:es6之前在js中要实现继承,就必须要我们程序员在原型链上手动继承多对象的操作,但是结果往往存在漏洞,为解决这些问题,社区中出现了盗用构造函数.组合继承.原型式继承.寄生式继承等一系列继承方式, ...
- Golang通脉之接口
接口(interface)定义了一个对象的行为规范,只定义规范不实现,由具体的对象来实现规范的细节. 接口类型 在Go语言中接口(interface)是一种类型,一种抽象的类型. interface是 ...
- pagelayout中边界灵敏度动画时间kv
<PageLayoutWidget>: # 默认是50dp 设置边界 border:'100dp' # 默认哪一页 page:2 # 设置翻页动画及持续时间 anim_kwargs:{'d ...
- Noip模拟54 2021.9.16
T1 选择 现在发现好多题目都是隐含的状压,不明面给到数据范围里,之凭借一句话 比如这道题就是按照题目里边给的儿子数量不超过$10$做状压,非常邪门 由于数据范围比较小,怎么暴力就怎么来 从叶子节点向 ...
- 用Python画如此漂亮的专业插图 ？简直So easy！
本文整理自知乎问答,仅用于学术分享,著作权归作者所有.如有侵权,请联系我删文处理.多多转发,多多学习! 方法一 强烈推荐 Python 的绘图模块 matplotlib: python plottin ...
- 疯狂Java基础Day1
--每过一遍基础,都是一次提升! 太多遗忘了,慢慢补... 推一个Java学习教程--->b站搜:狂神说Java系列(排序完毕) 推荐原因:讲的不错,会涉及到底层,也会讲讲面试. 一.注释 主要 ...
- 编写POC时候的几个参考项目
0x01. 背景 在编写pocsuite时候,会查阅大量的文件,poc利用方式. 1. pocsuite是什么 Pocsuite 是由知道创宇404实验室打造的一款开源的远程漏洞测试框架.它是知道 ...
- 数值的整数次方 牛客网 剑指Offer
数值的整数次方 牛客网 剑指Offer 题目描述 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方 class Solution: #run ...
- 第07课 OpenGL 光照和键盘（1）
光照和键盘控制: 在这一课里,我们将添加光照和键盘控制,它让程序看起来更美观. 这一课我会教您如何使用三种不同的纹理滤波方式.教您如何使用键盘来移动场景中的对象,还会教您在OpenGL场景中应用简单的 ...