位置: IT常识 - 正文

html+css实现页面顶部导航栏(html-css)

编辑:rootadmin
html+css实现页面顶部导航栏

推荐整理分享html+css实现页面顶部导航栏(html-css),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:html如何用css,html-css,html-css,html网页css,html+css制作网页,html页面写css,html页面写css,html-css,内容如对您有帮助,希望把文章链接给更多的朋友!

最终效果如下:

接下来,我将从html和css两大部分,逐步为您讲解制作过程

目录

Html 实现布局

创建父栏目

创建子栏目

插入外部样式表,为接下来的css编辑做准备

Css 实现样式

排布文本,设置背景

交互效果的实现

实现子栏的隐藏与显示

实现当鼠标移动到子栏时的视觉互动


Html 实现布局创建父栏目<body> <ul id="ulfather"><!--创建父列--> <li class="lifather"> <h4>栏目一</h4> </li> <li class="lifather"> <h4>栏目二</h4> </li> <li class="lifather"> <h4>栏目三</h4> </li> <li class="lifather"> <h4>栏目四</h4> </li> <li class="lifather"> <h4>栏目五</h4> </li> </ul></body>

创建子栏目

因为有五个父栏目,每个父栏我都打算设置3个子栏;如果把全部五个栏目的代码都贴上来,则太过冗长了。下面仅展示在“栏目一”创建子栏目的代码

<li class="lifather"> <h4>栏目一</h4> <ul class="ulson"><!--创建子列--> <li class="lison">子栏</li> <li class="lison">子栏</li> <li class="lison">子栏</li> </ul></li>html+css实现页面顶部导航栏(html-css)

插入外部样式表,为接下来的css编辑做准备

这步操作的代码我就不放了,因为每个人存放css文件的位置不同,如果不知道如何从外部插入样式表,可以参考以下方法:

<head><link rel="stylesheet" href="外部样式表的位置"></head>Css 实现样式排布文本,设置背景*{ margin: 0;/*清除外边距*/ padding: 0;/*清除内边距*/ list-style: none;/*删除<li>标签生成的点*/}body{ background-image: url('https://www.yuucn.com/wp-content/uploads/2023/05/1684753161-f8c2113278c8b38.png');/*插入背景图片*/ background-repeat: repeat-x;/*让背景图仅在x轴重复*/ display: flex;/*设置为弹性盒*/ justify-content: center;/*导航栏居中*/}#ulfather{ display: flex;/*设置为弹性盒*/ background-color: rgb(40, 44, 100);/*设置栏目背景为深紫色*/ box-shadow: 2px 5px 15px rgba(0, 0, 0, .7);/*阴影效果*/ border-radius: 5px;/*圆角效果*/ width: 350px;/*导航栏宽度*/ height: 30px;/*导航栏长度*/ line-height: 30px;/*文字垂直居中*/}.lifather{ width: 70px;/*每个栏目占宽70像素,把350像素的导航栏5等分*/ text-align: center;/*文字水平居中*/ color: rgb(160, 160, 230);/*设置字体颜色为浅紫色*/}.ulson{ background-color: rgb(100, 100, 100, .5);/*设置子栏背景为半透明灰色*/ border-radius: 0px 0px 5px 5px;/*圆角效果*/ color: rgb(250, 250, 250);/*设置字体颜色为白色*/}

交互效果的实现实现子栏的隐藏与显示

隐藏:在.ulson中添加一行代码即可

.ulson{ background-color: rgb(100, 100, 100, .5);/*设置子栏背景为半透明灰色*/ border-radius: 0px 0px 5px 5px;/*圆角效果*/ color: rgb(250, 250, 250);/*设置字体颜色为白色*/ display: none;/*初始状态为隐藏*/}

显示:当鼠标移动到栏目上时,显示对应的子栏

.lifather:hover .ulson{ display: block;}

 

实现当鼠标移动到子栏时的视觉互动

当鼠标指向子栏时,子栏颜色变深

.lison:hover{ background-color: rgba(0, 0, 0, .3);}

总结

以上就是利用html和css实现页面顶部导航栏的过程了,实际使用时,把文本适当修改,并插入链接即可实现完整的功能了。

本文链接地址:https://www.jiuchutong.com/zhishi/295159.html 转载请保留说明!

上一篇:马卡雷纳山脉中的卡诺克里斯塔尔斯河,哥伦比亚 (© Jorge Iván Vásquez Cuartas/Getty Images)(马卡雷纳大教堂)

下一篇:VSCode创建Vue项目完整教程(使用vscode开发vue例子)

  • 荣耀magic3pro和苹果12怎么选(荣耀magic3pro和苹果12)

    荣耀magic3pro和苹果12怎么选(荣耀magic3pro和苹果12)

  • 企业微信怎么切换账号(企业微信怎么切换实名认证)

    企业微信怎么切换账号(企业微信怎么切换实名认证)

  • 华为手机智能语音如何关闭(华为手机智能语音怎么开启)

    华为手机智能语音如何关闭(华为手机智能语音怎么开启)

  • 荣耀play4有指纹解锁吗(荣耀play4有指纹吗)

    荣耀play4有指纹解锁吗(荣耀play4有指纹吗)

  • 微信评论中回复别人的信息其他人能看到吗(微信评论中回复别人的信息其他人)

    微信评论中回复别人的信息其他人能看到吗(微信评论中回复别人的信息其他人)

  • 微信拉黑可以看到朋友圈吗(微信拉黑可以看到头像更新吗)

    微信拉黑可以看到朋友圈吗(微信拉黑可以看到头像更新吗)

  • Zoom会议app没有声音(zoom视频会议怎么没有声音)

    Zoom会议app没有声音(zoom视频会议怎么没有声音)

  • 抖音后台运行会显示在线吗

    抖音后台运行会显示在线吗

  • rmx1971是什么手机(rmx1971是什么手机型号)

    rmx1971是什么手机(rmx1971是什么手机型号)

  • 抖音小店提现多久到账(抖音小店提现多少天)

    抖音小店提现多久到账(抖音小店提现多少天)

  • 手机总收到拼多多短信(老是收到拼多多的各种信息,怎么关掉啊?)

    手机总收到拼多多短信(老是收到拼多多的各种信息,怎么关掉啊?)

  • gopro8和7的区别(gopro7和8的区别价格)

    gopro8和7的区别(gopro7和8的区别价格)

  • 对方通过扫一扫添加什么意思(对方通过扫一扫添加微信)

    对方通过扫一扫添加什么意思(对方通过扫一扫添加微信)

  • 芒果tv退出登录在哪里(芒果TV退出登录)

    芒果tv退出登录在哪里(芒果TV退出登录)

  • n3150相当于什么处理器(n3150性能相当于)

    n3150相当于什么处理器(n3150性能相当于)

  • 微信活动账单怎么收钱(微信活动账单怎么查询)

    微信活动账单怎么收钱(微信活动账单怎么查询)

  • word文档删除修改痕迹(word文档删除修改痕迹之后为什么右边有空白的)

    word文档删除修改痕迹(word文档删除修改痕迹之后为什么右边有空白的)

  • 微信怎么发超过25m的图片(微信怎么发超过30秒的视频朋友圈)

    微信怎么发超过25m的图片(微信怎么发超过30秒的视频朋友圈)

  • 怎样下载视频到电脑里(怎样下载视频到手机相册)

    怎样下载视频到电脑里(怎样下载视频到手机相册)

  • 手机如何定时发微博(手机如何定时发送图片)

    手机如何定时发微博(手机如何定时发送图片)

  • miui10使用痕迹查询(miui软件使用记录)

    miui10使用痕迹查询(miui软件使用记录)

  • 24awg网线是几类(24awg网线是几类网线)

    24awg网线是几类(24awg网线是几类网线)

  • ps4待机怎么唤醒(ps4待机怎么唤醒黑屏)

    ps4待机怎么唤醒(ps4待机怎么唤醒黑屏)

  • reno拍照技巧(opporeno怎么拍照好看)

    reno拍照技巧(opporeno怎么拍照好看)

  • 5g商用牌照是什么(5g商用牌照发放的上市公司)

    5g商用牌照是什么(5g商用牌照发放的上市公司)

  • iphone8plus打电话对方听不到(iPhone8plus打电话声音小)

    iphone8plus打电话对方听不到(iPhone8plus打电话声音小)

  • 圣伊莱亚斯国家公园中的铜河三角洲,阿拉斯加 (© Frans Lanting/plainpicture)(圣伊利亚斯山)

    圣伊莱亚斯国家公园中的铜河三角洲,阿拉斯加 (© Frans Lanting/plainpicture)(圣伊利亚斯山)

  • 不含税价格计算方法
  • 出口报关单上面的运费怎么填
  • 只有费用没有收入成本怎么填所得税
  • 驾驶员行车补贴开什么发票
  • 发票上是17%的税率吗
  • 产品成本核算时做好哪些基础工作
  • 金融资产的划分标准以及相关的处理怎么做
  • 公司聘请专家的差旅费可以税前扣除吗
  • 知识产权服务项目
  • 免税农产品转出进项税税率
  • 金税盘服务费可以当月抵扣吗
  • 风险纳税人怎么查原因
  • 纳税主要是哪些方面
  • 逃避的概念
  • 销售百分比法计算步骤
  • 管家婆怎样查历史记录
  • 软件企业用退税吗
  • 建筑 分包
  • 返回的工会经费如何做账最新
  • 企业收入代扣税金应该怎么做会计处理?
  • 股东利润分配预缴税款
  • 招待客户产生的住宿费
  • 外籍员工家属入境
  • 租金怎么来计算个税
  • 我国的社会保险费
  • 政府收储土地补偿款账务处理
  • 暂估入库怎么处理
  • rancher2教程
  • 收到的销项负数要认证吗
  • 国有企业上缴利润的账务处理怎么处理?
  • 代扣的工会会费怎么做账
  • 应付票据到期怎么处理
  • antvl7
  • 城镇土地使用税纳税义务发生时间
  • 长期借款利息费用的资本化账务处理
  • 新建厂房费用应计入什么
  • vue中数字运算
  • 如何一次性删除微信账单记录
  • 证券公司代理发行
  • 工资如何记账
  • 前端必学
  • python捕获异常继续执行
  • mysql5.7.33压缩包安装教程
  • 现金发放工资会扣税吗
  • 百旺连接服务器失败,是否使用离线文件进行更新
  • 银行开户有几种账户
  • 原始凭证太多怎么做账
  • 发放职工薪酬计入什么科目
  • 税费损失
  • 捐赠固定资产怎么入账
  • 营业外支出什么科目借贷方向
  • 其他应付账款在借方表示什么
  • 维修费成本怎么结转
  • 不动产租赁按简易计税吗
  • 行政单位维修管理制度
  • 职工福利费如何计算
  • 什么样的原始凭证不能用
  • phpstorm配置php环境 mac os
  • sql数据库回滚操作
  • 安装win8正在安装应用要多久
  • 电脑中毒蓝屏了怎么办修复
  • 如何在linux shell关闭443端口
  • 浏览器firefox
  • 基于JavaScript的图书管理系统
  • node搭建项目
  • 什么绑定什么服务
  • python append、extend与insert的区别
  • bootstrap快速入门
  • js日期格式转换
  • 国税登录不了
  • 税控盘的口令密码是什么
  • 社保和税局关联后还要申报吗
  • 社保申报每月几号申报
  • 地税发票查询官网查询
  • 如何查询税控盘是否注销成功
  • 太原公安分局有几个
  • 解放服务站总部电话
  • 税务局与税务所工资哪个高
  • 签订设计合同
  • 减免所得税额怎么算的
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设