【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )

/* 导航栏宽度设置 */
.navbar {
    width: 100%; /* 导航栏宽度为100% */
    height: 50px; /* 导航栏高度为50px */
    background-color: #333; /* 导航栏背景颜色 */
    position: relative; /* 相对定位 */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); /* 导航栏阴影效果 */
}
 
/* 导航链接样式 */
.navbar a {
    position: absolute; /* 绝对定位 */
    display: block; /* 块级元素 */
    color: white; /* 链接颜色 */
    text-decoration: none; /* 去除下划线 */
    line-height: 50px; /* 垂直居中 */
    transition: left 0.3s; /* 平滑过渡效果 */
}
 
/* 首页链接位置 */
.home-link {
    left: 50px; /* 距离左侧50px */
}
 
/* 导航链接横向分布的规则 */
.navbar a:nth-child(n+2):nth-last-child(n+2) {
    left: calc((100% - 50px) / (#{count("li")} - 1) * (#{n} - 1) + 50px);
}
 
/* 示例中的导航链接数量为3个，所以上面的规则可以简化为：
.navbar a:nth-child(2):nth-last-child(3) { left: calc(100% / 2); }
.navbar a:nth-child(3):nth-last-child(2) { left: calc(100% / 2 + 50px); }
*/

这个代码示例展示了如何使用CSS来创建一个横向的导航栏，并且使用绝对定位来让导航链接在页面中横向分布。同时，使用了nth-child和nth-last-child伪类选择器来计算每个链接的left属性值，从而实现自动居中分布。这个例子也展示了如何使用calc()函数来进行简单的算术运算，以及如何使用transition属性添加平滑的动画效果。