ul横向排列css_HTML+CSS内部样式实现一个简单的顶部Topbar

最新推荐文章于 2024-12-23 20:23:49 发布

最新推荐文章于 2024-12-23 20:23:49 发布 · 356 阅读

文章标签：

#ul横向排列css

这篇博客适合初学者，内容涵盖了HTML和CSS的基础知识，如元标签、标题、字体样式、列表、背景颜色、行高和内联块元素布局。通过实例展示了如何创建一个简单的顶部导航栏，并实现元素的水平排列和定位，帮助读者理解网页布局的基本概念。

适合新手练习，内容太过于简单，知识点很少，大神请绕道。

先放一张效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米商城 - 小米9 Pro、小米MIX Alpha、Redmi Note 8，小米电视官方网站</title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		/* 装饰Topbar的div */
		.topbar{
			background: #333;
			height:40px;
			font-size: 12px;
		}
		/* 使得列表值横向排列 */
		.topbar li{
			display: inline;
			/* 装饰topbar中的字体 *BOBOBO*/
			color:#b0b0b0;
			/* 字间距 */
			margin-right: 13px;
		}
		/* 使得两个ul在同一行显示 */
		.topbar ul{
			/* border: 1px red solid; */
			display: inline-block;
			
			/* ul行高设置 */
			line-height:38px ;
		}
		/* 使得右侧ul靠页面右端显示  */
		.topbar-right{
			position: absolute;
			right: 150px;
			
		}
		.topbar-left{
			margin-left: 150px;
		}
		
		
	</style>
	<body>
		<!--topbar元素： -->
		<!-- 左侧：小米商城  MIUI  loT  云服务  金融  有品  小爱开放平台  企业团购  资质证照 协议规则 下载app  Select Location -->
		<!-- 右侧：登录 注册 消息通知 购物车(0) -->
		<div class="topbar">
			<ul class="topbar-left">
				<li>小米商城</li>
				<li>MIUI</li>
				<li>loT</li>
				<li>云服务</li>
				<li>金融</li>
				<li>有品</li>
				<li>小爱开放平台</li>
				<li>企业团购</li>
				<li>资质证照</li>
				<li>协议规则</li>
				<li>下载app</li>
				<li>Select&nbsp;Location</li>
			</ul>
			<ul class="topbar-right">
				<li>登录</li>
				<li>注册</li>
				<li>消息通知</li>
				<li>购物车(0)</li>
			</ul>
		</div>
	</body>
</html>