横向导航栏css代码-html5横向导航条代码 收藏 0

(首列冻结)通过CSS来实现HTML表格的固定首列和横向滚动效果

效果

.pure-table-wrapper-div:

这个类名应用于包裹表格的 div 元素。它的样式规则如下：

overflow-x: scroll;: 当内容宽度超出容器宽度时，显示水平滚动条。这允许用户在需要时水平滚动查看表格的所有列。

示例 HTML 结构：

<div class=\”pure-table-wrapper-div\”> <table class=\”pure-table\”> <!– 表格内容 –> </table> </div>

table.pure-table th:first-child, table.pure-table td:first-child: 这两个选择器分别针对 .pure-table 类的表格中的第一个表头单元格（<th>）和第一个数据单元格（<td>）。

它们定义的样式规则如下：

position: sticky;: 使用黏性定位。黏性定位元素在滚动时会根据设置的 top、bottom、left 或 right 属性值在特定位置 \”粘附\”。在本例中，由于定义了 left: 0;，这些元素会在左侧边缘粘附。 left: 0;: 在元素滚动到视口左侧边缘时使其粘附。与 position: sticky; 结合使用。

z-index: 1;: 设置元素的堆叠顺序。值越大，元素越靠前。在这种情况下，将第一个单元格设置为 z-index: 1 可确保它在其他表格单元格之上。

background-color: aliceblue;: 为匹配的单元格设置背景颜色。这可以增强视觉效果，使粘附的单元格与其他单元格区分开。

这段 CSS 代码的主要目的是实现表格的水平滚动，并固定第一列，使其在水平滚动时保持可见。同时，为第一列的单元格设置了背景颜色以增强视觉效果。

总的来说是：

使用 position: sticky; 来固定第一列。在 table.pure-table th:first-child 中设置了 position: sticky; 和 left: 0;，并将 z-index 设为 1，以确保第一列在滚动时会固定在屏幕上方。

要去除表格中最后一列中文的换行效果，可以使用 CSS 的 white-space 属性，将其设置为 nowrap，这样文字就不会自动换行了。

添加了以下 CSS 样式：

这样，最后一列中文就不会自动换行了。其中 table.pure-table td:last-child 和 table.pure-table th:last-child 选择器用于指定表格中的最后一列单元格，white-space: nowrap; 则是将 white-space 属性设置为 nowrap，禁止其自动换行。

position: sticky 是 CSS 中的一种定位方式，可以实现元素在滚动时固定在屏幕上，直到其滚动到指定位置。相对于 position: fixed，position: sticky 有以下优点和缺点：

优点：

1. 不会脱离文档流，因此不会影响其他元素的布局和位置；
2. 可以在页面滚动到指定位置时自动固定，无需手动计算位置；
3. 可以在滚动到指定位置后自动取消固定，不会一直占据屏幕空间，避免了 position: fixed 的潜在问题；
4. 可以在固定元素上设置 z-index 属性，与其他元素进行层级控制。

缺点：

1. 兼容性问题：position: sticky 不是所有浏览器都支持，特别是在 IE11 及以下版本中不支持；
2. 在某些情况下可能会存在性能问题，尤其是在滚动时固定的元素较多时，可能会导致卡顿和性能下降；
3. 在某些情况下可能会存在滚动到指定位置时出现抖动的问题，需要通过对元素和容器的尺寸、位置等进行调整来解决。

综上所述，position: sticky 是一种灵活且易用的定位方式，具有很多优点，但在兼容性和性能方面有一些缺点需要注意。如果要在项目中使用 position: sticky，需要在兼容性和性能方面进行综合考虑，以确保其正常运行和良好的用户体验。

这段 CSS 代码主要是为了实现固定表格首列和横向滚动效果，并且在表格首列添加了固定的宽度。

首先，.pure-table-wrapper-div 是一个包裹表格的 div 元素，通过设置 overflow-x: scroll，实现了横向滚动的效果。同时，通过设置 margin-left: 5em，在左侧添加了 5em 的空白，使得表格不会紧贴在页面最左侧，美观性更好。

接着，table.pure-table tr td:first-child 和 table.pure-table tr th:first-child 选择器用于选中表格中的第一列单元格，使用 position: absolute 将其从文档流中脱离，并使用 width: 5em 指定其宽度为 5em，然后通过 left: 0 将其固定在表格最左侧。

这样，表格的首列就被固定在了左侧，不会随着表格的滚动而移动，同时也添加了固定的宽度，使得表格整体更加美观和易读。

总的来说，这段 CSS 代码实现了表格的固定首列和横向滚动效果，同时也为表格首列添加了固定的宽度，提高了表格的可读性和美观性。

CSS 中的 position: absolute 定位方式可以让元素脱离文档流，并相对于它的最近的非 static 定位祖先元素进行定位。相对于其他定位方式，position: absolute 有以下优点和缺点：

优点：

1. 可以精确控制元素的位置，可以在任何位置放置元素；
2. 可以与其他元素重叠，实现复杂的布局效果；
3. 可以让元素脱离文档流，不会影响其他元素的布局和位置；
4. 可以通过设置 z-index 属性进行层级控制。

缺点：

1. 不会占据原来的空间，可能会导致其他元素填补其位置，影响页面布局；
2. 定位时需要手动指定位置，不如其他定位方式使用方便；
3. 在某些情况下，可能会出现元素位置计算错误的问题，需要仔细调整位置和尺寸。

综上所述，position: absolute 是一种灵活且强大的定位方式，可以实现很多独特的布局效果，但需要注意它可能会对页面布局和元素位置产生影响。在使用时，需要根据具体情况进行综合考虑，并在保证页面布局和元素位置正确的前提下，尽可能地利用其优点实现更好的页面效果。

CSS4骚操作走起！让你的网页更“牛掰”

嘿，亲爱的前端老司机和萌新朋友们，虽然官方从未正式冠名CSS4，但在我们心里，那些新鲜的CSS规范和模块就是它，版本号无所谓，关键是它让我们撸代码更丝滑。

今天不说枯燥的理论知识，直接分享几个CSS4的骚操作小技巧，助你代码开挂，UI飞升！让你在下次代码审查中，成为那位神秘的前端大佬！

如果你在开发Web组件（Web Components），::part() 让你能直接控制组件的部分元素。它能改变一个封装元素内部的某些样式，酷吧？

@supports语句可以判断浏览器是否支持某个CSS特性。CSS4在此基础上新增了“多个条件”的写法，可以用and和not来组合多个条件判断。

@layer是CSS4引入的新特性，可以让你组织和控制CSS规则的层级顺序，比传统的样式表引入顺序更灵活。

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，这个可以让你创建一个响应式网格系统，列的宽度会根据可用空间自动调整，不需要你手动写断点。

在Web组件中，::slotted()可以让你为插槽中的内容单独设置样式。给Web组件增添了一丝灵动。

CSS4让::before和::after伪元素的内容更加灵活，你可以直接使用content属性来引入数据，甚至可以通过attr()引入HTML属性值。

place-items是align-items和justify-items的简写，使用它可以一行代码解决纵向和横向的对齐问题。

object-fit 和 object-position 在处理图像时非常强大，可以让你像背景图一样控制图像的显示方式，不再需要使用background-image。

:is() 让复杂的选择器简洁清晰，减少了重复的代码。例如，你可以通过:is()同时应用多个规则。

想要页面滚动更“聪明”一点？scroll-snap-type帮助你设置滚动的对齐方式，达到非常流畅的滚动体验。

accent-color让你定制表单控件的颜色，哪怕是浏览器默认的“勾选框”，也可以变得时尚起来。

CSS4提供了这些强大的函数，可以让你根据环境动态计算值，从而实现更加灵活的响应式布局。

position: sticky 让你可以轻松实现粘性元素，避免了JS来控制滚动监听。它简直是懒人必备的功能。

CSS4增强了writing-mode，现在可以非常轻松地实现竖排文字了，再也不需要JavaScript来搞定了。

backdrop-filter可以实现背景模糊等效果，这种效果曾经是通过JavaScript实现的，但CSS4已经帮你解决了。

想让页面元素独立渲染，不影响其他部分？试试 contain。它告诉浏览器这个元素可以独立运作，不需要考虑它对其他元素的影响。

:where()选择器是:is()的“懒兄弟”，它的优点是不会影响优先级（权重永远是零），性能更好。

grid-template-rows 允许你直接使用minmax()设置每行的大小，适应更多布局需求。

使用overflow-anchor，你可以控制元素的滚动锚点位置，使得动态内容加载时页面滚动更加自然。

:focus-visible使得浏览器仅在键盘导航时显示焦点样式，从而提升无障碍性同时不影响鼠标用户。

aspect-ratio可以让你轻松保持图片或者视频的固定比例，而不用用JavaScript来搞定了。

:empty伪类允许你选择没有任何内容的元素，这对于清理空白元素非常有用。

如果你想自动控制grid中的列或行的大小，grid-auto-columns和grid-auto-rows会派上大用场。

在CSS4中，prefers-color-scheme来根据用户系统的主题色切换样式。

CSS4 prefers-reduced-motion: reduce 给用户带来更多的贴心功能了！你可以根据用户是否启用了减少动画的设置来控制你的动画效果，你可以说这简直是对那些晕动画的用户的专属关爱。

font-feature-settings可以让你启用字体的高级特性，比如OpenType的连字、斜体等，进一步提升页面的美观。

CSS4中的filter能给图片、元素添加各种炫酷的视觉效果。你可以像玩魔法一样调节元素的对比度、模糊、亮度等。

box-sizing: border-box是前端开发中不可或缺的一部分，它让你不再为padding和border的计算而烦恼。

你可以使用text-align-last来设置文本的最后一行如何对齐，特别适合需要排版的地方。

如果你想精确控制过渡动画的曲线，cubic-bezier()允许你自定义动画的加速和减速，达到完美的动画效果。

env() 是 CSS 和设备之间的桥梁。它可以读取设备环境变量，比如安全区域。苹果的刘海屏用户再也不会觉得你的网站“掉了角”。这是贴心开发者的秘密武器，用了它，你能假装是苹果设计师的远房亲戚

CSS 自定义属性（变量）已经够酷了，但 CSS4 再次升级，给它配了个保姆：@property。你可以定义属性的类型、默认值，还能设置是否可以动画！来，瞧瞧这个宝贝。

虽然大家都知道 @import，但现在 CSS4 提出了 @use，它比 @import 更高效，也能避免加载多次。让你对 CSS 模块化的理解更上一层楼！

padding-left 和 padding-right？早就过时了！用 padding-inline-start 和 padding-inline-end，可以让你轻松支持从左到右、从右到左的多语言布局。

如果你觉得网页太单调，那就试试 mix-blend-mode，让颜色和背景实现一些神奇的融合效果，搞得像是艺术品一样。

要用滚动驱动动画？scroll-timeline闪亮登场！滚动页面时，动画同步触发，交互效果瞬间高大上。设计师和PM看到估计会直接给你升职加薪！

如果你也有想补充的小技巧，评论区摆摊，我们一起拍桌子~

由灵签样式css3文字竖向排列遇到数字要横排的思路

要实现如下内容的样式，即文字是竖向排列，并且如下图的35这个数字，要将其变成横向排列。

想要方案竖向排列，需要用到css3的writing-mode:vertical-rl;//即竖直广告，从右到左的方式

但这样写一个奇怪的问题，就当中我们有一个35，我们要单独把这个数字区域拿出来，如下图，我们如果不把35这个数字单独设置，将出现如下的排版，则非常影响阅读体验。

所以，我们要把这个35数字，单独放在一个盒子里面，并且修改它的writing-mode属性，让其恢复正常即可。

这样就可以实现，文字竖排，并且数字横向，不影响阅读。

writing-mode属性,这在我们写古诗句的时候，非常有用。horizontal-tb://默认模式，从左到右，从上到下

vertical-rl://从上到下，从右到左

vertical-lr://从上到下，从左到右

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com