04.粘滞定位.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=s, initial-scale=1.0"><title>导航条</title><link rel="stylesheet" href="./css/reset.css"><!-- <style>.nav li{width: 166px;height: 48px;float: left;line-height: 48px;text-align: center;}.nav li:hover{background-color: rgba(0, 0, 0, .3);}.nav a{font-weight: bold;text-decoration: none;color: #333;}</style> --><style>body{height: 3000px;}.nav{width: 1205px;height: 48px;background-color: #E8E7E3;margin: 100px auto;/* 粘滞定位(兼容性不是很好)- 当元素的position属性设置为sticky时,则开启了元素的粘滞定位- 粘滞定位和相对定位的特点基本一致,不同的是粘滞定位可以在元素到达某一位置时将其固定*/position: sticky;top: 20px;left: 20px;}.nav li{/* 设置li向左浮动,以使菜单栏横向排列 */float: left;/* 设置li的高度 */height: 48px;/* 将文字在父元素中垂直居中 */line-height: 48px;}/* 设置a的样式 */.nav a{/* 将a转换为块元素 */display: block;text-decoration: none;color: #777777;font-size: 18px;padding: 0px 39px;}/* 设置鼠标移入的效果 */.nav a:hover{background-color: #3f3f3f;color: #E8E7E3;}</style>
</head><body><!-- 创建导航条的结构 --><ul class="nav"><li><a href="#">HTML/CSS</a></li><li><a href="#">Browser Side</a></li><li><a href="#">Server Side</a></li><li><a href="#">Programming</a></li><li><a href="#">XML</a></li><li><a href="#">Web Building</a></li><li><a href="#">Reference</a></li></ul>
</body></html>

04.粘滞定位.html相关推荐

CSS之定位（粘滞定位）
粘滞定位: <!DOCTYPE html> <html><head><meta charset="UTF-8"><title& ...
定位的开启及特点（固定定位和粘滞定位）
目录一.固定定位 1.固定定位的开启 2.固定定位的特点 3.固定定位的应用场景二.粘滞定位 (一般用于页面导航的吸顶效果) 1.粘滞定位的开启 2.粘滞定位的特点一.固定定位 1.固定定位的开 ...
定位详解（固定定位，粘滞定位）
固定定位: 固定定位是绝对定位的一种特殊形式,类似于正方形是一个特殊的矩形.它以浏览器窗口作为参照物来定义网页元素.当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位. ...
为什么粘滞定位失效问题
今天写了一个粘滞定位天猫国际的粘滞定位一开始放最后的, 发现一直不行最后把侧边栏代码块放到最开始就可以粘滞了像这样 <body><div><aside>& ...
定位：相对定位，绝对定位，固定定位，粘滞定位（巨详细）
一.相对定位 (1)布局:文档流,margin,浮动,定位···· 定位:一种高级的布局的方式.你可以将任何的元素,放在页面任意的位置学习定位:如何开启,开启后特点 position样式名, 可选值 ...
CSS元素的定位（相对定位、绝对定位、固定定位、粘滞定位）
目录元素的定位相对定位绝对定位固定定位粘滞定位绝对定位的布局元素的定位相对定位当元素的position属性值设置为relative时则开启了元素的相对定位. 相对定位的特点: 1.元 ...
CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位
目录 1.定位布局 1.1.静态定位( Static positioning) 简单代码实现: - 1.2.什么是相对定位?( Relative positioning ) 简单代码实现: - 1 ...
CSS布局相关知识（四）：定位（相对、绝对、固定、粘滞）、层级
一.定位 position 定位是什么: 定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置怎么设置定位: 使用position属性来设置定位,可选值: static 默认值,元素 ...
粘滞位 File文件内容
t权限(粘滞位): 是'不可删除'权限,就是说即使某用户拥有这个文件的rwx权限,可以随意修改文件内容,但是就是不能删除,甚至不能修改文件名,只有root才行.t权限也可以直接用 chmod o+t ...

04.粘滞定位.html

04.粘滞定位.html相关推荐

最新文章

热门文章