一、代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my小米商城</title>
<link rel="shortcut icon" href="img/favicon.ico">
<style>
body{
margin: 0;
font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}
.header{
height: 40px;
line-height: 40px;
/*height,line-height 一起使用*/
background-color:
color:
/*background-color,color 一起使用*/
font-size: 24px;
}
.container{
width: 1190px; /*居中*/
margin: 0 auto;
}
.left{
float: left; /*此處是爲了飄起來*/
}
.right{
float: right; /*此處是爲了飄起來*/
}
.menus a, .account a, .car a{
text-decoration: none; /*下劃線*/
display: inline-block;
/*margin: 0 5px;*/
padding:0 15px; /*使用padding的效果要比使用margin的大好多，原因未知*/
}
/*.header .car a {*/
/*display: inline-block;*/
/*height: 40px;*/
/*padding: 0 15px;*/
/*margin-left: 20px;*/
/*background-color:
/*}*/
.header .car a{
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 15px;
margin-left: 20px;
background-color:
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menus left">
<a>小米商場</a>
<a>MIUI</a>
<a>IoT</a>
<a>雲服務</a>
</div>
<div class="car right">
<a>購物車(0)</a>
</div>
<div class="account right">
<a>登錄</a>
<a>註冊</a>
<a>消息通知</a>
</div>
</div>
</div>
</body>
</html>
二、效果展示
![在這裏插入圖片描述]()
