简单导航栏的制作

原创 已于 2022-09-01 10:13:24 修改 · 1.4k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #css3

于 2020-03-17 20:13:55 首次发布
本文分享了前端初学者如何使用HTML和CSS制作基本导航栏的过程，从使用ul标签构建列表开始，逐步调整样式，包括去除默认样式、设置浮动、解决高度坍塌问题、调整宽度和对齐方式等，最终实现导航效果。

导航栏制作

简单导航栏制作

初学前端，刚学习了如何制作简单的导航栏，有兴趣的看官可以看一看，欢迎大家和我一起学习，如果有什么不对的地方，敬请指正
在这里插入图片描述这是导航效果，希望大家多多包含，一起进步

首先使用ul标签

使用无序标签，将导航列表元素写下来
在这里插入图片描述
HTML代码如上，但是出来的效果害和导航效果差的很多
在这里插入图片描述

接下来就可以改变样式，来达到效果啦

  1. 首先去掉原始样式
    在这里插入图片描述
    2.在标签列表项使用float:left,元素会排列到一行，但是由于没有设置父元素的高度，子元素使用float脱离文档流，父元素会出现高度坍塌，给父元素设置的背景色，也完全看不见了。
    在这里插入图片描述

3.如何解决父元素高度坍塌问题
使用 overflow: hidden;之后父元素nav的背景色自然就出现了。这是解决父元素高度坍塌的办法之一，其他方法后续会介绍。
在这里插入图片描述

4.设置li标签的宽度为25%，则a为li标签的子元素，应设置为100%，但由于a是行内元素，所以把a元素变成块元素，使用display属性
在这里插入图片描述
5.再把字体颜色和位置改一下，使用text-align设置
在这里插入图片描述

创建一个表格

下面是css代码
在这里插入图片描述
下次再见

实战经验（1）——头部导航栏制作技巧
weixin_45604020的博客
07-03 5969
一般网页logo不只是一个图片那么简单，它可以给用户提供网页跳转到首页的功能，更重要的是搜索引擎优化让百度搜索名更靠前。搜索框是一个供用户输入的表单框，需要用到input标签，至于搜索按钮就是一个背景图可用a标签或button标签制作。用户头像包含图片和文字，点击头像或文字都可以跳转到相应页面。导航栏其实就是几个超链接，目的就是为了跳转页面。
基于html和CSS3制作简单侧边导航栏
09-24
文章主要介绍了如何使用HTML和CSS3来制作一个简单而大方的侧边导航栏。下面详细解析了文中所提及的知识点： 1. HTML结构 - <div class="sidebar"></div>: 用于包裹整个侧边导航栏的容器，类名sidebar定义了这个...
导航栏的制作
WYF857446152的博客
04-14 4472
我们在看到一些网页的布局中，浮动总是离不开身影，浮动目的为了完成实现水平布局，有一个良好的布局，背后一定藏着一个良好的思维，请看思维导图 浮动为了实现水平布局的完成，在使用浮动之后元素脱离了文档流，使元素可以实现水平布局 这时就通过float：left/right；进行自己想要的布局。 浮动的特性：1.所有标签同排显示2.行标签适应所有CSS特性3.默认内容撑开盒子宽高4.元素脱离文档流 加入了浮动之后，网页布局还有许多为了不影响以后的布局，所以一般我们要清除浮动防止父级元素无法检测到子级的存在，高
导航栏制作
ningyiyang666的博客
04-13 1231
如何制作一个这样的导航栏，其实很简单。 第一步 首先需要用div和li标签搭建框架，也就是导航栏的结构 <div id="top"><!--导航栏最外围盒子--> <ul class="topList"><!-- 导航项外部ul标签--> <li><a href="">首页</a></li><!--每一个导航项--> <li&g.
自定义动画与光环的简单导航栏制作
标题“常见的导航栏菜单”和描述“一个简单的导航栏，自带动画和光环，主要有HTML5和CSS3组成，里面有每一个盒子的注释，大小可以自定义设置宽高”涉及到了创建导航栏所用到的前端技术以及一些设计特点。下面将详细...
Bootstrap3制作自己的导航栏
11-25
在Bootstrap3中，导航栏（Navbar）是一个重要的组成部分，用于构建高效且响应式的网站导航。导航栏的设计考虑到了不同屏幕尺寸的适应性，尤其适合移动设备。 创建一个基本的Bootstrap3导航栏，首先需要在HTML中添加...
网页导航栏制作
MZ199290的博客
09-15 952
无标题文档 .bander{ height:40px; background-color:#3CF} ul { list-style:none; } li{ float:left; width:120px; text-align:center; border-right:1px #999 solid;
CSS+DIV制作导航条
05-02
<body> <div class="cd"> <ul><!--导航条--> <li><a href="#">A</a></li> <!---------------------------------------------> <li><a href="#">B</a><!--二级--> <ul> <li><a href="#">B1</a><!--3级--> <ul> <li><a href="#">B12</a></li> </ul> </li> <li><a href="#">B2</a> <ul> <li><a href="#">b22</a></li> </ul> </li> </ul> </li><!--二级结束--> <!---------------------------------------------> <li><a href="#">C</a></li> </ul><!--导航条结束--> </div> </body> </html>
基本的导航条的制作
weixin_30539625的博客
03-11 1023
1、垂直导航条的制作一想到导航菜单就会想到用 ul li无序列表来制作。因为他的语义非常接近条目性的内容。<ul class="nav"> <li><a href="#">首　　页</a></li> <li><a href="#">关于我们</a>&l...
如何做一个导航栏
weixin_44540683的博客
04-18 5224
来源lanrenzhijia 有部分修改 如何做一个导航栏呢 制作一个导航栏应该不用我说，最主要用到的就属伪类了，如何运用好这个伪类是这个导航栏的重中之重 先给大家看一下制作成功后的样式 在这里用到了三次伪类 分别是黄框丶绿框丶蓝框 ① 丶 先说一下黄框之中两种颜色分别是浅红色和鲜红色只要鼠标放在 五组头部文字内便会从浅红色变为鲜红色。 ② 丶 绿色框也一样从灰色变成白色 主要触动了头部六组文字...
利用HTML和CSS实现简易导航栏
weixin_74299972的博客
06-06 4789
一个优秀的导航栏设计应该能够清晰、直观地展示网站或应用的结构和内容，帮助用户快速找到所需信息，同时体现品牌或产品的风格和特色。在定制导航栏时，我们可以根据具体需求和目标进行一系列的定制操作，如添加下拉菜单、改变链接样式、添加图标和动画效果等。同时，通过跟踪和分析用户的点击行为，可以不断优化导航栏的设计和布局。本文将指导你如何利用HTML和CSS的基础知识，为你的博客创建一个简易但实用的导航栏。通过合理的配色、字体、图标等元素的设计，可以提升导航栏的吸引力和用户体验。现在，我们已经创建了一个基本的导航栏。
响应式导航栏不会做？看我一分钟学会制作导航栏！
小那同学的博客
04-14 4123
其中，导航栏作为网页的“指南针”，不仅能帮助用户快速定位所需内容，还能体现网站的整体风格和设计理念。本文将介绍如何使用HTML、CSS和JavaScript制作一个响应式导航栏，以适应不同屏幕尺寸，并提供优雅的用户体验。当屏幕宽度小于768px时，我们将隐藏导航链接、搜索框和按钮，并显示一个菜单图标。这个导航栏包括一个Logo、一个菜单图标（用于在小屏幕上展开导航栏）、导航链接、搜索框和登录注册按钮。同时，我们为不同元素定义了不同的样式，如Logo的字体大小和颜色、导航链接的悬停效果等。
八、利用CSS制作导航栏菜单
最新发布
2303_81737387的博客
11-27 1686
水平菜单导航栏是网站设计中应用范围最广的导航设计，一般放置在页面的顶部。水平导航适用性强，几乎所有类型的网站都可以使用。如果导航过于普通，无法容纳复杂的信息结构，就需要在内容模块较多的情况下，需要结合下拉子导航使用。
手把手教你制作网页导航栏
热门推荐
m0_56329037的博客
05-01 3万+
手把手教你制作网页导航栏 众所周知，导航栏是网页的重要组成部分，本篇文章将会带你由浅入深的制作导航栏，子菜单，样式风格变化等。 导航栏的重要部分——ul标签 在导航栏中的文字，都是以无序列表 ul 和 li 标签实现的。 下面通过几个小例子来为大家介绍如何实现网页导航栏的制作。 1.用ul标签做一个简单般的菜单样式，首先在一个div盒子里创建一个无序列表，如图所示 运行结果如下图所示： 2.之后我们可以让列表横过来，需要用到css的浮动样式也就是float标签。 我们需要让它向左浮动如图所示： 运行结果如
简单创建导航栏的步骤
Red_coralDown的专栏
03-06 720
// ViewController.m #import "ViewController.h" #import "SecondViewController.h" @interface ViewController () { SecondViewController *_secondView; } @end @implementation ViewController - (void
CSS基础-13-垂直导航栏（详细创建过程）
架构+开发+运维
04-26 3912
1. 最简导航栏 2 添加鼠标改变背景色 3 给首页添加颜色 4 加边框 4.1 思路 4.2 实际代码 5 全屏高度固定导航条 5.1 思路 5.2 实际代码
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值