【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )

韩曙亮 2023-04-14 原文

文章目录

一、Banner 栏版心盒子测量

1、测量版心元素尺寸

拉四条辅助线 , 将版心包起来 , 可以测量 Banner 条版心的尺寸为 1200 x 420 像素 ;

根据上一篇博客【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 ) 测量的尺寸 ,

版心的尺寸为 1200 x 420 像素 ;
版心左侧的侧导航栏尺寸为 190 x 420 像素 ;
版心右侧的课程表 , 尺寸 228 x 300 像素 , 课程表距离 Banner 顶部有 50 像素高度 , 距离底部 70 像素 ;

2、课程表测量

左侧的文字 , 距离左侧有 20 像素的左内边距 ;

右侧的文字 , 距离测导航栏的右侧有 20 像素的右内边距 ;

测量测导航栏文本间隔 , 也就是行高 , 从上一行开始到下一行开始位置 , 行高 44 像素 ;

左侧的侧导航栏的背景是黑色半透明背景 ;

使用吸管工具 , 吸取鼠标移动到侧导航栏上的颜色值为 #00b4ff ;

侧导航栏中 , 默认状态下 , 文字默认颜色为白色 ;

二、Banner 版心盒子模型左侧导航栏代码示例

1、HTML 标签结构

核心代码 :

	<!-- 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>
	</div>
	<!-- Banner 模块 - 结束 -->

完整代码 :

<!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="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="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>
	</div>
	<!-- Banner 模块 - 结束 -->
</body>
</html>

2、CSS 样式

/* 侧导航栏 样式 */
.subnav {
	/* 设置左浮动 */
	float: left;
	/* 左侧侧导航栏 190 x 420 , 左右两侧各 20 像素内边距 */
	width: 150px;
	/* 高度 420 像素 */
	height: 420px;
	/* 上下没有内边距 , 左右各 20 像素内边距 */
	padding: 0 20px;
	/* 背景半透明 黑色背景 0.3 透明度 */
	background: rgba(0, 0, 0, .3);
}

/* 测导航栏 中 无序列表 列表项 高度 45 像素 */
.subnav li {
	/* 高度 = 行高 , 垂直居中 */
	height: 45px;
	line-height: 45px;
}

/* 测导航栏 中 列表项 中的链接样式 */
.subnav li a {
	/* 默认情况下为白色 */
	color: #fff;
	/* 字体大小 14 像素 */
	font-size: 14px;
	/* 取消链接下方的下划线 */
	text-decoration: none;
}

/* 鼠标经过时 文字颜色变色 */
.subnav li a:hover {
	color: #00b4ff;
}

/* 链接内部的 span 标签 , 右浮动 */
.subnav  span {
	float: right;
}