Css
把样式玩成花
晨旭缘
相由心生
展开
-
Element-Ui的Form表单:Label文本两端对齐,且必填项的*不影响布局
Element-Ui Label文本两端对齐,且必填项的*不影响布局原创 2024-04-15 20:26:30 · 604 阅读 · 2 评论 -
grid 网格中的内容水平居中(css)
Grid:网格布局,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局需求:Grid布局后,实现子元素内容的水平居中思想:将Grid布局后的子元素变为内联元素(inline-block),实现文本居中代码演示: <div class="content"> <div style="background-color: red;">1</div> <div class="hello">原创 2021-11-02 15:26:18 · 2507 阅读 · 2 评论 -
Ng-zorro组件分页器Pagination样式修改笔记
Ng-zorro组件分页器Pagination样式修改记录实现功能图例:实现代码,html部分 <div class="footer"> <nz-pagination [nzPageIndex]="1" [nzTotal]="10" [nzPageSize]="5" [nzShowTotal]="totalTemplate" nzSize=small></nz-pagination> <br /> <ng-template原创 2021-10-30 10:37:10 · 708 阅读 · 0 评论 -
Angular:Ng-zorro组件Table(嵌套子表格)样式修改笔记
Ng-zorro的Table(嵌套子表格)样式修改笔记复杂点:展开按钮样式的修改,图例如下修改为点击按钮由加号换为箭头,实现方式为,用icon覆盖原来的加号,但保留原有加号的点击区域,html该表格区域相关代码: <td [(nzExpand)]="data.expand"> <d *ngIf="!data.expand" class="downicon"><i nz-icon nzType="right" nzTheme="outline"></原创 2021-10-30 10:25:50 · 1595 阅读 · 0 评论 -
Ng-zorro组件Table样式修改笔记
Ng-zorro组件Table样式修改笔记由于 Ng-zorro组件样式修改复杂,为了以后高效开发,记录一下,相关代码如下/* 表头样式 */.table /deep/ .ant-table-thead>tr>th { text-align: center; background: #30494d; color: #ffffff; padding: 0.8%; border-bottom: none; font-size: 1em;}/* 表格主体样式 */.原创 2021-10-30 09:13:59 · 975 阅读 · 1 评论 -
基于Angular的Ng-Zorro分页器(Pagination)样式调整记录
基于Angular的Ng-Zorro分页器样式(Pagination)调整记录Ng-Zorro的样式相对来说比较难以调整,现自定义样式简单记录:/* 分页器 *//* 基于table时将pagination绝对定位进行调整*/::ng-deep .ant-pagination { position: absolute; top: 170px; width: 100%;} ::ng-deep .table .ant-table-pagination.ant-pagination {原创 2021-10-23 10:53:28 · 537 阅读 · 0 评论 -
[ngClass]的简单使用
[ngClass]的简单使用[ngClass]官方定义:从 HTML 元素上添加和移除 CSS 类。使用方法:<some-element [ngClass]="'first second'">...</some-element><some-element [ngClass]="['first', 'second']">...</some-element><some-element [ngClass]="{'first': true, 'se原创 2021-08-19 11:13:14 · 3283 阅读 · 0 评论 -
CSS实现表格文字过长,用省略号代替,鼠标移动出现悬浮框
CSS实现表格文字过长,用省略号代替,鼠标移动出现悬浮框直接上代码,实现环境Angular! <td style="overflow : hidden;text-overflow: ellipsis;white-space: nowrap;cursor: pointer;" title="{{ data.english_name}}">{{ data.english_name}}</td>实现效果:...原创 2021-05-29 09:47:29 · 337 阅读 · 1 评论