当前位置: 首页 > news >正文

使用html+css+javascript练习项目布局--创建导航栏

样例展示:
在这里插入图片描述
html展示

<header><div class="logo"><a href="/"><img src="./images/logo.png" alt=""></a></div><nav class="navBar"><ul class="navBar-list"><li class="jH"><a href="/">首页</a></li><li class="jH"><a href="/">和美团合作</a></li><li class="jH jI"><a href="/">我们的科技</a></li><li class="jH"><a href="/">企业社会责任</a></li><li class="jH"><a href="/">美团公益</a></li><li class="jH"><a href="/">信息公开</a></li><li class="jH"><a href="/">投资者关系</a></li><li class="jH"><a href="/" target="_blank">加入我们</a></li></ul></nav><div class="right"><div class="il">下载和关注</div><div class="kl">简体中文</div></div>
</header>
  1. 页面样式重置(部分浏览器自带样式,为保证一致,重置)
* {margin: 0;padding: 0;box-sizing: border-box;
}
  1. 设置导航区域
nav {width: 100%;height: 80px;background-color: aqua;
}
  1. 导航区域显示
/* ul */
.navBar-list{display: flex;align-items: center;justify-content: center;height: 100%;list-style: none;
}
/* li */
.navBar-list .jH {font-size: 16px;font-family: Microsoft YaHei UIpadding: 8px;
}
/* a */
.navBar-list .jH a{text-decoration: none; 
}
  1. 左侧logo显示
/* 左侧的logo */
.logo,.right {display: inline-block;
}.logo img {width: 117px;height: 46px;
}
  1. 右侧两个按钮
/* 右侧的两个按钮 */
.right {display: flex;align-items: center;
}.kl,.il {color: rgb(40, 47, 59);font-size: 16px;margin-right: 20px;
}
  1. ☆☆☆☆三者都显示在导航栏用到flex布局
/* 实现图片logo、导航栏、以及右侧在同一行 */
header {width: 100%;height: 80px;background-color: rgb(223, 220, 229);display: flex; /* 关键:开启flex布局 */align-items: center;/* 垂直居中 */justify-content: space-between;/* 左右分布:logo左,导航中,右侧右 */padding: 0 40px;
}
http://www.dtcms.com/a/344494.html

相关文章:

  • 高并发场景数据与一致性的简单思考
  • 理解音频响度:LUFS 标准及其计算实现
  • 在灵码中配置MCP服务
  • Basic Threejs (2)
  • Unity中国小游戏行业沙龙:抖音小游戏平台分析与规划
  • Excel处理控件Aspose.Cells教程:使用Python将 Excel 转换为 NumPy
  • AWS OpenSearch 是什么
  • 复合设计模式
  • 阿里云详解:与 AWS、GCP 的全方位比较
  • openEuler系统中home文件夹下huawei、HwHiAiUser、lost+found 文件夹的区别和作用
  • 农业-学习记录
  • vue中监听页面滚动位置
  • Playwright进阶指南 (5):拦截与模拟网络请求
  • 【LLMs篇】19:vLLM推理中的KV Cache技术全解析
  • SymPy 中抽象函数的推导与具体函数代入
  • 《器件在EMC中的应用》---磁珠在EMC中的应用
  • 一次性密码(OTP)原理及应用
  • 解决 PyTorch 导入错误:undefined symbol: iJIT_NotifyEvent
  • 数据结构之深入探索快速排序
  • Spring Start Here 读书笔记:第10章 Implementing REST services
  • vue vxe-gantt 甘特图自定义任务条样式模板 table 自定义插槽模板
  • 云手机是依靠哪些技术运行的?
  • Shell脚本源码安装Redis、MySQL、Mongodb、PostgreSQL(无报错版)
  • 遥感机器学习入门实战教程|Sklearn案例⑥:网格搜索与超参数优化
  • Logstash——性能、可靠性与扩展性架构
  • Python爬虫实战:构建古籍抄本数据采集分析系统
  • 实验二 Cisco IOS Site-to-Site Pre-share Key
  • LeetCode第55题 - 跳跃游戏
  • GitHub 热榜项目 - 日榜(2025-08-22)
  • 解析三品汽车零部件PLM系统解决方案:如何助力行业解决研发管理难题