实现结果：
左侧导航栏样式实现完整代码：
1 <template>
2 <!-- 左边导航条 -->
3 <div class="leftnav">
4 <!-- logo -->
5 <div class="logo"></div>
6 <div class="my-scroll">
7 <!-- 在线音乐 -->
8 <div class="on-music">
9 <dl>
10 <dt class="on-music-dt">在线音乐</dt>
11 <dd class="focusdd dd-image dd-image-black-re">推荐</dd>
12 <dd class="dd-image dd-image-white-music">音乐馆</dd>
13 <dd class="dd-image dd-image-white-tv">视频</dd>
14 <dd class="dd-image dd-image-white-radio">电台</dd>
15 </dl>
16 </div>
17 <!-- 我的音乐 -->
18 <div class="my-music">
19 <dl>
20 <dt class="my-music-dt">我的音乐</dt>
21 <dd class="dd-image dd-image-white-ilike">我喜欢</dd>
22 <dd class="dd-image-mymusic-local dd-image-white-local">本地和下载</dd>
23 <dd class="dd-image dd-image-white-recent">最近播放</dd>
24 <dd class="dd-image-mymusic-list dd-image-white-list">试听列表</dd>
25 </dl>
26 </div>
27 <!-- 创建歌单 -->
28 <div class="create-music">
29 <dl>
30 <dt class="create-music-dt">创建歌单</dt>
31 <dd>默认歌单</dd>
32 <dd>hfio</dd>
33
34 </dl>
35 </div>
36 <!-- 收藏歌单 -->
37 <div class="collection-music">
38 <dl>
39 <dt class="collection-music-dt">收藏歌单</dt>
40 <dd>music</dd>
41
42 </dl>
43 </div>
44 </div>
45
46 </div>
47 </template>
48 <script>
49 export default {
50 name: 'leftnav',
51 data() {
52 return {
53 msg: "左边导航条"
54 }
55 }
56
57 }
58 </script>
59 <style scoped>
60 /* 左边导航条 */
61 .leftnav {
62 width: 210px;
63 height: 100%;
64 background-color: #fff;
65 position: absolute;
66 left: 0;
67 top: 0;
68
69 }
70
71 /* 网页logo */
72 .logo {
73 width: 100%;
74 height: 50px;
75 background: url("https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000") no-repeat;
76
77 }
78
79 /* dd统一样式 */
80 /* dd样式 */
81 dd {
82 height: 30px;
83 line-height: 30px;
84 color: #303030;
85 padding-left: 40px;
86 /* 鼠标移动变小手 */
87 cursor: pointer;
88 /* dd间的距离 */
89 margin-bottom: 10px;
90 }
91
92 /* dd被选中 */
93 .focusdd {
94 background-color: #1ed0a1;
95 color: #d2f6ee;
96 border-radius: 5px;
97 }
98
99 /* dd图标样式大小位置及不重复*/
100 .dd-image {
101 background-size: 25px;
102 background-repeat: no-repeat;
103 background-position: 10px center;
104 }
105
106 /* 在线音乐 */
107 .on-music {
108 width: 160px;
109 margin: 20px auto 30px auto;
110 }
111
112 .on-music-dt {
113 height: 47px;
114 line-height: 47px;
115 color: #787878;
116 }
117
118
119 /* dd未选中白色 推荐*/
120 .dd-image-white-re {
121 background-image: url("../components/icons/w-re.png");
122 }
123
124 /* dd选中黑色 推荐*/
125 .dd-image-black-re {
126 background-image: url("../components/icons/b-re.png");
127 }
128
129 /* dd 鼠标移动hover样式 */
130 dd:hover {
131 background-color: #d8d8d8;
132 }
133
134 /* dd音乐馆 未选中 白 */
135 .dd-image-white-music {
136 background-image: url("../components/icons/w-good.png");
137 }
138
139 /* dd音乐馆 未选中 黑 */
140 .dd-image-black-music {
141 background-image: url("../components/icons/b-good.png");
142 }
143
144 /* dd视频 未选中 白 */
145 .dd-image-white-tv {
146 background-image: url("../components/icons/w-tv.png");
147 }
148
149 /* dd视频 选中 黑 */
150 .dd-image-black-tv {
151 background-image: url("../components/icons/b-tv.png");
152 }
153
154 /* dd电台 未选中 白 */
155 .dd-image-white-radio {
156 background-image: url("../components/icons/w-radio.png");
157 }
158
159 /* dd电台选中 黑 */
160 .dd-image-black-radio {
161 background-image: url("../components/icons/b-radio.png");
162 }
163
164 /* 我的音乐 */
165 .my-music {
166 width: 160px;
167 margin: 20px auto 30px auto;
168 }
169
170 /* 我的音乐dt */
171 .my-music-dt {
172 height: 47px;
173 line-height: 47px;
174 color: #787878;
175 }
176
177 /* 我的音乐 本地和下载 dd 图像样式 */
178 .dd-image-mymusic-local {
179 background-size: 19px;
180 background-repeat: no-repeat;
181 background-position: 13px center;
182 }
183
184 /* 我的音乐 本地和下载 dd 图像样式 */
185 .dd-image-mymusic-list {
186 background-size: 19px;
187 background-repeat: no-repeat;
188 background-position: 13px center;
189 }
190
191 /* 我的音乐 我喜欢 未选中 白*/
192 .dd-image-white-ilike {
193 background-image: url("../components/icons/w-like.png");
194 }
195
196 /* 我的音乐 我喜欢 选中 黑*/
197 .dd-image-black-ilike {
198 background-image: url("../components/icons/b-like.png");
199 }
200
201 /* 我的音乐 本地和下载未选中 白*/
202 .dd-image-white-local {
203 background-image: url("../components/icons/w-local.png");
204 }
205
206 /* 我的音乐 本地和下载选中 黑*/
207 .dd-image-black-local {
208 background-image: url("../components/icons/b-local.png");
209 }
210
211 /* 我的音乐 最近播放未选中 白*/
212 .dd-image-white-recent {
213 background-image: url("../components/icons/w-recent.png");
214 }
215
216 /* 我的音乐 最近播放选中 黑*/
217 .dd-image-black-recent {
218 background-image: url("../components/icons/b-recent.png");
219 }
220
221 /* 我的音乐 试听列表未选中 白*/
222 .dd-image-white-list {
223 background-image: url("../components/icons/w-list.png");
224 }
225
226 /* 我的音乐 最近播放选中 黑*/
227 .dd-image-black-list {
228 background-image: url("../components/icons/b-list.png");
229 }
230
231 /* 创建歌单 */
232 .create-music {
233 width: 160px;
234 margin: 20px auto 30px auto;
235 }
236 .create-music-dt {
237 height: 47px;
238 line-height: 47px;
239 color: #787878;
240 }
241 /* 收藏歌单 */
242 .collection-music{
243 width: 160px;
244 margin: 20px auto 30px auto;
245 }
246 .collection-music-dt{
247 height: 47px;
248 line-height: 47px;
249 color: #787878;
250 }
251 .my-scroll{
252 width: 210px;
253 height: 517px;
254 /* 加垂直滚动功能 */
255 overflow-y: scroll;
256 /* 隐藏水平滚动功能 */
257 overflow-x: hidden;
258
259 }
260 </style>
标签：qq,播放器,vue,icons,url,dd,background,image,png From： https://www.cnblogs.com/kiolaf/p/17629194.html