漂亮的無序列表樣式

時間如流水，只能流去不流回！

點贊再看，養成習慣，這是您給我創作的動力！

本文 Dotnet9 https://dotnet9.com 已收錄，站長樂於分享dotnet相關技術，比如Winform、WPF、ASP.NET Core等，亦有C++桌面相關的Qt Quick和Qt Widgets等，只分享自己熟悉的、自己會的。

閱讀導航：

• 一、先看效果
• 二、本文背景
• 三、代碼實現
• 四、文章參考
• 五、代碼下載

一、先看效果

二、本文背景

最近在學B/S，前端使用Angular，今天學到Angular中文官網的一個例子，其中的無序列表樣式設置出來挺好看的，所以在這記錄一下。

三、代碼實現

只記錄其中關鍵的代碼。

模擬數據 mock-heroes.ts

 1 import { Hero } from "./hero";
 2 
 3 export const HEROES: Hero[] = [
 4   { id: 11, name: 'Dr Nice' },
 5   { id: 12, name: 'Narco' },
 6   { id: 13, name: 'Bombasto' },
 7   { id: 14, name: 'Celeritas' },
 8   { id: 15, name: 'Magneta' },
 9   { id: 16, name: 'RubberMan' },
10   { id: 17, name: 'Dynama' },
11   { id: 18, name: 'Dr IQ' },
12   { id: 19, name: 'Magma' },
13   { id: 20, name: 'Tornado' }
14 ];

Angular模板，展示列表的html文件：heroes.component.html

 1 <h2>My Heroes</h2>
 2 <ul class="heroes">
 3     <li *ngFor="let hero of heroes" 
 4     [class.selected]="hero === selectedHero"
 5     (click)="onSelect(hero)">
 6         <span class="badge">{{hero.id}}</span>{{hero.name}}
 7     </li>
 8 </ul>
 9 
10 <div *ngIf="selectedHero">
11     
12     <h2>{{selectedHero.name | uppercase}} Details</h2>
13     <div><span>id: </span>{{selectedHero.id}}</div>
14     <div>
15         <label>name:
16             <input [(ngModel)]="selectedHero.name" placeholder="name"/>
17         </label>
18     </div>
19 </div>

最主要的是這個樣式文件，以後可以作為參考：heroes.component.css

 1 .selected {
 2     background-color: #CFD8DC !important;
 3     color: white;
 4 }
 5 .heroes {
 6     margin: 0 0 2em 0;
 7     list-style-type: none;
 8     padding: 0;
 9     width: 15em;
10 }
11 .heroes li {
12     cursor: pointer;
13     position: relative;
14     left: 0;
15     background-color: #EEE;
16     margin: .5em;
17     padding: .3em 0;
18     height: 1.6em;
19     border-radius: 4px;
20 }
21 .heroes li.selected:hover {
22     background-color: #BBD8DC !important;
23     color: white;
24 }
25 .heroes li:hover {
26     color: #607D8B;
27     background-color: #DDD;
28     left: .1em;
29 }
30 .heroes .text {
31     position: relative;
32     top: -3px;
33 }
34 .heroes .badge {
35     display: inline-block;
36     font-size: small;
37     color: white;
38     padding: 0.8em 0.7em 0 0.7em;
39     background-color: #405061;
40     line-height: 1em;
41     position: relative;
42     left: -1px;
43     top: -4px;
44     height: 1.8em;
45     margin-right: .8em;
46     border-radius: 4px 0 0 4px;
47 }

四、文章參考

參考：
https://angular.cn/tutorial/toh-pt2

五、代碼下載

文章中貼出了部分代碼，上面參考的網址有全部代碼，跟著教程一步一步走就可以實現。

除非註明，文章均由 Dotnet9 整理髮布，歡迎轉載。

轉載請註明本文地址：https://dotnet9.com/2019/12/it-technology/front-end/angular/beautiful-angular-unordered-list-style.html

歡迎掃描下方二維碼關註 Dotnet9 的微信公眾號，本站會及時推送最新技術文章（微信公眾號“dotnet9_com”）：

 

如有收穫，請大力轉發，給Dotnet9贊助和支持，謝謝大家對dotnet技術的關註和支持 。

本站使用 wpcom 的 JustNews主題