html+css 实现简易导航栏功能
54 浏览量
2020-09-22
10:51:24
上传
评论
收藏 45KB PDF 举报
html+css 实现简易导航栏功能实现简易导航栏功能
主要介绍了基于html+css 实现简易导航栏功能，主要就是css（级联样式表）对html的内容做格式化。具体内容
详情大家跟随小编一起通过本文学习吧
二话不说直接上代码（萌新：实在也没什么好说的）
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>导航栏</title>
<style type="text/css">
#nav{
width:100%;
height:39px;
margin:0px;
background:#808080
}
#nav ul li{
margin:5px 10px;
float:left;
list-style:none;
}
#nav ul li a{
float:left;
padding:0px 16px;
<!--margin:auto;-->
color:#ffffff;
font-size:15px;
}
</style>
</head>
<body>
<div id="nav">
<ul >
<li ><a href="#">首页</a></li>
<li ><a href="#">朋友</a></li>
<li ><a href="#">商城</a></li>
<li ><a href="#">下载客户端</a></li>
</ul>
</div>
</body>
</html>
主要就是css（级联样式表）对html的内容做格式化（不太会表述）；
其中对元素可以直接用标识对其设置格式；对某个id为nav的元素做格式化，要在前面加#；对class=“nav”修改格式要在nav前
加 "."
这三个的应用我自己还是不太熟悉，就不说了，此处希望有大触可以指导一番，或者有人和我探讨也行。
css代码可以用开始<style type="txt/css">、结束标识</style>写在html文档的head里，即内嵌在head里，
我这里是简易的导航栏css代码不多就内嵌在head里
上述是css的一种引用方式：内嵌式样式表
---------------------------------------------------------------------------------------------------------------------------
如果css代码比较多可以直接把代码写在css文件，然后用link标记在html文件的head里引入样式表css。
上述事实第二种引用方式：外部样式表（现在的网页繁杂，用这种方法比较多）
还有一种就是内联样式表，这里不做解释。
总结总结
以上所述是小编给大家介绍的html+css 实现简易导航栏功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编
会及时回复大家的。在此也非常感谢大家对我们网站的支持！
资源评论
weixin_38652270
- 粉丝: 3
- 资源: 893
最新资源
- 南京邮电大学数学实验:熟练掌握 Matlab 软件的基本命令和操作
- 2017校招真题校园招聘真题算法题（37道）Python源码.zip
- 基于单片机protues仿真的多功能自动饮水机系统设计（仿真图、源代码、演示视频）
- 二叉树7-1-1.cpp
- android 9.0 原生模拟器 签名文件
- 技术面试最后反问面试官的话 校招面试非技术问题有哪些 非技术问题如何回答.png
- NB-IOT-BC26全网通模块Altium+ CADENCE +PADS三种格式(原理图SCH+PCB封装库)文件.zip
- 基于微信小程序开发的校园失物招领系统源码毕业设计（优质项目源码）.zip
- 词向量是一种将自然语言中的单词转换为数值向量的技术，它能够捕捉词义和上下文信息
- nmap与masscan的简单使用
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
