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

news2024/11/28 8:30:32

文章目录

  • 一、Banner 栏版心盒子测量
    • 1、测量版心元素尺寸
    • 2、课程表测量
  • 二、Banner 版心盒子模型左侧导航栏代码示例
    • 1、HTML 标签结构
    • 2、CSS 样式
    • 3、展示效果





一、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;
}

完整代码 :

/* 清除标签默认的内外边距 */
* {
   padding: 0;     
   margin: 0;
}

/* 清除列表默认样式 ( 主要是前面的点 ) */
li {
	list-style: none;
}

/* 清除按钮默认样式 ( 主要是按钮自带的边框 ) */
button {
	border: none;
}

/* 设置总体背景 */
body {
	background-color: #f3f5f7;
}

/* 版心宽度 1200 像素 , 在浏览器中居中对齐 */
.w {
    width: 1200px;
    margin: auto;
}

/* 头部盒子样式 */
.header {
	/* 高度 42 像素 */
	height: 42px;
	/* 设置颜色 方便调试 */
	/*background-color: pink;*/
	/* 上下设置 20 像素外边距 , 左右自动居中 */
	margin: 30px auto;
}

.logo {
	/* 靠左侧浮动 */
	float: left;
	/* 设置与 导航栏盒子 的外边距 */
	margin-right: 60px;
}

/* 导航栏设置 左浮动 */
.nav {
	float: left;
}

/* 导航栏内部 的 无序列表 设置左浮动 */
.nav ul li {
	/* 设置 无序列表项 从左到右排列 */
	float: left;
}

/* 设置无序列表中的链接样式 */
.nav ul li a {
	/* 显示模式 块级元素 */
	display: block;
	/* 高度 40 像素 , 总高度 42 像素 , 有 2 像素的下边框 */
	height: 40px;
	/* 上下内边距 0 像素 , 左右内边距 10 像素 */
	padding: 0 10px;
	/* 右外边距 20 像素 */
	margin-right: 20px;
	/* 行高 = 内容高度 垂直居中 */
	line-height: 40px;
	/* 字体大小 */
	font-size: 18px;
	/* 字体颜色 */
	color: #050505;
	/* 取消链接下方的横线 */
	text-decoration: none;
	/* 调试时使用的背景 */
	/*background: skyblue;*/
}

/* 鼠标经过链接时的样式 */
.nav ul li a:hover {
	/* 鼠标经过导航栏链接 , 底部显示 2 像素的 #00a4ff 颜色实线 */
	border-bottom: 2px solid #00a4ff;
}

/* 搜索栏盒子模型 */
.search {
	/* 设置左浮动 排列在 导航栏后面 */
	float: left;
	/* 设置左外边距 65 像素 */
	margin-left: 65px;
}

/* 搜索栏 输入框 */
.search input {
	/* 设置左浮动 , 方便与右侧的按钮进行排列 */
	float: left;
	/* 宽度为 360 像素, 但是左侧有 20 像素内边距变为 340 像素 */
	width: 340px;
	/* 高度 38 像素 但是盒子大小 42 像素 , 设置 40 加上 2 像素边框正好充满 */
	height: 40px;
	/* 1 像素边框 */
	border: 1px solid #00a4ff;
	/* 没有右边框 */
	border-right: 0;
	/* 文本左侧有 20 像素内边距 */
	padding-left: 20px;
	/* 设置文本颜色 */
	color: #bfbfbf;
}

/* 搜索框按钮 */
.search button {
	/* 设置左浮动 使其与表单在同一行显示 */
	float: left;
	/* 按钮宽度 50 像素 */
	width: 50px;
	/* 按钮高度 40 像素 但是为了与父容器匹配 这里拉伸到 42 像素 */
	height: 42px;
	/* 使用图片背景方式设置按钮图片 */
	background: url(images/search_button.png);
}

/* 用户栏盒子 */
.user {
	float: left;
	/* 高度 = 行高 垂直居中 */
	height: 42px;
	line-height: 42px;
	/* 距离左侧 30 像素 左外边距 */
	margin-left: 30px;
	/* 文字大小 14 像素 */
	font-size: 14px;
	/* 字体颜色 #666666 */
	color: #666666;
}

/* 用户栏 头像样式 */
.user .user-img {
	float: left;
	/* 用户头像 30 像素 容器高 42  上下各 6 像素边距 图像垂直居中 */
	padding: 6px 0;
}

/* 用户栏 名字样式 */
.user .user-name {
	float: left;
	/* 名字与头像间隔 6 像素 */
	margin-left: 6px;
}

/* Banner 条样式 */
.banner {
	/* 宽度自动填充整个浏览器, 这里只设置高度 */
	height: 420px;
	/* 背景颜色 #1c036c , 背景图片水平居中对齐 */
	background: #1c036c url(images/banner_bg.png) no-repeat top center;
}

/* 侧导航栏 样式 */
.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;
}

3、展示效果


在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/423320.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Nginx网站服务详解（第二部分：Nginx服务的主配置文件 ——nginx.conf）

Nginx网站服务详解（第二部分：Nginx服务的主配置文件 ——nginx.conf）

1. 全局配置的六个模块简介 全局块&#xff1a;全局配置&#xff0c;对全局生效&#xff1b;events块&#xff1a;配置影响 Nginx 服务器与用户的网络连接&#xff1b;http块&#xff1a;配置代理&#xff0c;缓存&#xff0c;日志定义等绝大多数功能和第三方模块的配置&…
阅读更多...
SLBR通过自校准的定位和背景细化来去除可见的水印

SLBR通过自校准的定位和背景细化来去除可见的水印

一、简要介绍 本文简要介绍了论文“Visible Watermark Removal via Self-calibrated Localization and Background Refinement ”的相关工作。在图像上叠加可见的水印&#xff0c;为解决版权问题提供了一种强大的武器。现代的水印去除方法可以同时进行水印定位和背景恢复&#…
阅读更多...
C++ 实现 Matlab 的 lp2lp 函数

C++ 实现 Matlab 的 lp2lp 函数

文章目录1. matlab 的 lp2lp 函数的作用2. matlab 的 lp2lp 函数的使用方法3. C 实现3.1 complex.h 文件3.2 lp2lp.h 文件4. 测试结果4.1 测试文件4.2 测试3阶的情况4.3 测试9阶的情况1. matlab 的 lp2lp 函数的作用 去归一化 H(s) 的分母 2. matlab 的 lp2lp 函数的使用方法…
阅读更多...
人脸识别经典网络-MTCNN（含Python源码实现）

人脸识别经典网络-MTCNN（含Python源码实现）

人脸检测-mtcnn 本文参加新星计划人工智能赛道&#xff1a;https://bbs.csdn.net/topics/613989052 文章目录人脸检测-mtcnn1. 人脸检测1.1 人脸检测概述1.2 人脸检测的难点1.3 人脸检测的应用场景2. mtcnn2.1 mtcnn概述2.2 mtcnn的网络结构2.3 图像金字塔2.4 P-Net2.5 R-Net2…
阅读更多...
为什么说过早优化是万恶之源？

为什么说过早优化是万恶之源？

Donald Knuth&#xff08;高德纳&#xff09;是一位计算机科学界的著名学者和计算机程序设计的先驱之一。他被誉为计算机科学的“圣经”《计算机程序设计艺术》的作者&#xff0c;提出了著名的“大O符号”来描述算法的时间复杂度和空间复杂度&#xff0c;开发了TeX系统用于排版…
阅读更多...
开启数字新时代，5G-Advanced加速带入现实！

开启数字新时代，5G-Advanced加速带入现实！

在过去的这些年里&#xff0c;我们亲眼见证了5G的崛起。据GSMA&GSA统计&#xff0c;截至2022年12月&#xff0c;全球共部署了超过240张5G商用网络&#xff0c;5G用户超过10亿。在韩国、瑞士、芬兰等地&#xff0c;5G用户渗透率已超过30%。中国的5G网络建设更是独领风骚。截…
阅读更多...
形式语言与自动机总结---上下文无关文法(CFG)

形式语言与自动机总结---上下文无关文法(CFG)

第5章上下文无关文法: 设计文法: 做题的时候发现了一个正则表达式到文法的算法 R规则 根据正则式推导右线性文法_右线性文法表达ab*_Pluto 的博客-CSDN博客 举例 设计文法的关键在于理解递归性,文法是一个迭代器 1.The set {| i ≠ j or j ≠ k}, that is, the set of st…
阅读更多...
AIGC时代，分享11款超实用AI生成内容检测工具

AIGC时代，分享11款超实用AI生成内容检测工具

前往未来百科查看全部AI内容检测工具箱 一、AI 内容检测器 在数字内容创作的世界中&#xff0c;高质量的内容对至关重要。但随着创建的内容量不断增加&#xff0c;确保内容是原创的、高质量的非常具有挑战性。 AI 内容检测器指的是一种利用人工智能技术来自动化审核和识别不当…
阅读更多...
进程优先级

进程优先级

目录&#xff1a; 1.进程优先级的概念 2.查看进程优先级的方案 3.linux当中进程的优先级共有40个级别 4.对于进程的其它概念 ---------------------------------------------------------------------------------------------------------------------- 1.进程优先级的概念 为…
阅读更多...
Talk预告 | ICLR‘23 斯坦福大学计算机系博士后吴泰霖：学习可控的自适应多分辨率物理仿真

Talk预告 | ICLR‘23 斯坦福大学计算机系博士后吴泰霖：学习可控的自适应多分辨率物理仿真

本期为TechBeat人工智能社区第478期线上Talk&#xff01; 北京时间3月8日(周三)20:00&#xff0c;斯坦福大学计算机系博士后——吴泰霖的Talk将准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “学习可控的自适应多分辨率物理仿真”&#xff0c;届时将分…
阅读更多...
灌区泵站及闸门控制自动化系统

灌区泵站及闸门控制自动化系统

根据灌区泵站及闸门控制现状&#xff0c;利用智能终端与互联网相结合方法&#xff0c;实施取水、输水、供水、灌溉、排水、防洪和水资源管理等自动控制系统&#xff0c;实现骨干渠道灌排闸门现场及远程自动控制和远程监测监视&#xff0c;达到计划配水、精准灌溉&#xff0c;高…
阅读更多...
AJAX起步入门——介绍和使用

AJAX起步入门——介绍和使用

Ajax起步入门——介绍和使用基本用例场景复现核心干货AJAX简介ajax是什么&#xff1f;ajax工作原理ajax是基于现有的Internet标准AJAX实例实例演示实例代码ajax实例解析场景复现 最近学习与前端相关的小程序时&#xff0c;接触了异步请求api的封装和实现&#xff0c;涉及到了很…
阅读更多...
多线程并发编程笔记07（小滴课堂）容器

多线程并发编程笔记07（小滴课堂）容器

同步容器 我们写这样一段代码。 我们想对vector容器在遍历时&#xff0c;去根据条件删除&#xff1a; 会出现异常。 那正确的方式应该如何去写呢&#xff0c;这里就涉及到了迭代器&#xff1a; 单线程中我们是这么做的。 那么多线程中呢&#xff1f; 有的时候它会报这个错误…
阅读更多...
ChatGPT最强对手Claude使用教程

ChatGPT最强对手Claude使用教程

Cladue最近很火&#xff0c;作为ChatGPT4的平替版&#xff0c;它无需付费&#xff0c;使用方便&#xff0c;很多网友通过效果对比&#xff0c;发现它的性能要好于ChatGPT3.5&#xff0c;可以媲美ChatGPT4。最主要是使用很方便&#xff0c;十分钟就可以轻松部署&#xff0c;下面…
阅读更多...
MongoDB初认识

MongoDB初认识

MongoDB初认识 文章目录MongoDB初认识0. 写在前面1. MongoDB是什么2. MongoDB的优缺点3. 基础概念解析4. 安装4.1 下载地址4.2 安装MongoDB4.3 pgrep使用4.4 进入 shell 交互页面0. 写在前面 Linux版本&#xff1a;CentOS7.5 MongoDB版本&#xff1a;MongoDB-5.0.2&#xff08…
阅读更多...
asp.net博客管理系统统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

asp.net博客管理系统统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

一、源码特点 asp.net博客管理系统 是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语言开发 。 二、功能介绍 普通的用户是 123 密…
阅读更多...
国产化ChatGPT来袭，景联文科技提供专业数据采集标注服务，人手一个专属ChatGPT或成为可能

国产化ChatGPT来袭，景联文科技提供专业数据采集标注服务，人手一个专属ChatGPT或成为可能

ChatGPT作为一个颠覆性的创新&#xff0c;现已成为火爆全球的智能应用。 自ChatGPT爆火以来&#xff0c;国内科技圈开始频频发力&#xff0c;多家科技和互联网公司纷纷表示将开发出中国本土化的ChatGPT。 以百度为例&#xff0c;3月16日&#xff0c;百度推出新一代知识增强大语…
阅读更多...
Doris数据模型

Doris数据模型

Doris支持三种数据模型&#xff0c;分别是&#xff1a; Aggregate Model&#xff08;聚合模型&#xff09; Unique Model&#xff08;唯一模型&#xff09; Duplicate Model&#xff08;冗余模型&#xff09; Aggregate Model&#xff08;聚合模型&#xff09; key相同的数…
阅读更多...
影子账户——权限维持

影子账户——权限维持

文章目录定义创建定义 拥有管理员权限&#xff0c;但除了注册表外均查不到的账户。 创建 1、以管理员身份打开命令提示符 2、创建隐藏用户 3、将隐藏用户添加到管理员组 查看一下&#xff0c;没有显示匿名用户 4、查看《本地用户和组》&#xff0c;我是家庭版Windows&#x…
阅读更多...
MySQL的学习

MySQL的学习

文章目录一、MySQL 插入数据二、MySQL 查询数据三、MySQL WHERE 子句四、MySQL UPDATE 更新五、MySQL DELETE 语句总结一、MySQL 插入数据 MySQL 表中使用 INSERT INTO SQL语句来插入数据。 你可以通过 mysql> 命令提示窗口中向数据表中插入数据&#xff0c;或者通过PHP脚…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023