CSS基础学习--18 导航栏

news2024/9/23 7:19:33

 一、导航栏=链接列表

作为标准的 HTML 基础一个导航栏是必须的。

在我们的例子中我们将建立一个标准的 HTML 列表导航栏。

导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>CSS基础学习-导航栏</title> 
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>

<p>注意：这里我们用 href="#"作为测试连接。但在一个真正的 web 站点上需要真实的 url。</p>

</body>
</html>

现在，让我们从列表中删除边距和填充

<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
</style>

 

例子解析：

  • list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
  • 移除浏览器的默认设置将边距和填充设置为0

二、垂直导航栏

我们只需要 <a>元素的样式，建立一个垂直的导航栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-垂直导航栏</title> 
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li a {
  display: block;
  width: 60px;
  background-color: #dddddd;
}
</style>
</head>
<body>

<ul>
	<li><a href="#home">主页</a></li>
	<li><a href="#news">新闻</a></li>
	<li><a href="#contact">联系</a></li>
	<li><a href="#about">关于</a></li>
</ul>

<p>背景颜色添加到链接中显示链接的区域。</p>
<p>注意，整个区域是可点击的链接，而不仅仅是文本。</p>

</body>
</html>

示例说明：

  • display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
  • width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
 
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
 
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}

三、激活/当前导航条实例

在点击了选项后，我们可以添加 "active" 类来标注哪个选项被选中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习-当前导航栏</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>

<h2>垂直导航条</h2>
<p>在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中。</p>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

</body>
</html>

 四、创建链接并添加边框

可以在 <li> or <a> 上添加text-align:center 样式来让链接居中。

可以在 border <ul> 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个 <li> 元素上添加border-bottom :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习-导航栏</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid #555;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>

<h2>垂直导航条</h2>
<p>以下实例让每个链接居中，并给每个列表选项添加边框。</p>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

</body>
</html>

 五、全屏高度的固定导航条

接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习-全屏导航栏</title>
<style>
body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h2>Fixed Full-height Side Nav</h2>
  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div>

</body>
</html>

注意: 该实例可以在移动设备上使用

六、水平导航栏

有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。

这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。

6.1、内联列表项

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-水平导航栏内联(inline)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
li
{
display:inline;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>

</body>
</html>

 

实例解析：

  • display:inline; - 默认情况下，<li> 元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。

 6.2、浮动列表项

在上面的例子中链接有不同的宽度。

对于所有的链接宽度相等，浮动 <li>元素，并指定为 <a>元素的宽度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-浮动水平导航栏</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
}
li
{
	float:left;
}
a
{
	display:block;
	width:60px;
	background-color:#dddddd;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p><b>注意:</b> 如果 !DOCTYPE 没有定义, floating 可以产生意想不到的结果.</p>

<p>背景颜色添加到链接中显示链接的区域。整个链接区域是可点击的,不仅仅是文本。</p>

<p><b>注意:</b> overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出。.</p>

</body>
</html>

         

实例解析：

  • float:left - 使用浮动块元素的幻灯片彼此相邻
  • display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
  • width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

水平导航条实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习-水平导航栏</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li {
    float: left;
}

li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ddd;
}

li a.active {
    color: white;
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

</body>
</html>

 

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

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

相关文章

山西电力市场日前价格预测【2023-06-19】

山西电力市场日前价格预测【2023-06-19】

日前价格预测 预测明日&#xff08;2023-06-19&#xff09;山西电力市场全天平均日前电价为396.37元/MWh。其中&#xff0c;最高日前价格为468.17元/MWh&#xff0c;预计出现在21: 45。最低日前电价为345.23元/MWh&#xff0c;预计出现在13: 00。 以上预测仅供学习参考&#x…
阅读更多...
端口进程内存查看操作(linux、windows)

端口进程内存查看操作(linux、windows)

一 windows操作命令 1、查看某个端口的信息 netstat -aon | findstr "端口" 2、查看PID对应的应用程序名 tasklist | findstr "PID" 3、taskkill /f /t /im 进程名称 然后结束该进程&#xff1a;taskkill /f /t /im 程序名.exe &#xff08;当然你也…
阅读更多...
SpringBoot第12讲：SpringBoot接口如何对参数进行校验

SpringBoot第12讲：SpringBoot接口如何对参数进行校验

SpringBoot第12讲&#xff1a;SpringBoot接口如何对参数进行校验 本文是SpringBoot第12讲&#xff0c;使用SpringBoot开发Restful接口时, 对于接口的查询参数后台也是要进行校验的&#xff0c;同时还需要给出校验的返回信息&#xff0c;放到上文我们统一封装的结构中。那么如何…
阅读更多...
经典问题解析一

经典问题解析一

关于 const 的疑问 const 什么时候为只读变量&#xff1f;什么时候为常量&#xff1f; const 常量的判别标准 只有用字面量初始化的 const 常量才会进入符号表 (const 引用除外) 使用其他变量初始化的 const 常量仍然是只读变量 被 volatile 修饰的 const 常量不会进入符号…
阅读更多...
TOGAF10®标准中文版--（架构开发方法）开发周期

TOGAF10®标准中文版--（架构开发方法）开发周期

1.2.1 关键点 以下是关于 ADM 的关键点&#xff1a; ADM 在整个过程中、阶段之间和阶段内都是迭代的&#xff08;参见TOGAF 标准 — ADM 技术&#xff09; 对于 ADM 的每次迭代&#xff0c;都必须做出新的决定&#xff1a; — 企业覆盖范围待定 — 要定义的详细程度 — 目…
阅读更多...
ETCD安装部署与etcdctl常用命令

ETCD安装部署与etcdctl常用命令

ETCD安装部署与etcdctl常用命令 单机部署集群部署静态配置服务发现etcd自发现模式DNS自发现模式 etcdctl常用命令key的常规操作key的历史与watchwatch压缩 租约 etcd常用配置参数member相关参数cluster相关参数proxy相关参数安全相关参数日志相关参数不安全相关参数统计相关参数…
阅读更多...
存储笔记10 虚拟化

存储笔记10 虚拟化

存储虚拟化 识别不同的虚拟化技术 描述块级虚拟化技术 描述文件级虚拟化技术 讨论虚拟资源调配 Virtualization Overview 何为虚拟化 物理资源抽象到逻辑视图IT利用率和表现集中/共享资源简化资源管理减少停机时间 planned or unplanned 提高IT资源性能 虚拟内存虚拟网…
阅读更多...
如何下载并安装Ubuntu22.04

如何下载并安装Ubuntu22.04

Info 用于帮助不熟悉Ubuntu的朋友安装Ubuntu系统。 Herman Ye Auromix 2023-06-18 1.下载Ubuntu镜像 首先&#xff0c;前往Ubuntu官网下载镜像。 选择 Ubuntu 22.04.2 LTS&#xff0c;点击Download 22.04.2进行下载。 2.准备镜像烧录工具 前往balena官网下载烧录工具. 点击…
阅读更多...
ER图和对应关系模式（只写关键）

ER图和对应关系模式（只写关键）

本图用Visio进行绘图&#xff1a; ●矩形框内表明实体名 ●菱形框内表明联系类型 ●椭圆框内表明属性&#xff0c;可以是实体的属性&#xff0c;也可以是联系类型的属性 ●关键码的属性&#xff0c;在属性名下加下划线 ER图转关系模式说明&#xff1a; ER图中间含1&#xf…
阅读更多...
永磁同步直线电机学习笔记——什么是直线电机？

永磁同步直线电机学习笔记——什么是直线电机？

永磁同步直线电机&#xff08;Permanent Magnet Linear Synchronous Motor&#xff0c;简称PMLSM&#xff09;是一种电动机&#xff0c;它通过将永磁体和线圈组合在一起&#xff0c;将电能转化为机械运动。与传统的旋转电机不同&#xff0c;PMLSM是一种直线运动电机&#xff0c…
阅读更多...
AI 绘画（2）：Ai模型训练，实现“人物模型“自由

AI 绘画（2）：Ai模型训练，实现“人物模型“自由

文章目录 文章回顾感谢人员题外话Ai绘画公约Ai模型训练硬件要求显存设置查看显存大小显存过小解决方法 视频教程前期准备SD配置设置SD设置配置SD训练配置pt生成训练集收集训练集要求截图软件推荐训练集版权声明一键重命名图片训练图片来源批量修改图片尺寸 开始训练导入训练集&…
阅读更多...
mybatis02 CRUD

mybatis02 CRUD

CRUD代表四个基本功能&#xff1a;创建&#xff08;Create&#xff09;、检索&#xff08;Retrieve&#xff09;、更新&#xff08;Update&#xff09;和删除&#xff08;Delete&#xff09;。它们是大多数应用程序所需要的最基本的持久化操作。 - 创建&#xff08;Create&…
阅读更多...
【Java入门】-- Java基础详解之 [Java面向对象编程(初级)]

【Java入门】-- Java基础详解之 [Java面向对象编程(初级)]

目录 1.类与对象 2.类与对象的区别与联系 3.对象在JVM内存中的存在形式(重要) 4.属性/成员变量/字段 5.如何创建对象 6.类和对象的内存分配机制 7.面向对象的三大特征&#xff1f; 8.面向对象和面向过程&#xff1f; 9.匿名对象 10.方法(method) 11.方法的重载(over…
阅读更多...
一个AI关键词能卖500块？AI绘画引发研究关键词的商机

一个AI关键词能卖500块？AI绘画引发研究关键词的商机

一个AI关键词能卖500块&#xff1f;AI绘画引发研究关键词的商机&#xff01; 绘画一直被人们看作是视觉艺术的呈现方式。通常情况下&#xff0c;学习绘画需要理解调色、构图和线条等要素。然而&#xff0c;自从AI介入绘画领域后&#xff0c;绘画的"画风"迅速发生了变…
阅读更多...
Mac下载安装vscode

Mac下载安装vscode

1. 下载 先从 https://code.visualstudio.com 下载Mac版vscode。 2. 安装 下载之后在浏览器的下载中点击安装vscode 下载的时候会有提示 有时候还需要配置【安全性与隐私】&#xff0c;即允许App Store和被认可的开发者安装软件 3. 简单配置 默认进来会要求选择主题&a…
阅读更多...
1初步整合ABP模块化

1初步整合ABP模块化

1 首先创建一个WebApi项目 2 初步整合ABP模块化 Abp官网&#xff0c;这里我们先初步整合WebApi模块化&#xff0c;待程序运行起来&#xff0c;后续文章我们再对Abp进行深入。 2.1 NuGet&#xff1a;包Volo.Abp Volo,Abp&#xff1a;模块化必备 2.2 NuGet&#xff1a;Volo.Abp.A…
阅读更多...
scratch lenet(5): 快速生成随机数的C语言实现

scratch lenet(5): 快速生成随机数的C语言实现

文章目录 1. 目的2. 使用 rand() 的正确姿势3. 使用 TAOCP 公式3.1 实现3.2 使用 4. 随机数&#xff1a;用于 Xavier Glorot 初始化4.1 Xavier Glorot 初始化是什么4.2 使用C语言执行 Xavier Glorot 初始化 5. References 1. 目的 用于 lenet 网络训练开始时&#xff0c; weig…
阅读更多...
神奇的 SQL 之 HAVING 一个容易被忽视的主角！

神奇的 SQL 之 HAVING 一个容易被忽视的主角！

初识 HAVING 关于 SQL 中的 HAVING&#xff0c;相信大家都不陌生&#xff0c;它往往与 GROUP BY 配合使用&#xff0c;为聚合操作指定条件 说到指定条件&#xff0c;我们最先想到的往往是 WHERE 子句&#xff0c;但 WHERE 子句只能指定行的条件&#xff0c;而不能指定组的条件…
阅读更多...
使用css3如何实现一个文字打印效果

使用css3如何实现一个文字打印效果

前言 在很多网站首页介绍页里,为了吸引用户,暂留更长时间,使用了一些css3动画的 示例效果 文字打印.gif 实现这个动画原理 想要实现这个动画,改变元素的宽度,结合动画css3关键帧实现 具体代码如下所示 <!DOCTYPE html> <html lang"en"><head><m…
阅读更多...
[元带你学: eMMC协议详解 14] 数据擦除（Erase) 详解

[元带你学: eMMC协议详解 14] 数据擦除（Erase) 详解

依JEDEC eMMC 5.1及经验辛苦整理&#xff0c;付费内容&#xff0c;禁止转载。 所在专栏 《元带你学: eMMC协议详解》 内容摘要 全文 4200字&#xff0c; 主要内容介绍了各种擦除操作概念以记用法&#xff0c;总结了不同擦除操作的区别&#xff0c; 根据不同安全级别和应用场景…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023