wordpress单页导航,seo服务外包价格,枣庄手机网站制作,北京广告本系列可作为前端学习系列的笔记#xff0c;代码的运行环境是在HBuilder中#xff0c;小编会将代码复制下来#xff0c;大家复制下来就可以练习了#xff0c;方便大家学习。 HTML系列文章 已经收录在前端专栏#xff0c;有需要的宝宝们可以点击前端专栏查看#xff01; 点… 本系列可作为前端学习系列的笔记代码的运行环境是在HBuilder中小编会将代码复制下来大家复制下来就可以练习了方便大家学习。 HTML系列文章 已经收录在前端专栏有需要的宝宝们可以点击前端专栏查看 点赞关注不迷路您的点赞、关注和收藏是对小编最大的支持和鼓励 系列文章目录
CSS- 1.1 css选择器
CSS- 2.1 实战之图文混排、表格、表单、学校官网一级导航栏
CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性
CSS- 4.1 浮动Float
CSS- 4.2 相对定位position: relative
CSS- 4.3 绝对定位position: absolute学校官网导航栏实例
CSS- 4.4 固定定位fixed 咖啡售卖官网实例 目录
系列文章目录
前言
一、固定定位fixed详解
1、固定定位fixed的基本概念
2、固定定位的核心特性
1. 相对于视口定位
2. 脱离文档流
3. 定位属性
3、固定定位的常见应用场景
1. 固定导航栏
2. 返回顶部按钮
3. 浮动广告或通知
4. 视频播放器控件
4、固定定位的注意事项
1. 层叠上下文
2. 移动设备上的行为
3. 键盘弹出影响
4. 内容重叠问题
5. 打印样式
5、固定定位与其他定位方式的比较
6、最佳实践建议
二、代码实例
1.练习代码实例如下 2.咖啡售卖官网 代码实例如下
总结 前言 小编作为新晋码农一枚会定期整理一些写的比较好的代码作为自己的学习笔记会试着做一下批注和补充如转载或者参考他人文献会标明出处非商用如有侵权会删改欢迎大家斧正和讨论 一、固定定位fixed详解
1、固定定位fixed的基本概念
固定定位position: fixed是CSS中一种特殊的定位方式它使元素相对于浏览器视口viewport进行定位即使页面滚动元素也会保持在视口的固定位置。固定定位元素会脱离正常的文档流不占据原始文档空间。
2、固定定位的核心特性
1. 相对于视口定位
固定定位元素的位置始终相对于浏览器窗口而不是文档或任何父元素即使页面滚动元素也会保持在屏幕上的相同位置
2. 脱离文档流
与绝对定位类似固定定位元素不占据文档中的空间其他元素会忽略它的存在就好像它从文档中消失了一样
3. 定位属性
使用top、right、bottom、left属性来精确控制位置示例
css
.fixed-element {position: fixed;top: 20px;right: 20px;width: 150px;background: rgba(0,0,0,0.7);color: white;padding: 10px;text-align: center;
} 3、固定定位的常见应用场景 1. 固定导航栏
html
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle typetext/css.fixed-nav {position: fixed;top: 0;left: 0;width: 100%;background: #333;color: white;padding: 15px 0;z-index: 1000;}.content {margin-top: 60px; /* 为固定导航栏留出空间 */padding: 20px;}/style/headbodynav classfixed-navullia href#首页/a/lilia href#产品/a/lilia href#关于/a/lilia href#联系/a/li/ul/navdiv classcontentp哈哈哈/pp哈哈哈/pp哈哈哈/pp哈哈哈/pp哈哈哈/pp哈哈哈/pp哈哈哈/pp哈哈哈/pp哈哈哈/pp哈哈哈/pp哈哈哈/ph1hhh /h1p哈哈哈/pp哈哈哈/pp哈哈哈/pp哈哈哈/pp哈哈哈/pp哈哈哈/pp哈哈哈/pp哈哈哈/pp哈哈哈/pp哈哈哈/pp哈哈哈/ph1hhh /h1!-- 大量内容... --/div/body
/htmlcss
.fixed-nav {position: fixed;top: 0;left: 0;width: 100%;background: #333;color: white;padding: 15px 0;z-index: 1000;
}
.content {margin-top: 60px; /* 为固定导航栏留出空间 */padding: 20px;
} 代码运行导航栏固定在上方 2. 返回顶部按钮
html
button classback-to-top↑ 返回顶部/button css
.back-to-top {position: fixed;bottom: 30px;right: 30px;padding: 10px 15px;background: #333;color: white;border: none;border-radius: 50%;cursor: pointer;opacity: 0;transition: opacity 0.3s;
}
.back-to-top.visible {opacity: 1;
}
通常配合JavaScript在滚动一定距离后显示
3. 浮动广告或通知
html
div classfloating-adp限时优惠立即购买/pbutton classclose-ad×/button
/div
css
.floating-ad {position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);width: 90%;max-width: 500px;background: #f8d7da;color: #721c24;padding: 15px;border-radius: 5px 5px 0 0;box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.close-ad {float: right;background: none;border: none;font-weight: bold;cursor: pointer;
} 4. 视频播放器控件
html
div classvideo-containervideo srcvideo.mp4 controls/videodiv classvideo-controls!-- 播放/暂停按钮、进度条等 --/div
/div
css
.video-controls {position: fixed;bottom: 20px;left: 50%;transform: translateX(-50%);background: rgba(0,0,0,0.8);padding: 10px 20px;border-radius: 30px;display: flex;align-items: center;gap: 15px;
} 4、固定定位的注意事项
1. 层叠上下文
固定定位元素会创建新的层叠上下文当设置了z-index值时示例
css
.fixed-header {position: fixed;top: 0;left: 0;width: 100%;z-index: 100; /* 确保在大多数内容之上 */background: white;
}
2. 移动设备上的行为
在iOS等移动设备上固定定位元素在滚动时可能会有轻微抖动某些移动浏览器可能会忽略fixed定位或表现不一致
3. 键盘弹出影响
在移动设备上当键盘弹出时固定定位元素的位置可能会受到影响
4. 内容重叠问题
固定定位元素可能会遮挡页面内容需要为下方内容留出空间示例
css
body {padding-top: 60px; /* 为固定导航栏留出空间 */
}
5. 打印样式
固定定位元素在打印时可能不会按预期显示需要特殊处理
5、固定定位与其他定位方式的比较
定位方式是否脱离文档流定位基准点滚动行为适用场景static (默认)否正常文档流随文档滚动默认布局relative否相对于自身原始位置随文档滚动微调元素位置absolute是相对于最近的已定位祖先元素随文档滚动创建浮动元素、工具提示等fixed是相对于视口不随文档滚动固定导航栏、返回顶部按钮sticky否(滚动时是)相对于最近的滚动祖先和视口滚动到阈值后固定粘性头部、侧边栏
6、最佳实践建议 考虑移动设备兼容性在移动设备上测试固定定位元素的行为特别是滚动和键盘弹出时 为下方内容留出空间使用margin-top或padding-top为固定定位元素下方的页面内容留出空间防止内容被遮挡 合理使用z-index确保固定定位元素在正确的层叠顺序中避免被其他元素遮挡 响应式设计在小屏幕上可能需要调整固定定位元素的位置或完全隐藏它们 性能考虑避免在固定定位元素上使用复杂的动画或效果这可能会影响滚动性能 可访问性确保固定定位元素不会干扰键盘导航或屏幕阅读器的使用
固定定位是创建现代网页布局中非常有用的工具特别适合需要始终可见的元素。然而由于其特殊的行为使用时需要特别注意其对页面布局和用户体验的影响。
二、代码实例
1.练习代码实例如下
!DOCTYPE html
htmlheadmeta charsetutf-8title定位-固定定位/titlestyle typetext/css.fix {width: 100px;height: 100px;background-color: #996600;border-radius: 40px 40px;position: fixed;bottom: 0px;right: 0px;}.fix a:link,a:visited {color: white;text-decoration: none;display: block;width: 100px;height: 100px;text-align: center;line-height: 100px;}/style/headbodydiv classfixa href../个人主题网站/index.htmlh3 aligncenter返回首页/h3/a/div/body
/html代码运行有一个固定的图标在页面右下角 2.咖啡售卖官网 代码实例如下
html
!DOCTYPE html
htmlheadmeta charsetutf-8title子绝父相/titlelink relstylesheet typetext/css href../css/cs4-6.css /style typetext/css.fix {width: 100px;height: 100px;background-color: #996600;border-radius: 40px 40px;position: fixed;bottom: 0px;right: 0px;}.fix a:link,a:visited {color: white;text-decoration: none;display: block;width: 100px;height: 100px;text-align: center;line-height: 100px;}.header {width: 900px;height: 220px;margin: 10px auto;}.showpic {width: 1100px;height: 230px;margin: 10px auto;}.container {width: 170px;height: 230px;/* border: 1px solid black; */position: relative;float: left;margin-right: 50px;}.container .coffee:link,.coffee:visited {text-decoration: none;color: #996600;}.container .tag {position: absolute;bottom: 1px;left: 40px;/* display: block;width: 170px;height: 35px;text-align: center; */}.container a:hover {opacity: 0.7;}/style/headbodydiv classheaderimg src../img/coffee.jpg/divdiv classnvgullia href#人才培养/aullia href#咖啡简介/a/lilia href#历史沿革/a/lilia href#季节限定/a/lilia href#产地漫游/a/li/ul/lilia href#菜单一览/aullia href#咖啡简介/a/lilia href#历史沿革/a/lilia href#季节限定/a/lilia href#产地漫游/a/li/ul/lilia href#体系设置/aullia href#咖啡简介/a/lilia href#历史沿革/a/lilia href#季节限定/a/lilia href#产地漫游/a/li/ul/lilia href#品牌特色/aullia href#咖啡简介/a/lilia href#历史沿革/a/lilia href#季节限定/a/lilia href#产地漫游/a/li/ul/lilia href#招聘启事/aullia href#咖啡简介/a/lilia href#历史沿革/a/lilia href#季节限定/a/lilia href#产地漫游/a/li/ul/lilia href#咖啡资源/aullia href#咖啡简介/a/lilia href#历史沿革/a/lilia href#季节限定/a/lilia href#产地漫游/a/li/ul/lilia href#科学成分/aullia href#咖啡简介/a/lilia href#历史沿革/a/lilia href#季节限定/a/lilia href#产地漫游/a/li/ul/lilia href#咖啡分布/aullia href#咖啡简介/a/lilia href#历史沿革/a/lilia href#季节限定/a/lilia href#产地漫游/a/li/ul/li/ul/divdiv classshowpicdiv classcontainera href# classcoffeeimg src../img/kbjn.jpgspan classtag阿拉比卡/span/a/divdiv classcontainera href# classcoffeeimg src../img/kbjn.jpgspan classtag罗布斯塔/span/a/divdiv classcontainera href# classcoffeeimg src../img/kbjn.jpgspan classtag利比里卡/span/a/divdiv classcontainera href# classcoffeeimg src../img/kbjn.jpgspan classtag埃克塞尔莎/span/a/divdiv classcontainera href# classcoffeeimg src../img/kbjn.jpgspan classtag蓝山/span/a/div/divdiv classshowpicdiv classcontainera href# classcoffeeimg src../img/kbjn.jpgspan classtag格拉纳达/span/a/divdiv classcontainera href# classcoffeeimg src../img/kbjn.jpgspan classtag铁皮卡/span/a/divdiv classcontainera href# classcoffeeimg src../img/kbjn.jpgspan classtag波旁/span/a/divdiv classcontainer classcoffeea href# classcoffeeimg src../img/kbjn.jpgspan classtag瑰夏/span/a/divdiv classcontainera href# classcoffeeimg src../img/kbjn.jpgspan classtag耶加雪菲/span/a/div/divdiv classfix/div/body
/htmlcss
/* 导航栏的父盒子 */
* {padding: 0px;
}
.nvg {width: 1376px;height: 42px;/* border: 1px solid black; */margin: 10px auto;
}
/* 一级二级导航栏框架 */
.nvg ul {list-style-type: none;
}
/* 一级导航栏 */
/* .nvgulli {list-style-type: none;
} */
.nvgulli:hover ul{display: block;
}
/* 二级导航栏 */
.nvgulliul {display: none;position: absolute;top: 42px;z-index: 999;
}
/* 每一个li */
.nvg ul li {width: 170px;height: 40px;background-color: #996600;border: 1px solid #CCCCCC;position: relative;float: left;
}
.nvg a:link,a:visited {text-decoration: none;font: 20px times new roman;color: white;display: block;width: 170px;height: 40px;text-align: center;line-height: 40px;
}
.nvg a:hover {background-color: #492002;
}
代码运行如下:
当鼠标悬停在图片上时清晰度变化
正常状态链接保持完全不透明opacity: 1悬停状态当鼠标移动到链接上时不透明度变为0.7产生淡出效果鼠标移出当鼠标移开时不透明度恢复为1
.container a:hover {opacity: 0.7;
} 总结
以上就是今天要讲的内容本文简单记录了固定定位fixed以及咖啡售卖官网仅作为一份简单的笔记使用大家根据注释理解
