2020-11-05 css实例：导航栏实例及样式解释2

最新推荐文章于 2023-10-19 14:43:23 发布

Amanda&Rachel

最新推荐文章于 2023-10-19 14:43:23 发布

阅读量164

点赞数 1

分类专栏： css学习总结文章标签： css

本文链接：https://blog.csdn.net/m0_51907938/article/details/109502980

版权

css学习总结专栏收录该内容

35 篇文章 0 订阅

订阅专栏

css导航栏实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/*reset样式*/
			*{				/*重置margin，padding为0*/
				margin: 0;
				padding: 0;
			}
			ul li{			/*去掉li项目列表符号*/
				list-style: none;
			}
			a{				/*去掉a链接的下划线*/
				text-decoration: none;
			}
			/*nav的样式*/
			.nav{				/*nav导航栏整体样式*/
				width: 1100px;/*宽度*/
				height: 35px;/*高度*/
				background: #000;/*背景颜色*/
				margin: 50px auto;/*外边距上下50px,水平居中*/
			}
			.nav ul li{			/*导航栏中每一个词的样式*/
				display: inline-block;/*把li变成行内块元素，使所有li在一行显示*/
				line-height: 34px;/*设置行高，垂直居中*/
				border-right: 1px solid #242424;/*li设置右边框*/
			}
			.nav ul li a{		/*导航栏中每一个链接的样式*/
				display: block;/*把a链接变成块状元素，使可点击区别不仅限于文字*/
				color: #fff;/*字体颜色*/
				font-size: 14px;/*字体大小*/
				padding: 0px 14px;/*设置水平间距14px*/
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<ul>
				<li><a href="">首页</a></li>
				<li><a href="">帆布鞋</a></li>
				<li><a href="">长袖T</a></li>
				<li><a href="">衬衫</a></li>
				<li><a href="">POLO衫</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>
				<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>
				<li><a href="">NBA</a></li>
			</ul>
		</div>
	</body>
</html>

效果如下：
在这里插入图片描述

换行产生的3px处理

在编写HTML代码时，在代码里换行会在页面显示中产生3px的间距，如图所示：
在这里插入图片描述

解决方法

1，不折行把元素放在一行

<li><a href="">首页</a></li><li><a href="">帆布鞋</a></li>

可以在编写代码时不换行来解决
2，给元素加浮动

.nav ul li{
				display: inline-block;
				float:left;/*给li添加浮动*/
				line-height: 34px;
				border-right: 1px solid #242424;
			}

可以给元素添加浮动，那样display;inline-block就可以不设置了，效果都是让li横向排列

效果如下：
在这里插入图片描述
由于本人水平有限，博客错误之处，烦请指正！

Amanda&Rachel

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-11-05 css实例：导航栏实例及样式解释2

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> /*reset样式*/ *{ margin: 0; padding: 0; } ul li{ list-style: none; } a{ text-decoration: none;
复制链接

扫一扫