欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

漂亮的无序列表样式

程序员文章站 2022-05-29 08:14:40
时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform、WPF、ASP.NET Core等,亦有C++桌面相关的Qt Quick和Qt Widgets等,只分 ......

时间如流水,只能流去不流回!

点赞再看,养成习惯,这是您给我创作的动力!

本文 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 }

四、文章参考

参考:

五、代码下载

文章中贴出了部分代码,上面参考的网址有全部代码,跟着教程一步一步走就可以实现。

 

除非注明,文章均由 dotnet9 整理发布,欢迎转载。

转载请注明本文地址:

欢迎扫描下方二维码关注 dotnet9 的微信公众号,本站会及时推送最新技术文章(微信公众号“dotnet9_com”):

 

如有收获,请大力转发,给dotnet9赞助和支持,谢谢大家对dotnet技术的关注和支持 。

本站使用  的 justnews主题