css-8.ul 列表

原创于 2017-09-06 09:43:02 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

18 篇文章

订阅专栏

本文展示了一个使用HTML和CSS实现的简洁美观的标签导航栏示例。该导航栏包括多个选项卡，如网友讨论圈、晒单贴、问答帖等，并通过CSS样式实现了不同的状态效果，例如当前选中的标签背景会变为白色且边框颜色会发生变化。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body {
				font: 12px arial, verdana;
			}
			
			ul.tabs {
				margin: 0;
				padding: 0;
				list-style: none;
				/*去掉列表的项目符号*/
			}
			
			.tabs li {
				float: left;
				/*让li在同一行*/
				font: 14px "微软雅黑";
				width: 93px;
				height: 32px;
				text-align: center;
			}
			
			.tabs li a {
				color: #005aa0;
				text-decoration: none;
				/*没下划线*/
			}
			
			.tabs li a:hover {
				color: #e4393c;
			}
			
			.tabs .current {
				background: #fff;
				height: 34px;
				border-top: 2px solid #E4393C;
				border-left: 2px solid #ddd;
				border-right: 2px solid #ddd;
				margin-top: -4px;
			}
			
			.tabs .current a {
				color: #E4393C;
			}
		</style>
	</head>

	<body>

		<div id="taolun">
			<div>

				<ul class="tabs">
					<li>
						<a href="#">网友讨论圈</a>
					</li>
					<li class="current">
						<a href="#">晒单贴</a>
					</li>
					<li>
						<a href="#">问答帖</a>
					</li>
					<li>
						<a href="#">圈子帖</a>
					</li>
					<li>
						<a href="#">套路贴</a>
					</li>
				</ul>
			</div>
		</div>
	</body>

</html>