導讀時間如流水，只能流去不流回！點贊再看，養成習慣，這是您給我創作的動力！本文Dotnet9https://dotnet9.com已收錄，站長樂于分享dotne....

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

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

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

閱讀導航：

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

一、先看效果

二、本文背景

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

三、代碼實現

只記錄其中關鍵的代碼。

模擬數據 mock-heroes.ts

import { Hero } from "./hero";export const HEROES: Hero[] = [ { id: 11, name: Dr Nice }, { id: 12, name: Narco }, { id: 13, name: Bombasto }, { id: 14, name: Celeritas }, { id: 15, name: Magneta }, { id: 16, name: RubberMan }, { id: 17, name: Dynama }, { id: 18, name: Dr IQ }, { id: 19, name: Magma }, { id: 20, name: Tornado }];

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

<h2>My Heroes</h2><ul > <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span >{{hero.id}}</span>{{hero.name}} </li></ul><div *ngIf="selectedHero"> <h2>{{selectedHero.name | uppercase}} Details</h2> <div><span>id: </span>{{selectedHero.id}}</div> <div> <label>name: <input [(ngModel)]="selectedHero.name" placeholder="name"/> </label> </div></div>

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

.selected { background-color: #CFD8DC !important; color: white;}.heroes { margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em;}.heroes li { cursor: pointer; position: relative; left: 0; background-color: #EEE; margin: .5em; padding: .3em 0; height: 1.6em; border-radius: 4px;}.heroes li.selected:hover { background-color: #BBD8DC !important; color: white;}.heroes li:hover { color: #607D8B; background-color: #DDD; left: .1em;}.heroes .text { position: relative; top: -3px;}.heroes .badge { display: inline-block; font-size: small; color: white; padding: 0.8em 0.7em 0 0.7em; background-color: #405061; line-height: 1em; position: relative; left: -1px; top: -4px; height: 1.8em; margin-right: .8em; border-radius: 4px 0 0 4px;}

四、文章參考

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

五、代碼下載

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

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

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