一篇文章教会你如何制做精美导航条(一篇文章教会你如何制做精美导航条)
一篇文章教会你如何制做精美导航条(一篇文章教会你如何制做精美导航条)
2024-11-05 02:09:54  作者:从从此以后  网址:https://m.xinb2b.cn/life/dsv352628.html

【一、项目背景】

让更多的人去学习html,以广东科技学院的导航栏为例, 教大家怎么去做一个横向的导航栏。


【二、项目准备】

准备一个编程的软件Dreamweaver,打开软件点击文件新建一个叫导航栏的项目,如下图所示。


点击确定之后,会弹出下图。


【三、项目实施】

1. 在<body>标签里面写下一个框架:


注:<nav>标签定义导航链接的部分。<ul> 标签定义无序列表,<li>标签定义列表项目。

<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。


2. 写完运行(运行:右下角点击f12运行)看到效果,如下图所示:


3. 加入css样式表(这里采用内部样式表)。

3.1 CSS样式表有两种加入的方式 如图:


3.2 去除li带来的小黑点:

li{ list-style: none; }

4. 基于上述步骤,运行一下 如下图所示:


5. 设置一下导航栏的样式。

1) 设置一下列表ul 的宽度 ,高度,背景颜色,文字位置居中(margin:0 auto)。

Li 同样的设置高度 。

2) 去掉小黑点 ,再设置文字的颜色 ,高度 ,内边距 ,(个人喜好 看着舒服就行)

3) 设置文字的大小,去掉下划线(text-decoration:none;)。


下面是详细备注

ul li{float: left; # 把内容左浮动,这样可以横向排列 width: 100px; # 设置每个li的宽 height: 30px; # 设置每个li的高 background-color:pink # 设置li的背景颜色为粉色 border: 1px solid 6495ED; # 设置li的边框颜色以及边框大小 text-align: center; # 设置li中的文字样式为居中 line-height: 30px; # 设置li中文字举例上边框的高度 }ulli:hover{background-color: aqua;} # 设置将鼠标放到li时的背景颜色ul li:hover a{color: black;} # 设置将鼠标放到li中的a标签的内容时的文字颜色

6. 完整代码,如下图所示。


7. 运行之后,效果图如下图所示。


【四、总结】

1. Html能做的效果非常多,希望你耐心的去学习,同时希望碰到问题主动搜索,尝试一下总会有解决方法。

2. 如果需要本文源码,请在公众号后台回复“导航栏”三个字获取。

看完本文有收获?请转发分享给更多的人

IT共享之家

想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/

  • 清朝乌拉那拉氏尊贵吗(乌拉那拉氏是最悲情满清世家)
  • 2024-11-05乌拉那拉氏是最悲情满清世家近期《延禧攻略》和《如懿传》热播,剧中乾隆继后乌拉那拉氏都是主角如懿传做为满清八旗世家的乌拉那拉氏在清朝历史上曾多次和皇室联姻,有三位乌拉那拉氏女子成为满清皇帝的皇后,其中有后金开国的皇后阿巴亥,雍正。
  • 哪个牌子的ppr水管好(ppr水管十大排名ppr水管要怎么选)
  • 2024-11-05ppr水管十大排名ppr水管要怎么选ppr水管正式名为无规共聚聚丙烯管,由于使用无规共聚技术,使聚丙烯的强度,耐高温性得到很好的保证,从而成为水管材料的主力军,是目前家装工程中采用最多的一种供水管道今天要和大家说到的就是ppr水管十大排。
  • 路由器一般用什么的最稳定(高端路由器贵在哪里)
  • 2024-11-05高端路由器贵在哪里经常见到一些朋友有这样的疑惑:到底高端路由器相对价格便宜的低端路由器有什么不同?高端路由器会让网速变得更快吗?其实不然,网速如何当然还是要看办理的宽带的速度的,如果只办理了10M宽带那么再好的路由器也。
  • 高压备自投和低压备自投顺序
  • 2024-11-05高压备自投和低压备自投顺序发生事故后,高、低压同时跳开,达到高压备自投时间,先高压侧合闸,低压母线带电后,达到低压备自投时间,低压断路器合闸,实现先送高压后送低压的送电顺序区分是高压还是低压后,再来了解下备自投备自投:两路电源。
  • ps中合并可见图层的快捷键(三个常用快捷键)
  • 2024-11-05三个常用快捷键需要软件的朋友,可以点击文章末尾的【了解更多】准备工作,新建一个工作区域,为800*800px,用矩形工具建立三个矩形,分别命名为1/2/3,以便理解三个快捷键的使用方法一、合并图层,快捷键:ctrl。
  • 宁安高铁啥时通车(宁安高铁今起通车)
  • 2024-11-05宁安高铁今起通车当你看到这条新闻时,备受关注的宁安高铁已正式开通运营今日7:05,由合肥南驶往安庆的动车组D5651次列车将一路向南,经合福高铁抵达铜陵后,“牵手”宁安高铁直奔安庆这是合肥第一次开通前往安庆的动车记者。
  • 丑橘和粑粑柑哪个酸点(丑橘和粑粑柑)
  • 2024-11-05丑橘和粑粑柑“丑橘”和“粑粑柑”是一种水果吗?很多人不懂,其实差别很大又到了可以放肆吃水果的季节了,随着人们的生活水平的提高,水果的种类也是也来越多了,很多以前没见过,没吃过的水果,现在已经成为了大众水果了,就像。
  • 三星s9有慢动作拍照吗 FHD级别480帧慢动作拍照
  • 2024-11-05三星s9有慢动作拍照吗 FHD级别480帧慢动作拍照三星GalaxyS9系列将在2月份的MWC2018期间发布,这款手机的拍照功能十分值得期待,有消息称该机会配备三星自家的双摄像头,并支持1000帧慢动作拍照当然这只是传言而已,S9系列究竟有没有100。
  • r语言分析数据实例,R语言数据特征分析
  • 2024-11-05r语言分析数据实例,R语言数据特征分析用统计指标对定量数据进行统计描述,常从集中趋势和离散趋势两个方面进行分析平均水平的指标是对个体集中趋势的度量,使用最广泛的是均值和中位数;反映变异程度的指标则是对个体离开平均水平的度量,使用较广泛的是。
  • 什么苹果手机用不了5g(但4G手机和iPad却无法享受5G)
  • 2024-11-05但4G手机和iPad却无法享受5G今年的MWC,5G大热,几乎所有厂商都抢发了5G手机然而一个事实却是,今年全球5G的重点是发牌、建网,有的国家会建的快一些,有的则会慢一些,普通用户使用5G手机、享受5G网络应用,还不会这么快到来那么。