【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )

/* Banner 栏右侧课程盒子测量及样式 */
.banner .course-box {
    width: 224px; /* 宽度 */
    height: 300px; /* 高度 */
    background-color: #fff; /* 背景颜色 */
    border: 1px solid #e5e5e5; /* 边框 */
    box-sizing: border-box; /* box-sizing 属性用于设置盒模型的大小，内容区域的宽高计算在内 */
}
 
/* 图片样式 */
.banner .course-box img {
    width: 100%; /* 宽度 */
    height: 150px; /* 高度 */
    object-fit: cover; /* 对象填充模式，保持宽高比缩放图片 */
}
 
/* 标题样式 */
.banner .course-box .title {
    font-size: 16px; /* 字体大小 */
    font-weight: 500; /* 字体加粗 */
    line-height: 24px; /* 行高 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 文本溢出显示省略标记 */
    white-space: nowrap; /* 文本不换行 */
}
 
/* 价格样式 */
.banner .course-box .price {
    font-size: 14px; /* 字体大小 */
    color: #ff6700; /* 字体颜色 */
    font-weight: 500; /* 字体加粗 */
    margin-bottom: 10px; /* 下边距 */
}
 
/* 按钮样式 */
.banner .course-box .btn {
    width: 100%; /* 宽度 */
    height: 30px; /* 高度 */
    background-color: #ff6700; /* 背景颜色 */
    color: #fff; /* 字体颜色 */
    font-size: 14px; /* 字体大小 */
    border: none; /* 无边框 */
    outline: none; /* 无轮廓 */
    cursor: pointer; /* 鼠标样式为指针 */
}
 
/* 按钮:hover 伪类样式 */
.banner .course-box .btn:hover {
    background-color: #ff4800; /* 鼠标悬浮时背景颜色 */
}

这段代码为 Banner 栏右侧的课程盒子定义了宽度、高度、背景颜色、边框以及内部图片和文本的样式。同时，它还包括了按钮的样式和鼠标悬浮时的样式变化。这样的代码可以帮助开发者学习如何使用 CSS 进行网页布局和样式设计。