位置: 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例子)

  • 成立蔬菜公司免税吗
  • 适用综合所得税率表
  • 个人转让著作权免税吗
  • 坏账准备计提比率计算公式
  • 存续分立的账务处理
  • 去外地装修
  • 支付土地使用权的会计处理
  • 保险柜库存现金留存不能超过多少
  • 以前年度损益所得怎么算
  • 开错的红字发票申请单上传了怎么撤销?
  • 进出口货物买卖合同
  • 外汇风险管理的贸易融资法
  • 研发费用加计扣除政策执行指引
  • 信用减值损失属于什么会计要素
  • 年终奖需要计入工资交社保吗
  • 通用机打发票属于什么发票
  • 金融企业贷款损失准备金
  • 公司零报税需要会计吗
  • 固定资产实物归哪个部门管理
  • 个人出租住房如何倒算开票金额
  • 研发费加计扣除做账务处理吗
  • 仓库的租赁费
  • 小微企业行业划分标准 工信部
  • 个人汇算清缴已经做了公司怎么改申报
  • 哪些税种计入应交税费
  • 电脑主板bios设置
  • 电脑装机光盘
  • windows11永久解决蓝屏
  • 应付股利的会计科目
  • 自创商誉的确认
  • 微软win11预览版
  • 实际借款成本率
  • zendstudio怎么创建php项目
  • 绿化管理服务经营范围
  • php短链接api
  • js前端路由
  • opencv模板匹配原理
  • 微软 大中华区 前副总裁
  • php获取服务端ip
  • 红字发票已开但红字发票信息表已核销待查证,怎么回事?
  • 个体工商户开票是企业还是个人
  • 在Python中如何求坐标中的任意两个点的距离
  • 大气污染物排放2020标准
  • mysql5.7.23安装配置教程
  • 织梦标签理解
  • 银行结算方式有哪几种方式?其具体内容是什么?
  • 采用工作底稿法编制现金流量表是以工作底稿为
  • 血液制品增值税税率
  • 企业摊销无形资产价值时的会计处理
  • 企业所得税营业成本包括管理费用吗
  • 固定资产错记到费用了怎么办
  • 我国流转税税制结构的现状及改进意见
  • 税控盘费用进什么科目
  • 苗木税票怎么抵扣
  • 已付款收货未收货怎么办
  • 部门费用的核算包括
  • 股东投资设备入帐与购买设备入帐的区别
  • 新会计准则捐赠收入
  • 如何恢复数据库删除的文件
  • Linux下Mysql5.7.19卸载方法
  • ubuntu系统中文
  • MySQL5.6.31 winx64.zip 安装配置教程详解
  • linux系统基本指令
  • xmp文件是干嘛用的
  • win10怎么关闭防火系统
  • macbook2020款改硬盘
  • ngwatch.exe
  • 自动备份文件并发送到Gmail (适用G级数据的备份)
  • Python连接access数据库
  • unity3d最新api
  • 用python学算法
  • python科学计算程序
  • javascript中的数据类型分为两大类
  • 常见的java数据类型有哪些
  • python dj
  • 软件开发交流平台
  • 施工企业应缴纳的税金计算
  • 网上报税失败怎么办
  • 新疆伊犁水费怎么交
  • 市民服务热线有用吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设