文章目录

一、Banner 栏右侧课程盒子测量及样式
- 1、盒子尺寸测量
- 2、课程表头部样式
- 3、列表样式
- 4、最下方按钮样式
二、Banner 版心盒子模型右侧课程栏代码示例
- 1、HTML 标签结构
- 2、CSS 样式
- 3、展示效果

绘制下图矩形框内容 :

一、Banner 栏右侧课程盒子测量及样式

1、盒子尺寸测量

课程表的宽高 228 x 300 像素 ;

课程表距离顶部有 50 像素 ;

总体背景是白色的 ;

课程表在版心的右侧 , 可以设置成右浮动 , 设置一个 50 像素的外上边距 ;

/* Banner 条右侧 课程表盒子样式 */
.course {/* 设置了浮动不会出现外边距塌陷问题 */float: right;/* 盒子尺寸 228 x 300 像素 */width: 228px;height: 300px;/* 背景颜色 - 白色 */background-color: #fff;/* 课程表盒子 与 Banner 条顶部有 50 像素的上外边距 */margin-top: 50px;
}

2、课程表头部样式

课程表头部尺寸 228x48 像素 ,

背景颜色值 #9bceea ;

使用文字工具查看课程表 , 文字大小 18 像素 , 文字颜色白色 , 文字加粗 ;

最终的头部样式如下 :

/* Banner 条右侧 课程表 头部样式 */
.course-hd {/* 尺寸 228x48 像素 */height: 48px;/* 盒子背景颜色 */background-color: #9bceea;/* 字体大小 */font-size: 18px;/* 水平居中 */text-align: center;/* 垂直居中 - 行高 = 内容高度 */line-height: 48px;/* 文字颜色 - 白色 */color: #fff;/* 文字加粗 */font-weight: 700;
}

3、列表样式

列表左右两侧有 15 像素的内边距 ;

/* Banner 条右侧 课程表 body 部分整体设置左右 15 像素内边距 */
.course-bd {/* 左右设置 15 像素内边距 */padding: 0 15px;
}

无序列表如下图矩形框所示 , 该无序列表距离顶部标题有 10 像素的间隔 ,

无序列表与顶部的 10 像素间隔 ,

/* Banner 条右侧 课程表 无序列表 距离头部有 10 像素间隔 */
.course-bd ul {/* 10 像素内边距 - 使用外边距会出现塌陷的问题 */padding-top: 10px;
}

列表项高度是 60 像素, 文字与顶部有 10 像素间隔 , 这里将列表项设置成 50 像素 , 此位置直接写文字即可 , 多行文本无法设置居中 , 为了保证文字处于距离顶部 10 像素位置 , 只能将列表项设置为 50 像素高度 ;

/* Banner 条右侧 课程表 无序列表 列表项样式 */
.course-bd li {/* 列表项高度是 60 像素, 文字与顶部有 10 像素间隔这里将列表项设置成 50 像素 , 此位置直接写文字即可 多行文本无法设置居中 , 为了保证文字处于距离顶部 10 像素位置只能将列表项设置为 50 像素高度*/height: 50px;/* 设置底部边框 */border-bottom: 1px solid #ccc;/* 顶部设置 10 像素外边距 下面直接紧贴写文字 以达到多行文本居中对齐效果 */margin-top: 10px;
}

列表项中的三种文本 , 样式如下 :

/* Banner 条右侧 课程表 无序列表 列表项 继续学习 文本样式 */
.course-bd li .span1 {font-size: 16px;color: #4e4e4e;
}/* Banner 条右侧 课程表 无序列表 列表项 课程内容 文本样式 */
.course-bd li .span2 {font-size: 14px;color: #4e4e4e;
}/* Banner 条右侧 课程表 无序列表 列表项 正在学习 文本样式 */
.course-bd li p {font-size: 12px;color: #a5a5a5;
}

4、最下方按钮样式

最下方按钮 200 x 40 像素 , 文字 16 像素 , 边框 1 像素实线 , 垂直居中 , 水平居中 ;

样式如下 :

/* Banner 条右侧 课程表 底部按钮样式 */
.all {/* 显示模式 - 块级元素 */display: block;/* 总高度 40 像素 , 有 2 像素的上下边框 */height: 38px;/* 边框 1 像素 实线 颜色 #00a4ff */border: 1px solid #00a4ff;/* 距离顶部无序列表 10 像素 */margin-top: 10px;/* 文字大小 16 像素 */font-size: 16px;/* 设置文字颜色 */color: #00a4ff;/* 水平对齐 */text-align: center;/* 垂直对齐 - 行高 = 内容高度 */line-height: 38px;
}/* Banner 条右侧 课程表 底部按钮 - 鼠标经过时的样式 */
.all:hover {background-color: #00a4ff;color: #fff;
}

二、Banner 版心盒子模型右侧课程栏代码示例

1、HTML 标签结构

核心代码 :

         <!-- 右侧 课程栏 --><div class="course"><!-- 顶部的标题 --><div class="course-hd">我的课程表</div><div class="course-bd"><!-- 中部的 列表 --><ul><li><span class=".span1">继续学习</span> <span class=".span2">程序语言设计</span><p>正在学习-使用对象</p></li><li><span class=".span1">继续学习</span> <span class=".span2">程序语言设计</span><p>正在学习-使用对象</p></li><li><span class=".span1">继续学习</span> <span class=".span2">程序语言设计</span><p>正在学习-使用对象</p></li></ul><!-- 底部的 全部课程 按钮 --><a href="#" class="all">全部课程</a></div></div>

完整代码 :

<!DOCTYPE html>
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>课程网站</title><link rel="stylesheet" href="style.css">
</head>
<body><!-- 头部模块 - 开始 --><div class="header w"><!-- 1. 最左侧的 logo 标题 --><div class="logo"><!-- 图片 --><img src="data:images/logo.png" alt=""></div><!-- 2. 导航栏盒子 - 使用无序列表实现 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 3. 搜索栏盒子 --><div class="search"><!-- 文本输入框表单 --><input type="text" value="输入关键词"><button></button></div><!-- 4. 用户栏盒子 --><div class="user"><div class="user-img"><img src="data:images/head_icon.png" alt=""></div><div class="user-name">用户1</div></div></div><!-- 头部模块 - 结束 --><!-- Banner 模块 - 开始 --><div class="banner"><!-- 版心模块 --><div class="w"><!-- 左侧 侧导航栏  --><div class="subnav"><!-- 无序列表 --><ul><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">后端开发 <span>></span></a></li><li><a href="#">移动开发 <span>></span></a></li><li><a href="#">人工智能 <span>></span></a></li><li><a href="#">商业预测 <span>></span></a></li><li><a href="#">云计算&大数据 <span>></span></a></li><li><a href="#">运维&从测试 <span>></span></a></li><li><a href="#">UI设计 <span>></span></a></li><li><a href="#">产品 <span>></span></a></li></ul></div><!-- 右侧 课程栏 --><div class="course"><!-- 顶部的标题 --><div class="course-hd">我的课程表</div><div class="course-bd"><!-- 中部的 列表 --><ul><li><span class=".span1">继续学习</span> <span class=".span2">程序语言设计</span><p>正在学习-使用对象</p></li><li><span class=".span1">继续学习</span> <span class=".span2">程序语言设计</span><p>正在学习-使用对象</p></li><li><span class=".span1">继续学习</span> <span class=".span2">程序语言设计</span><p>正在学习-使用对象</p></li></ul><!-- 底部的 全部课程 按钮 --><a href="#" class="all">全部课程</a></div></div></div></div><!-- Banner 模块 - 结束 -->
</body>
</html>

2、CSS 样式