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

文章目录

  • 一、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、展示效果


在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Cacti监控远程linux机器配置（被监控端）

Cacti监控远程linux机器配置（被监控端）

一、被监控机安装snmp yum -y install snmp二、被监控机的配置 vi /etc/snmp/snmpd.conf做以下更改&#xff1a; 1、找到com2sec notConfigUser default public 改为&#xff1a;com2sec notConfigUser 192.168.1.1(改成监控服务器的ip) public 2、找到acce…
阅读更多...
Pandas入门实践3 -数据可视化

Pandas入门实践3 -数据可视化

人类大脑擅长于在数据的视觉表现中寻找模式;因此在这一节中&#xff0c;我们将学习如何使用pandas沿着Matplotlib和Seaborn库来可视化数据&#xff0c;以获得更多的特性。我们将创建各种可视化&#xff0c;帮助我们更好地理解数据。 使用pandas绘图 我们可以使用plot()方法创…
阅读更多...
【linux】Ubuntu aarch64编译安装RXTX进行串口通信

【linux】Ubuntu aarch64编译安装RXTX进行串口通信

目录1.下载RXTX2.源码下载方式一&#xff1a;方式二&#xff1a;3. 编译源码4.编译源码时遇到的问题问题1&#xff1a;./configure command not found问题2&#xff1a;error: UTS_RELEASE undeclared问题3&#xff1a;libtool: install: armv6l-unknown-linux-gnu/librxtxRS48…
阅读更多...
【ZUUL2踩坑】题一：Ribbon集成动态properties存在的原生风险

【ZUUL2踩坑】题一：Ribbon集成动态properties存在的原生风险

目录 一、问题背景 二、问题分析 1、配置文件空档期的问题 一、问题背景 JAVA的Properties工具有两种写配置文件的方式&#xff0c;一种是覆盖&#xff0c;一种是追加。 但是动态配置文件一般需要进行创建或更新&#xff0c;不会选择追加内容&#xff0c;所以只能选择进行配…
阅读更多...
docker目录映射

docker目录映射

docker 常用命令 docker ps // 查看所有正在运行容器 docker stop containerId // containerId 是容器的ID docker ps -a // 查看所有容器 $ docker ps -a -q // 查看所有容器ID docker stop $(docker ps -a -q) // stop停止所有容器 docker rm $(docker ps -a -q) // remove删…
阅读更多...
replugin宿主与插件通信小结

replugin宿主与插件通信小结

近来replugin开发中遇到宿主和插件间需要通信的情形&#xff0c;思来只有进程间通信(IPC)才是比较好的宿主与插件的通信方式。而Android进程间通信主要有2种方式&#xff1a;Messenger和AIDL。 AIDL&#xff08;Android Interface Definition Language&#xff09;是Android接…
阅读更多...
ChatGPT团队中，3个清华学霸，1个北大学霸，共9位华人

ChatGPT团队中，3个清华学霸，1个北大学霸，共9位华人

众所周知&#xff0c;美国硅谷其实有着众多的华人&#xff0c;哪怕是芯片领域&#xff0c;华为也有着一席之地&#xff0c;比如AMD 的 CEO 苏姿丰、Nvidia 的 CEO 黄仁勋 都是华人。 还有更多的美国著名的科技企业中&#xff0c;都有着华人的身影&#xff0c;这些华人&#xff…
阅读更多...
Java入坑之类的派生与继承

Java入坑之类的派生与继承

一、继承 1.1继承的概念 Java中的继承&#xff1a;子类就是享有父类的属性和方法&#xff0c;并且还存在一定的属性和方法的扩展。 Subclass&#xff0c;从另一个类派生出的类&#xff0c;称为子类(派生类&#xff0c;扩展类等) Superclass&#xff0c;派生子类的类&#xff…
阅读更多...
3.5 函数的极值与最大值和最小值

3.5 函数的极值与最大值和最小值

学习目标&#xff1a; 我要学习函数的极值、最大值和最小值&#xff0c;我会采取以下几个步骤&#xff1a; 理解基本概念&#xff1a;首先&#xff0c;我会理解函数的极值、最大值和最小值的概念。例如&#xff0c;我会学习函数在特定区间内的最高点和最低点&#xff0c;并且理…
阅读更多...
( “树” 之 DFS) 104. 二叉树的最大深度 ——【Leetcode每日一题】

( “树” 之 DFS) 104. 二叉树的最大深度 ——【Leetcode每日一题】

104. 二叉树的最大深度 给定一个二叉树&#xff0c;找出其最大深度。 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。 说明: 叶子节点是指没有子节点的节点。 示例&#xff1a; 给定二叉树 [3,9,20,null,null,15,7]&#xff0c; 返回它的最大深度 3 。 思路&am…
阅读更多...
激光和相机的标定

激光和相机的标定

一、手动标定 代码工程&#xff1a;GitHub - Livox-SDK/livox_camera_lidar_calibration: Calibrate the extrinsic parameters between Livox LiDAR and camera 这是Livox提供的手动校准Livox雷达和相机之间外参的方法&#xff0c;并在Mid-40&#xff0c;Horizon和Tele-15上进…
阅读更多...
ReactNative入门

ReactNative入门

React基本用法&#xff1a; react与js不同的点在于 react使用的是虚拟DOM js是真实DOM 作用&#xff1a;当有新的数据填充 可以复用之前的&#xff0c;而js需要整体重新渲染 创建虚拟DOM还可以使用jsx语法直接声明&#xff1a; 注意要用babel标签将jsx转化为js 但是建议采用j…
阅读更多...
图解并用 C 语言实现非比较排序（计数排序、桶排序和基数排序）

图解并用 C 语言实现非比较排序（计数排序、桶排序和基数排序）

目录 一、计数排序 二、桶排序 三、基数排序 一、计数排序 算法步骤&#xff1a; 找出待排序数组 arr 中的最小值和最大值&#xff08;分别用 min 和 max 表示&#xff09;。 创建一个长度为 max - min 1、元素初始值全为 0 的计数器数组 count。 扫描一遍原始数组&…
阅读更多...
2023 年嵌入式世界的3 大趋势分析

2023 年嵌入式世界的3 大趋势分析

目录 大家好&#xff0c;本文讲解了嵌入式发展的3个大趋势&#xff0c;分享给大家。 趋势#1 – Visual Studio Code Integration 趋势#2 –支持“现代”软件流程 趋势 #3 – 在设计中利用 AI 和 ML 结论 大家好&#xff0c;本文讲解了嵌入式发展的3个大趋势&#xff0c;分享…
阅读更多...
Python圈的普罗米修斯——一套近乎完善的监控系统

Python圈的普罗米修斯——一套近乎完善的监控系统

文章目录前言一、怎么采集监控数据&#xff1f;二、采集的数据结构与指标类型2.1 数据结构2.2 指标类型2.3 实例概念2.4.数据可视化2.5.应用前景总结前言 普罗米修斯(Prometheus)是一个SoundCloud公司开源的监控系统。当年&#xff0c;由于SoundCloud公司生产了太多的服务&…
阅读更多...
网络安全实战之植入后门程序

网络安全实战之植入后门程序

在 VMware 上建立两个虚拟机&#xff1a;win7 和 kali。 Kali&#xff1a;它是 Linux 发行版的操作系统&#xff0c;它拥有超过 300 个渗透测试工具&#xff0c;就不用自己再去找安装包&#xff0c;去安装到我们自己的电脑上了&#xff0c;毕竟自己从网上找到&#xff0c;也不…
阅读更多...
如何把数据库中的数据显示到页面

如何把数据库中的数据显示到页面

主要内容&#xff1a;使用JDBC访问数据库中数据&#xff08;Java Web数据可视化案例&#xff09; 文章目录前期准备&#xff1a;案例&#xff1a;第一步&#xff1a;创建数据库及数据第二步&#xff1a;编写实体类第三步&#xff1a;编写Dao类第四步&#xff1a;编写Servlet代码…
阅读更多...
springboot集成hadoop3.2.4HDFS

springboot集成hadoop3.2.4HDFS

前言 记录springboot集成hadoop3.2.4版本&#xff0c;并且调用HDFS的相关接口&#xff0c;这里就不展示springboot工程的建立了&#xff0c;这个你们自己去建工程很多教程。 一、springboot配置文件修改 1.1 pom文件修改 <!-- hadoop依赖 --><dependency><gro…
阅读更多...
Stable Diffusion - API和微服务开发

Stable Diffusion - API和微服务开发

Stable Diffusion 是一种尖端的开源工具&#xff0c;用于从文本生成图像。 Stable Diffusion Web UI 通过 API 和交互式 UI 打开了许多这些功能。 我们将首先介绍如何使用此 API&#xff0c;然后设置一个示例&#xff0c;将其用作隐私保护微服务以从图像中删除人物。 推荐&…
阅读更多...
一种轻量的“虚拟机”——Windows 沙盒模式

一种轻量的“虚拟机”——Windows 沙盒模式

Windows 沙盒模式Windows沙盒的好处操作步骤Windows沙盒的好处 相比虚拟机和第三方的沙盒软件&#xff0c;Windows Sandbox启用后仅占用100MB硬盘空间&#xff0c;还能与物理机安全地共享部分内存空间。简单来说就是易用、免费、不卡机&#xff01; 由于要保证沙盒内的数据不…
阅读更多...
最新文章

Copyright @ 2022~2023