css 浮动导航栏的简易设置，display实现导航栏

最新推荐文章于 2023-07-17 17:50:26 发布

原创最新推荐文章于 2023-07-17 17:50:26 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html #青少年编程 #css

css基础盒知识专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用CSS创建导航栏，强调了选择器的简洁性和浮动在布局中的作用。通过实例展示了导航栏的样式设计，并预告了后续将探讨浮动可能导致的问题。

文章目录

前言
一、pandas是什么？
二、使用步骤
- 1.引入库
- 2.读入数据
总结

前言

本文章讲述了，如何制作导航栏

提示：以下是本篇文章正文内容，下面案例可供参考

一、实现简单的导航栏

代码中的.wrapper>ul>li:nth-of-type(1) i表示在wrapper下的ul下的第一个li中的i

在较少的层析结构中可以使用，在层次结构复杂时尽量设置class名，如果写的选择器过长可能会出现错误哦！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../通用.css">
		<style>
			.wrapper {
				width: 500px;
				margin: 0% auto;
				
			}
			.wrapper>ul li{
				line-height: 45px;
				display: inline-block;
				text-align: center;
				margin-left: 50px;
				
			}
			.wrapper>ul>li a:hover{
				color: blue;
			}
			.wrapper>ul>li>a>i{
				width: 45px;
				height: 45px;
				display: inline-block;
			}
			.wrapper>ul>li:nth-of-type(1) i {
				background: url("./img/navsprites_hover.gif") no-repeat;
			}
			.wrapper>ul>li:nth-of-type(1):hover i {
				background: url("./img/navsprites_hover.gif") no-repeat 0px -45px;
			}
			.wrapper>ul>li:nth-of-type(2) i {
				background: url("./img/navsprites_hover.gif") no-repeat -45px 0px;
			}
			.wrapper>ul>li:nth-of-type(2):hover i {
				background: url("./img/navsprites_hover.gif") no-repeat -45px -45px;
			}
			.wrapper>ul>li:nth-of-type(3) i {
				background: url("./img/navsprites_hover.gif") no-repeat -90px 0px;
			}
			.wrapper>ul>li:nth-of-type(3):hover i {
				background: url("./img/navsprites_hover.gif") no-repeat -90px -45px;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<ul>
				<li>
					<a href="">
						<i>

						</i>
						首页
					</a>
				</li>
				<li><a href="">
						<i>

						</i>
						购物车
					</a>
				</li>
				<li><a href="">
						<i>

						</i>
						666
					</a>
				</li>
			</ul>
		</div>
	</body>
</html>

二、使用步骤

相信在我们的日常浏览中可以发现各大网站的导航栏都有一定的样式，这里看是教大家，如何制作一个比较好看的导航栏

下面是效果图；大家可以先看一遍我所写的代码，然后自己不看再写一遍；构想一下自己的思路

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../通用.css">
		<style>
			.wrapper{
				background-color: black;
			}
			.wrapper>.nav{
				width: 800px;
				text-align: center;
				margin: 0% auto;
			}
			.wrapper>.nav li{
				width: 114px;
				display: inline-block;
				line-height: 35px;
				white-space: 0rem;
				margin-left: -4.5px;
			}
			.wrapper>.nav>li a{
				color: aliceblue;
				display: inline-block;
				
			}
			.wrapper>.nav>li:hover a{
				color: darkgray;
			}
			.wrapper>.nav>li:hover{
				background-color: indianred;
			}
			#age{
				background-color: indianred;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<ul class="nav">
				<li id="age"><a href="" >首页</a></li>
				<li><a href="">极速免税店</a></li>
				<li><a href="">母婴专卖店</a></li>
				<li><a href="">国际轻奢</a></li>
				<li><a href="">品牌专场</a></li>
				<li><a href="">合作招商</a></li>
			</ul>
		</div>
	</body>
</html>

三、浮动

浮动这个东西呢很是坑，在写项目的过程中可能会发生一些问题，塌陷这个问题将在后面的文章中讲述

什么是浮动；将某个标签浮起来，可以想象一下一张纸浮在水面上亦可石头在水下，他们两个的层级是不一样的层级高的在上面，低的自然就在下面，并且层级低的可以在层级高的下面随意走动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../通用.css">
		<style>
			.wrapper{
				border: 1px solid blue;
				float: left;
			}
			.inner{
				width: 300px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div class="wrapper"><img src="./img/photo-1.jpg" alt=""></div>
		<div class="inner"><img src="./img/photo-2.jpg" alt=""></div>
	</body>
</html>