适合新手练习，内容太过于简单，知识点很少，大神请绕道。
先放一张效果图
<!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 Location</li>
</ul>
<ul class="topbar-right">
<li>登录</li>
<li>注册</li>
<li>消息通知</li>
<li>购物车(0)</li>
</ul>
</div>
</body>
</html>
594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
