12.20 漂亮的無序列表樣式技术頭條網

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

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

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

閱讀導航：

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

一、先看效果

二、本文背景

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

三、代碼實現

只記錄其中關鍵的代碼。

模擬數據 mock-heroes.ts

<code>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' }
];/<code>

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

<code>My Heroes


        [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
        {{hero.id}}{{hero.name}}
    

 



    
    {{selectedHero.name | uppercase}} Details

    id: {{selectedHero.id}}

    
        <label>name:
            
        /<label>
    

/<code>

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

<code>.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;
}/<code>