HTML导航栏

最新推荐文章于 2023-06-15 14:06:05 发布

Hysea.

最新推荐文章于 2023-06-15 14:06:05 发布

阅读量1.4k

点赞数 4

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44589374/article/details/104631081

版权

HTML导航栏

在这里插入图片描述

导航栏一般在网站的首页，它可以访问其他子页面

导航栏是一个网站重要的一个元素，学会它你就学会了做网页的第一步

在这里插入图片描述

网站首页

导航栏的源代码：

<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul id="index-nav">
				<li><a href="//www.runoob.com/" data-id="index" title="菜鸟教程" class="current">首页</a></li>
				<li><a href="//www.runoob.com/w3cnote/" target="_blank" data-id="note" title="菜鸟笔记">菜鸟笔记</a></li>
				<li><a href="https://c.runoob.com/" target="_blank"  title="不止于工具">菜鸟工具</a></li>
				<li><a href="javascript:void(0);" data-id="manual" title="参考手册">参考手册</a></li>
				<li><a href="//www.runoob.com/commentslist" data-id="commentslist" target="_bank" title="英文文档集合">用户笔记</a></li>
				<li><a href="javascript:void(0);" data-id="quiz" title="测验/考试">测验/考试</a></li>
				<!-- 
				<li><a style="font-weight:bold;" href="https://www.runoob.com/linux/linux-cloud-server.html" target="_blank" οnclick="_hmt.push(['_trackEvent', 'yun-index', 'click', 'yun-index'])" >云服务器</a></li>
-->
			
				<li><a href="//www.runoob.com/browser-history" target="_blank" data-id="bookmark" >本地书签</a></li>
				
				
			</ul>
		</div>
	</div>
</div>

块级元素

在这里插入图片描述

可以用 id 或 class 来标记块级元素，来改变div的样式，比如长宽高，颜色····

无序列表

在这里插入图片描述
无序列表代码

<ul>
<li>苹果</li>
<li>小米</li>
</ul>

列表项目

在这里插入图片描述

前面的<ul>标签可以理解为声明无序列表，这个<li>标签才是真正实现列表，每一个<li></li>之间代表一个项。

类型	无序列表	有序列表	自定义列表
定义标签	ul	ol	dl
列表项	li	li	dt
列表项描述	无	无	dd

列表项描述就是每一个列表前面的“符号”，比如默认的无序列表项的前面就是一个圆点，有序列表就是阿拉伯数字

超链接

在这里插入图片描述

格式：<a href="url">链接文本</a> ,eg:<a href="https://www.runoob.com/">菜鸟教程</a>
<a>标签的属性target

实际上菜鸟教程的网站导航就是一个无序列表，每个列表项是一个链接。

我把不加样式的代码和效果图附上：

<!-- 导航栏 -->
<div>
	<div>
		<div>
			<ul>
				<li><a href="//www.runoob.com/">首页</a></li>
				<li><a href="//www.runoob.com/w3cnote/">菜鸟笔记</a></li>
				<li><a href="https://c.runoob.com/">菜鸟工具</a></li>
				<li><a href="javascript:void(0);">参考手册</a></li>
				<li><a href="//www.runoob.com/commentslist" >用户笔记</a></li>
				<li><a href="javascript:void(0);" >测验/考试</a></li>
				<!-- 
				<li><a href="https://www.runoob.com/linux/linux-cloud-server.html" >云服务器</a></li>
-->
			
				<li><a href="//www.runoob.com/browser-history" >本地书签</a></li>
				
				
			</ul>
		</div>
	</div>
</div>

在这里插入图片描述 网站导航框架我们已经掌握了，那么接下来就是调样式了
先建一个简单的css文件

.ui{
	width:700px;
	height:50px;
	list-style: none;
	margin:0;
	padding:0;
}
.ui li{
    width:70px;
    margin:0 10px;
    float: left;

}

.ui li a{
    width:70px;
    height:50px;
    padding:0 20px;
    font-size: 12px;
    line-height:50px;
    background: red;
    display: inline-block;
}

和html文件不同的是，css文件有些名称前都会加一个小数点一样的符号，这个是类选择器，以后还会碰到前面是#的id选择器，类选择器可以被class=“name”的方式引用

这里我建立的css文件和html的文件同目录

源代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<link href="ui.css" rel="stylesheet">
</head>
 
<body>
<!-- 导航栏 -->
<ul class="ui">
	<li><a href="//www.runoob.com/">首页</a></li>
	<li><a href="//www.runoob.com/w3cnote/">菜鸟笔记</a></li>
	<li><a href="https://c.runoob.com/">菜鸟工具</a></li>
	<li><a href="javascript:void(0);">参考手册</a></li>
	<li><a href="//www.runoob.com/commentslist" >用户笔记</a></li>
	<li><a href="javascript:void(0);" >测验/考试</a></li>
	<!-- 
	<li><a href="https://www.runoob.com/linux/linux-cloud-server.html" >云服务器</a></li>
-->

	<li><a href="//www.runoob.com/browser-history" >本地书签</a></li>
	
	
</ul>
文档内容......
</body>
 
</html>

<link href="ui.css" rel="stylesheet">链接式引入样式表，ui.css就是我创建的css文件

初步效果图

在这里插入图片描述
这个样式还和原图有很大差别，我们继续改属性，首先我们用PS取色器查询菜鸟教程导航栏的颜色代码
96b97d，导航栏整体太高，长度太短，链接的字体颜色白色，下划线去掉。

.ui{
	height:30px;/*整体导航栏的高度，没有设置长度默认横跨这个网页*/
	list-style: none;
    background: #96b97d;/*导航栏颜色*/
}
.ui li{
    float: left;/*浮动左对齐*/
}

.ui li a{
    height:30px;/*高度和父类一致*/
    padding:0 10px;/*调整元素之间的纵向间距*/
    font-size: 12px;/*字体大小*/
    line-height:30px;/*元素水平高度*/
	text-decoration:none;/*去掉下划线*/
	color:#ffffff;/*设置文字颜色为白色*/
}