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风格的转换是不合适的,因为它可以在任意类型之间转换,比 ...
随机推荐
- 详解build-gradle文件
目录 gradle 两个build.gradle文件 最外层目录下的build.gradle文件 jcenter dependencies闭包 app目录下的build.gradle文件 com.an ...
- stm32驱动超声波模块
下面是关于stm32驱动超声波模块的一段代码,有需要的朋友可以复制参考,希望对大家能够有所帮助和启发. #define HCSR04_PORT GPIOB #define HCSR04_CLK RCC ...
- 字典树（Trie）
终于学会字典树了,真开心(然后就滚过来写总结了). 首先,字典树到底是个什么东西呢?请看下面这段话: 字典树,常被用来保存与查找大量的字符串,它利用了字符串之间的公共前缀来节约时间,但它的空间花费较大 ...
- 分析pcap包（基于UDP）
//c代码#include <stdlib.h> #include <stdio.h> #include <pcap.h> #include <string. ...
- hdu 1158 Employment Planning（DP）
题意: 有一个工程需要N个月才能完成.(n<=12) 给出雇佣一个工人的费用.每个工人每个月的工资.解雇一个工人的费用. 然后给出N个月所需的最少工人人数. 问完成这个项目最少需要花多少钱. 思 ...
- Vue3学习（十）之 页面、菜单、路由的使用
一.前言 好几天没更文了,周末真的太冷了,在家躺了一天不爱动.今天给暖气了,相对不那么冷了,就可以继续更文了. 由文章标题不难看出,就是实现点击菜单跳转的意思,我写的很直白了,哈哈. 二.实现点击菜单 ...
- Piakchu之RCE漏洞
一.Ping(远程系统命令执行) 首先正常输入一个ip,查看页面的返回值.发现有乱码,但是能看出执行了ping命令. 查看源代码,可以看到只是对操作系统进行了判断,而对输入内容是否为ip地址并没有判断 ...
- java中的泛型设计
1.为什么要使用泛型程序设计 ArrayList<String> files = new ArrayList<>() 等价于 var files = new ArrayList ...
- .NET 开源工作流: Slickflow流程引擎高级开发(九) -- 条件事件模式解释及应用
前言:在流程流转过程中,有时候需要条件模式的支持,这样可以使得流程流转更加灵活多变.比如在业务变量满足一定的条件时,可以启动特定配置的流程(或者位于主流程内部的子流程).本文主要描述条件启动和条件中间 ...
- ELK集群之elasticsearch（3）
Elasticsearch-基础介绍及索引原理分析 介绍 Elasticsearch 是一个分布式可扩展的实时搜索和分析引擎,一个建立在全文搜索引擎 Apache Lucene(TM) 基础上的搜索引 ...