【网页布局技术】项目五 使用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.mzph.cn/news/884091.shtml

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

相关文章

C++集合运算函数总结-

集合必须是有序的&#xff0c; merge&#xff1a;将两个有序范围合并到一个新的有序范围中。 set_union&#xff1a;将两个有序集合的并集存储到第三个集合中。 set_difference&#xff1a;将第一个有序集合中不在第二个有序集合中的元素存储到第三个集合中。 set_symmetri…

LeetCode20:有效的括号

原题地址&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目描述 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合…

架构师之路-学渣到学霸历程-33

Nginx的常用命令 nginx的重点在于配置文件&#xff0c;但是我们也得懂得这些命令怎么使用的&#xff1b; 先了解一下nginx的命令&#xff1b;如下面笔记~&#xff01; 1、Nginx命令 Nginx的命令&#xff1a; 如果用yum安装的话&#xff0c;默认会添加到PATH路径如果用源码安…

银河麒麟v10 xrdp安装

为了解决科技被卡脖子的问题&#xff0c;国家正在大力推进软硬件系统的信创替代&#xff0c;对于一些平时对Linux操作系统不太熟练的用户来讲提出了更高的挑战和要求。本文以银河麒麟v10 24.03为例带领大家配置kylin v10的远程桌面。 最近公司为了配置信创开发新购了几台银河麒…

什么是x86架构,什么是arm架构

什么是 x86 架构&#xff1f; x86 架构是一种经典的指令集架构&#xff08;ISA&#xff09;&#xff0c;最早由英特尔在 1978 年推出&#xff0c;主要用于 PC、服务器等领域。 它是一种复杂指令集计算&#xff08;CISC&#xff09;架构&#xff0c;支持大量的复杂指令和操作&…

客户的奇葩要求—在CAN网络的基础上加入了CAN_FD的节点

1&#xff1a;客户的奇葩要求 最近的工作中&#xff0c;遇到了一个有点奇葩的事&#xff0c;客户需要开发一个系统&#xff0c;我们负责其中的一个ECU&#xff0c;这个系统采取的是经典11bit ID的CAN网络。 今天突然提了一个要求&#xff0c;说要在网络中&#xff0c;加入支持…

uniapp 实现本地二维码 二维码中间增加图片不显示(显示白块)

使用 uni.getImageInfo({ }) 转化 将 图片地址转化成本地预览地址 initUrqCode(){// let logo http://mujiachaoshi.kiss55.com/78aca7812fd801f8e6d4d4482af70d38uni.getImageInfo({src: this.user.photo,success: (res) > {// 获取uQRCode实例var qr new UQRCode();// …

4G 模组的 FTP 应用:技术科普

众所周知FTP协议包括两个组成部分&#xff0c;其一为FTP服务器&#xff0c;其二为FTP客户端&#xff0c;今天我将为大家带来一场4G 模组的 FTP 应用技术科普&#xff1a; 以低功耗模组Air780E核心板为例。 1、FTP 概述 FTP&#xff08;File Transfer Protocol&#xff0c;文件…

PAT甲级-1074 Reversing Linked List

题目 题目大意 给一个链表的头结点和总节点个数&#xff0c;以及k。每k个节点的链表都要翻转。 思路 链表可以用一个结构体数组来存储&#xff0c;先遍历一遍&#xff0c;过滤掉不在链表中的节点。然后将过滤好的节点放入res数组中&#xff0c;每k个元素用一次reverse()&…

go语言gin框架平滑关闭——思悟项目技术2

目录 前言 直接关闭的缺陷 平滑关闭的使用场景 例子 思悟项目&#xff1a; golang qq邮件发送验证码——思悟项目技术1 前言 平滑关闭&#xff08;graceful shutdown&#xff09;是指在停止服务时&#xff0c;能够让现有的连接、任务或者操作优雅地完成&#xff0c;而不是…

44-RK3588s调试 camera-engine-rkaiq(rkaiq_3A_server)

在RK3588s平台上调试imx415 camera sensor 过程中&#xff0c;已经识别到了camera sensor ID&#xff0c;并且可以拿到raw图和isp处理后的图像&#xff0c;但是isp处理后的图像偏绿&#xff0c;来看查看后台服务发现rkaiq_3A_server没有运行&#xff0c;然后单独运行rkaiq_3A_s…

Python 变量在函数中的作用域

什么是局部变量&#xff1f; 作用范围在函数内部&#xff0c;在函数外部无法使用 什么是全局变量&#xff1f; 在函数内部和外部均可使用 如何将函数内定义的变量声明为全局变量&#xff1f; 使用global关键字&#xff0c; global变量 练习&#xff1a; 演示局部变量 #…

【jvm】jvm对象都分配在堆上吗

目录 1. 说明2. 堆上分配3. 栈上分配&#xff08;逃逸分析和标量替换&#xff09;4. 方法区分配5. 直接内存&#xff08;非堆内存&#xff09; 1. 说明 1.JVM的对象并不总是分配在堆上。2.堆是JVM用于存储对象实例的主要内存区域&#xff0c;存在一些特殊情况&#xff0c;对象…

百数功能更新——表单提交支持跳转到外部链接并支持传参

百数的表单外链功能允许用户将表单以链接的形式分享给外部用户&#xff0c;外部用户无需登录或加入团队即可访问并填写表单。 本次更新的表单提交后跳转指定链接的功能&#xff0c;在支持跳转内部链接的基础上&#xff0c;支持用户在完成表单填写并提交后&#xff0c;自动跳转…

C++笔记---可变参数模板

1. 简单介绍与基本语法 可变参数模板是指模板的类型参数列表的的参数个数可变。 C11支持可变参数模板&#xff0c;也就是说支持可变数量参数的函数模板和类模板&#xff0c;可变数目的参数被称为参数包&#xff0c;存在两种参数包&#xff1a; 模板参数包&#xff1a;表示零或…

BSV区块链为供应链管理带来效率革命

​​发表时间&#xff1a;2024年10月10日 供应链管理是众多行业的重中之重&#xff0c;它确保了商品能够从制造商处顺畅地传递到消费者手中。然而&#xff0c;传统的供应链管理面临着许多挑战&#xff0c;包括缺乏透明度、延误、欺诈和协调上的低效率等等。 BSV区块链技术的出…

Linux基础(七):Linux文件与目录管理

Linux文件与目录管理 1.目录与路径1.1 cd1.2 pwd1.3 mkdir1.4 rmdir1.5 ls1.6 cp1.7 rm1.8 mv 2.可执行文件路径的变量&#xff1a;$PATH3.从字符串中获取目录名称和文件名称4.文件内容读取4.1 cat与tac4.2 nl4.3 more和less4.4 head与tail4.5 od 5 使用touch来改变文件的时间6…

C语言初阶:十一.代码调试技巧

❤欢迎各位大佬访问&#xff1a;折枝寄北-CSDN博客折枝寄北擅长C语言初阶,等方面的知识,折枝寄北关注python,c,java,qt,c语言领域.https://blog.csdn.net/2303_80170533?typeblog❤文章所属专栏https://blog.csdn.net/2303_80170533/category_12794764.html?spm1001.2014.300…

CMake知识点

参考&#xff1a; https://zhuanlan.zhihu.com/p/661284252 cmake使用教程&#xff08;实操版&#xff09;-CSDN博客 【CMake】CMake从入门到实战系列&#xff08;二&#xff09;——实例入手&#xff0c;讲解CMake的基本流程_cmake创建一个可执行目标的过程-CSDN博客 一、…

【Java多线程】5 Java中的并发工具

第五部分&#xff1a;Java 中的并发工具 Java 提供了多种并发工具类&#xff0c;帮助开发者更好地管理和控制多线程的执行。这些工具类主要位于 java.util.concurrent 包中&#xff08;可点击跳转拓展一&#xff09;&#xff0c;提供了比传统的 synchronized 更强大和灵活的并…