实现结果：
左侧导航栏样式实现完整代码：
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>