62_导航条练习 – 源码巴士

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			#outer {
				width: 1210px;
				height: 48px;
				background-color: rgb(232, 231, 227);
				margin: 50px auto;
			}

			/* 每一个li */
			.li-title {
				float: left;
				/* 浮动最好为块元素设置 */
				/* 浮动完，li的宽高由内容撑起 */
				/* 这里不给li设置高度反倒给a设置的原因是，
				就算点击空白区域也能有超链接效果，
				不然给li设置高度，那么链接的高度始终是内容的高度，
				点击空白区域是不会有超链接效果的 */
			}

			/* 每一个a */
			.li-title a {
				/* 给每一个a元素都加上背景颜色，好观察 */
				/* background-color: aqua; */
				color: rgb(119, 119, 119);
				font-size: 18px;
				/* 将行内元素设为块级元素后才能设置其高度 */
				display: block;
				line-height: 48px;
				/* padding这个数值在浏览器里面调试完再回来设置 */
				padding: 0 39px;
			}

			.li-title a:hover {
				background-color: rgb(63, 63, 63);
				color: rgb(232, 231, 227);
			}

			.li-title:last-child a {
				padding: 0 42px 0 41px;
				/* 之前每一个a两侧都有39px的padding，一共78px，
				现在因为页面最后多了5个px，则需要重新设置，
				在这里采取加padding到最后一个a中，
				也就是最后一个a总共需要设置83px的padding，
				这里左边给41px，右边给42px，
				最后完美融合最初的宽度1210px */
			}
		</style>
	</head>
	<body>
		<ul id="outer">
			<li class="li-title">
				<a href="#">HTML/CSS</a>
			</li>

			<li class="li-title">
				<a href="#">Browser Side</a>
			</li>

			<li class="li-title">
				<a href="#">Server Side</a>
			</li>

			<li class="li-title">
				<a href="#">Programming</a>
			</li>

			<li class="li-title">
				<a href="#">XML</a>
			</li>

			<li class="li-title">
				<a href="#">Web Building</a>
			</li>

			<li class="li-title">
				<a href="#">Reference</a>
			</li>

		</ul>
	</body>
</html>
在这里插入图片描述
原文链接：https://blog.csdn.net/gty204625782/article/details/119813867