【网页布局技术】项目五 使用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,一经查实,立即删除!

相关文章

银河麒麟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;加入支持…

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()&…

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; 演示局部变量 #…

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

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

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…

什么是aps排产管理软件?aps排产管理软件有什么用?最详细解释!

近几年&#xff0c;APS排产管理软件特别火&#xff0c;很多制造业企业都在谈论和使用它。不过&#xff0c;因为信息太多太杂&#xff0c;我们平时接收到的往往都是零零碎碎的介绍&#xff0c;很难全面了解它。所以&#xff0c;今天这篇文章就来给大家做个整合&#xff0c;把APS…

微信小程序25__实现卡片变换

先看效果图 实现代码如下&#xff1a; <view class"page" style"filter:hue-rotate({{rotation}}deg)"><view class"prev" catchtap"toPrev">《《《</view><view class"next" catchtap"toNext&q…

vue项目中如何在路由变化时增加一个进度条

在 Vue.js 项目中&#xff0c;使用路由&#xff08;如 Vue Router&#xff09;时&#xff0c;为了提升用户体验&#xff0c;你可能会想要在路由变化时显示一个进度条。这可以通过多种方式实现&#xff0c;其中一种流行的做法是使用第三方库&#xff0c;如 vue-loading-bar 或 n…

4款专业音频在线剪辑工具帮你开启创意之路。

音频在线剪辑工具能够为我们提供很大的便利&#xff0c;对于不管是专业的音乐制作人还是音频创作爱好者来说&#xff0c;都能借助一些音频编辑工具来充分发挥自己的创意。所以这一次&#xff0c;我要给大家介绍几个专业方便的音频剪辑工具。 1、福昕音频在线 直达链接&#x…

JK触发器(Quartus与Modelsim联合仿真)

JK触发器由于其灵活的逻辑功能&#xff0c;被广泛应用于数字电路设计中&#xff0c;如计数器、寄存器、序列信号发生器等。它可以通过改变J和K的输入来实现不同的逻辑操作&#xff0c;使得设计更加简洁高效。 在数字电子技术中&#xff0c;JK触发器的真值表是理解其工作原理和设…

Redis高频面试题

一、Redis有什么好处? 高性能:Redis是一个基于内存的数据存储系统,相比于传统的基于磁盘的数据库系统,它能够提供更高的读写性能。支持丰富的数据类型:Redis支持多种数据结构,包括字符串、哈希、列表、集合、有序集合等,这使得它可以用于多种不同的应用场景。持久化:Re…

Javaweb 实验7 JSP内置对象II实现购物车

实验七 JSP内置对象II 目的&#xff1a; 掌握JSP内置对象的使用。理解JSP的作用域掌握session&#xff0c;application对象的使用 实验要求&#xff1a; 完成实验题目要求提交实验报告&#xff0c;将代码和实验结果页面截图放入报告中 实验过程&#xff1a; 一、结合之前…

Linux随记(十二)

一、redhat6.9 &#xff0c;sftp连接后出现2个connect close 问题描述&#xff1a; 操作系统&#xff1a;redhat 6.9 客户反馈&#xff0c;他们机器sftp连接jxx192.168.1.100后出现connection closed排查过程&#xff1a; 登录192.168.1.100 &#xff08;最开始使用普通用户…

强大的文本编辑器Notepad++8.4.6 最新版

Notepad最新版是一款多功能的代码编辑工具。Notepad官方版支持27种编程语言&#xff0c;涵盖C、C 、Java 、C#,、XML、 HTML,、PHP、python等等&#xff0c;能够帮助程序员提高编辑效率。Notepad软件支持python与sql代码高亮功能&#xff0c;并且免费开源&#xff0c;能够完美地…