漂亮的无序列表样式
作者：互联网
时间如流水，只能流去不流回！
点赞再看，养成习惯，这是您给我创作的动力！
本文 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 整理发布，欢迎转载。
欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章（微信公众号“dotnet9_com”）：
如有收获，请大力转发，给Dotnet9赞助和支持，谢谢大家对dotnet技术的关注和支持 。
本站使用 wpcom 的 JustNews主题
标签：em,name,样式,无序,列表,color,background,heroes,id 来源： https://www.cnblogs.com/Dotnet9-com/p/12074405.html