* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, Microsoft Yahei, sans-serif;
}
a {
color: #333;
text-decoration: none;
}
img {
vertical-align: middle;
width: 100%;
height: 100%;
}
ul {
list-style: none;
}
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.suspension {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: pink;
}
.suspension .m-navbar {
padding: 0 3.2vw 0 4.8vw;
display: flex;
justify-content: space-between;
}
.suspension .m-navbar .logo i {
font-size: 7.46666667vw;
color: #fb7299;
}
.suspension .m-navbar .right .face {
height: 24px;
width: 24px;
background-color: pink;
}
.suspension .m-navbar .right .app_btn {
height: 72px;
width: 24px;
background-color: pink;
}
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bilibili</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./fonts/iconfont.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- 头部 -->
<header class="suspension">
<div class="m-navbar">
<a href="#" class="logo">
<i class="iconfont Navbar_logo"></i>
</a>
<div class="right">
<a href="#" class="search">
<i class="iconfont ic_search_tab"></i>
</a>
<a href="#" class="face"></a>
<div class="app_btn"></div>
</div>
</div>
<div class="channel-menu"></div>
</header>
</body>
</html>
明明应该bilibili图标是粉色并且左边有padding距离啊都没显示，并且.suspension .m-navbar .right .face 和.suspension .m-navbar .right .app_btn所要求变的颜色也都没有显示这是为什么
