1.利用浮动完成布局
以小米导航栏为例
<style>
* {
padding: 0;
margin: 0;
/* 通配符全选,取消内外边距的小缝隙 // 不建议使用通配符 */
}
header {
width: 100%;
background-color: #333333;
/* 设置背景 */
}
div {
width: 1226px;
height: 40px;
margin: auto;
/* 设置靶心居中 */
color: rgb(164, 163, 163);
/* 字体颜色 */
line-height: 40px;
/* 字体居中 */
font-size: 12px;
/* 字体大小 */
}
ul {
list-style: none;
/* 取消列表的点 */
}
.left>li {
float: left;
/* 利用浮动,完成元素类型转换,使他们横向排列 */
}
.left> span {
float: left;
font-size: 12px;
color: #4b4a46;
margin: auto 5px;
/* 设置左边 中间的小线,用左右外边距隔开 */
}
.right>li {
float: right;
}
.right>span{
float: right;
font-size: 12px;
color: #4b4a46;
margin: auto 5px;
/* 设置 右面中间的小线,用左右外边距隔开 */
}
.right>li:nth-child(1){
width: 120px;
text-align: center;
}
</style>
</head>
<body>
<header>
<div>
<ul class="left">
<li>小米官网</li><span>|</span>
<li>小米商城</li><span>|</span>
<li>MIUI</li><span>|</span>
<li>lot</li><span>|</span>
<li>云服务</li><span>|</span>
<li>天星数科</li><span>|</span>
<li>有品</li><span>|</span>
<li>小爱开发平台</li><span>|</span>
<li>企业团购</li><span>|</span>
<li>资质证照</li><span>|</span>
<li>协议规则</li><span>|</span>
<li>下载app</li><span>|</span>
<li>Select location</li>
</ul>
<ul class="right">
<li>🛒购物车(0)</li>
<li>消息通知</li><span>|</span>
<li>注册</li><span>|</span>
<li>登录</li>
</ul>
</div>
</header>
</body>
2.利用弹性盒子布局
大体无改变,浮动换成弹性盒子
<style>
* {
padding: 0;
margin: 0;
/* 通配符全选,取消内外边距的小缝隙 // 不建议使用通配符 */
}
header {
width: 100%;
background-color: #333333;
/* 设置背景 */
}
div {
width: 1226px;
height: 40px;
margin: auto;
/* 设置靶心居中 */
color: rgb(164, 163, 163);
/* 字体颜色 */
line-height: 40px;
/* 字体居中 */
font-size: 12px;
/* 字体大小 */
display: flex;
justify-content: space-between;
/* 子元素两端对齐 */
}
ul {
list-style: none;
/* 取消列表的点 */
}
.left {
display: flex;
/* 父元素设置弹性盒子,控制子元素布局 */
}
.left> span {
font-size: 12px;
color: #4b4a46;
margin: auto 5px;
/* 设置左边 中间的小线,用左右外边距隔开 */
}
.right{
display: flex;
}
.right>span{
float: right;
font-size: 12px;
color: #4b4a46;
margin: auto 5px;
/* 设置 右面中间的小线,用左右外边距隔开 */
}
.right>li:nth-child(1){
width: 120px;
text-align: center;
}
</style>
</head>
<body>
<header>
<div>
<ul class="left">
<li>小米官网</li><span>|</span>
<li>小米商城</li><span>|</span>
<li>MIUI</li><span>|</span>
<li>lot</li><span>|</span>
<li>云服务</li><span>|</span>
<li>天星数科</li><span>|</span>
<li>有品</li><span>|</span>
<li>小爱开发平台</li><span>|</span>
<li>企业团购</li><span>|</span>
<li>资质证照</li><span>|</span>
<li>协议规则</li><span>|</span>
<li>下载app</li><span>|</span>
<li>Select location</li>
</ul>
<ul class="right">
<li>🛒购物车(0)</li>
<li>消息通知</li><span>|</span>
<li>注册</li><span>|</span>
<li>登录</li>
</ul>
</div>
</header>
</body>
效果