【网页布局技术】项目五 使用CSS设置导航栏

《CSS+DIV网页样式与布局案例教程》 徐琴

目录

  • 任务一 制作简单纵向导航栏
    • 支撑知识点
    • 1.合理利用display:block属性
    • 2.利用margin-bottom设置间隔效果
    • 3.利用border设置特殊边框
  • 任务二 制作简单横向导航栏
  • 任务三 制作带图片效果的横向导航栏
  • 任务四 制作带下拉菜单的横向导航栏
    • 支撑知识点
    • 1.用*号设置全局样式
    • 2.对特定标签下的子标签设置样式

任务一 制作简单纵向导航栏

导航栏包括纵向导航栏、横向导航栏、带下拉菜单的导航栏等。在制作导航栏的过程中,一般会应用CSS样式表来对导航栏进行设置和美化。本任务中,我们从最基础的纵向导航栏开始学习。
在这里插入图片描述

支撑知识点

1.合理利用display:block属性

display属性规定元素的显示类型,其具有多个不同的属性值,其中display:block表示将元素转换为块级元素。

2.利用margin-bottom设置间隔效果

在制作纵向导航栏或者列表一类的纵向HTML结构时,如果设计要求导航栏的每一项之间有一定间隔的时候,可以使用margin-bottom属性来实现这个效果。
对于单个的元素来讲,margin-bottom属性是设置此元素和它下面的元素的间隔,当此属性被设置在纵向菜单或者列表结构里面时,就可以产生均匀的间隔效果。

3.利用border设置特殊边框

特殊边框的设置并不困难,在项目四中,我们已经知道border可以对4个方向的边框分别进行设置。那么在设置边框的时候,可以单独设置一个方向的边框,也可以对多个方向的边框分别进行不同的样式设置。

任务二 制作简单横向导航栏

在本任务中,我们将通过制作简单横向导航栏,来继续学习制作导航栏的方法及一些CSS样式的使用。本任务将会使用到前一个任务中的一些步骤,同时会涉及到浮动、块元素等知识。
在这里插入图片描述

任务三 制作带图片效果的横向导航栏

通过前面2个任务的练习,大家已经对导航栏有了初步的了解,现在我们需要在前面2个例子的基础上,对导航栏进行更深入的学习,制作一个带有背景图片变换效果的横向导航栏,当将鼠标指针移动到导航栏的菜单项时背景会发生变化。

在这里插入图片描述

任务四 制作带下拉菜单的横向导航栏

本任务将要制作带下拉菜单的横向导航栏。该导航栏的制作比前面3个任务制作都要复杂一些。要在不使用javascript的情况下制作带下拉菜单的导航栏,需要合理利用CSS的display属性,通过设置display属性的值来完成菜单的显示和隐藏。
在这里插入图片描述

支撑知识点

1.用*号设置全局样式

对网页进行样式设置时,有时会遇到需要设置全局样式的情况,也就是设置页面上所有标签、类、id都使用的共有样式。CSS为我们提供了一种解决方法,就是使用*{}选择器。由该选择器定义的样式,浏览器会视作页面上所有的内容都采用这个样式。

2.对特定标签下的子标签设置样式

一个网页中,通常会在不同的地方有相同的标签,比如2个不同class的<div>下面都可能会有超链接标签、列表标签等。要给这些不同位置的标签添加样式,一种方法是为这些不同位置的标签设置对应的class或id,但这样会使页面上有大量的class或id,不利于样式的处理;另外一种方法就是使用父标签加子标签的形式,也就是利用在项目二学习的嵌套选择器。其语法格式为:
父标签 子标签 孙标签 曾孙标签 …{}

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于LangChain构建安全Agent应用实践(含代码)

概述&#xff1a;本文基于langchain和Cyber Security Breaches数据集构建Agent&#xff0c;并基于该Agent实现了数据分析、趋势图输出、预测攻击态势三个功能&#xff0c;最后给出Agent在安全领域应用的三点启示。 前提&#xff1a; 1、拥有openai API KEY&#xff1b;&#…

机器学习-决策树

登录后复制 import numpy as np import matplotlib.pyplot as plt from sklearn import datasetsiris datasets.load_iris() X iris.data[:,2:] y iris.target plt.scatter(X[y0,0], X[y0,1]) plt.scatter(X[y1,0], X[y1,1]) plt.scatter(X[y2,0], X[y2,1]) plt.show() 1.2.…

为什么大模型都是Decoder-only结构?

扫一扫下方&#xff0c;获取更多面试真题的集合 在探讨当前大型语言模型&#xff08;LLM&#xff09;普遍采用Decoder-only架构的现象时&#xff0c;我们可以从以下几个学术角度进行分析&#xff1a; 注意力机制的满秩特性&#xff1a;Decoder-only架构采用的因果注意力机制&am…

Linux系统块存储子系统分析记录

1 Linux存储栈 通过网址Linux Storage Stack Diagram - Thomas-Krenn-Wiki-en&#xff0c;可以获取多个linux内核版本下的存储栈概略图&#xff0c;下面是kernel-4.0的存储栈概略图&#xff1a; 2 存储接口、传输速度 和 协议 2.1 硬盘 《深入浅出SSD&#xff1a;固态存储核心…

北京迅为iTOP-LS2K0500开发板快速使用编译环境虚拟机Ubuntu基础操作及设置

迅为iTOP-LS2K0500开发板 迅为iTOP-LS2K0500开发板采用龙芯LS2K0500处理器&#xff0c;基于龙芯自主指令系统&#xff08;LoongArch&#xff09;架构&#xff0c;片内集成64位LA264处理器核、32位DDR3控制器、2D GPU、DVO显示接口、两路PClE2.0、两路SATA2.0、四路USB2.0、一路…

电子电气架构 --- 车载芯片现状

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 所有人的看法和评价都是暂时的&#xff0c;只有自己的经历是伴随一生的&#xff0c;几乎所有的担忧和畏惧…

MySQL分层结构由哪些组成?

1、MySQL分层结构由哪些组成&#xff1f; MySQL按照功能模块可以分为3层&#xff1a;连接层、服务层和存储引擎层。 连接层位于Server服务层的最外层&#xff0c;负责与客户端的直接交互&#xff0c;从功能上单独划分一层更合适。 不同的存储引擎在存储层有不同的实现&#x…

Vue3入门--[vue/compiler-sfc] Unexpected token, expected “,“ (18:0)

新手小白学习Vue–入门就踩坑系列 问题描述 创建了一个Person.vue&#xff0c;保存后直接报错&#xff1a; [plugin:vite:vue] [vue/compiler-sfc] Unexpected token, expected "," (18:0) 在网上搜了半天也没找到原因&#xff0c;最后还得靠自己&#xff0c;现将解…

【宠粉赠书】大模型项目实战:多领域智能应用开发

在当今的人工智能与自然语言处理领域&#xff0c;大型语言模型&#xff08;LLM&#xff09;凭借其强大的生成与理解能力&#xff0c;正在广泛应用于多个实际场景中。《大模型项目实战&#xff1a;多领域智能应用开发》为大家提供了全面的应用技巧和案例&#xff0c;帮助开发者深…

java:入门基础(1)

练习一&#xff1a;文字版格斗游戏 需求: ​ 格斗游戏&#xff0c;每个游戏角色的姓名&#xff0c;血量&#xff0c;都不相同&#xff0c;在选定人物的时候&#xff08;new对象的时候&#xff09;&#xff0c;这些信息就应该被确定下来。 举例&#xff1a; ​ 程序运行之后…

Apache Paimon介绍

目录 背景 诞生 应用场景 实时数据分析与查询 流批一体处理 低成本高效存储 具体业务场景示例 总结 系统架构 存储层 元数据管理 计算层 数据摄入和输出 查询优化 扩展性和可靠性 生态系统集成 总结 核心概念 表&#xff08;Table&#xff09; 模式&#xf…

书生实战营第四期-第三关 Git+InternStudio

一、任务1: 破冰活动&#xff1a;自我介绍 1.fork项目到自己的账号下 2. 配置git并克隆项目到InternStudio本地 3.创建分支 4.创建自己的介绍文件 5.提交更改分支 6.推送分支到远程仓库 这里推送时会报错 问题解决&#xff1a;将密码换成access token 7.检查提交内容 分支…

【商汤科技-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

2-134 基于matlab的图像边缘检测

基于matlab的图像边缘检测&#xff0c;采用六种算子(分别是gabor、拉普拉斯、priwitt、robert、sobel、wallis微分算子&#xff09;&#xff0c;对图象进行边缘检测比较&#xff0c;输出边缘检测结果。可对比效果优劣。程序已调通&#xff0c;可直接运行。 下载源程序请点链接…

【计网】网络协议栈学习总结 --- 浏览器上输入网址域名后点击回车,到底发生了什么?

未来的路不会比过去更笔直&#xff0c;更平坦&#xff0c; 但是我并不恐惧&#xff0c; 我眼前还闪动着道路前方野百合和野蔷薇的影子。 --- 季羡林 《八十抒怀》--- 浏览器上输入URL后回车&#xff0c;到底发生了什么&#xff1f; 1 前言2 解析URL形成http请求3 DNS域名解…

ReactNative Fabric渲染器和组件(5)

ReactNative Fabric渲染器和组件 简述 Fabric是ReactNative中新架构最核心的模块&#xff0c;本章我们会来了解一下自定义一个Fabric组件&#xff0c;然后在JS文件中声明之后如何&#xff0c;是怎么映射到原生构建一个View的。 关于Fabric架构理念官网已经有说明了&#xff0…

推荐一款优秀的pdf编辑器:Ashampoo PDF Pro

Ashampoo PDF Pro是管理和编辑 PDF 文档的完整解决方案。程序拥有您创建、转换、编辑和保护文档所需的一切功能。根据需要可以创建特定大小的文档&#xff0c;跨设备可读&#xff0c;还可以保护文件。现在您还能像编辑Word文档一样编辑PDF! 软件特点 轻松处理文字 如 Microso…

开发流程初学者指南——需求分析

目录 从零开始理解需求分析什么是需求分析&#xff1f;需求分析的目标需求分析的基本原则需求分析的各个阶段需求分析的常用方法和工具编写需求文档总结 从零开始理解需求分析 需求分析是软件开发过程中不可或缺的一环&#xff0c;它帮助我们明确用户的需求&#xff0c;确保最…

Linux中Web服务器配置和管理(Apache)

文章目录 一、WEB服务器介绍1.1、WEB服务器概述1.2、WEB服务器的发展历史1.3、WEB服务器的优点与缺点1.4、WEB服务器的工作流程 二、Apache介绍2.1、Apache是什么2.2、Apache的发展史与应用场景2.3、Apache的特点2.4、Apache的工作原理2.5、Apache的模块 三、安装使用Apache服务…

在VS Code中操作MySQL数据库

【基础篇】 【小白专用24.5.26 已验证】VSCode下载和安装与配置PHP开发环境&#xff08;详细版&#xff09;_vscode php-CSDN博客 ~~~~~~~~~~~~~~~~~~~~~~~~~ 在VS Code中下载插件 Prettier SQL VSCode 和 MySQL : 随后在VS Code中点击Database图标 在连接界面输入MySQL数据库…