Css-红妆束阁
在没有认识真正的世界之前,它都是很美好的
pkmer
理论锻炼思维,理论指导实践,知行合一。
展开
-
css使用table布局
用css来布局 <div class="table"> <div class="table-row"> <div class="table-cellone">标题</div> <div class="table-cell">选项1</div> </div> <div class="table-row"> <div class="table-cell"></d原创 2020-05-11 16:15:50 · 308 阅读 · 0 评论 -
css justify-content
justify-content 能够帮助我们快速实现布局 w3school justify-content justify-content演示 css-tricks justify-content原创 2020-04-21 09:55:13 · 246 阅读 · 0 评论 -
css 内容溢出2 scroll
w3school overflow scroll height: 300px; overflow: scroll;原创 2020-04-10 11:03:40 · 173 阅读 · 0 评论 -
css display inline-flex
jsfiddle实验 .clearfix{ width: 40%; display: inline-flex; flex-direction: row; flex-wrap: wrap; margin-right: 20px; } li{ margin-right: 20px; }原创 2020-04-07 16:53:24 · 192 阅读 · 0 评论 -
2020-04-04哀悼色彩
向为对抗击新冠肺炎疫情斗争牺牲的烈士和逝世同胞表示深切的悼念。 京东 <html class="root61 o2_wide csstransitions cssanimations o2_webkit o2_chrome o2_latest o2_gray"> html.o2_gray { -webkit-filter: grayscale(100%); filte...原创 2020-04-04 00:26:44 · 355 阅读 · 0 评论 -
css 内容溢出情况
text-overflow: ellipsis; overflow: hidden;原创 2020-03-30 17:42:11 · 182 阅读 · 0 评论 -
css顶部固定
<div class="footer"> <div> <el-button type="primary" size="small" @click="handleToFooter(0)" >{{$t('pageSetUp.saveAndPublish')}}&...原创 2020-03-23 19:46:41 · 231 阅读 · 0 评论 -
07-选择器-意中人
我的意中人,我会遇到的 基本选择器 通配符选择器 标签选择器 类选择器 ID选择器 Demo Source Code原创 2020-02-18 07:58:52 · 109 阅读 · 0 评论 -
06-居中-C位时刻
1. 图片的高光时刻 图片的绝对居中,Demo source code .box{ width: 200px; height: 200px; background-color: green; text-align: center; // 居中 line-height: 200px; // 居中 img{ vertical-align: middle; // ...原创 2020-02-17 06:18:03 · 95 阅读 · 0 评论 -
05-自适应高度透明层-兽
橘色的部分高度是随着文字 内容自适应的.son容器不设置高度,颜色bg高度以及宽度设置为100%,然后son容器的整个高度由文字的内容撑开。Demo source code 文字部分relative的添加,能够提高文字部分的层级。 核心代码 .son{ position: absolute; left: 0; bottom: 0; width: 100%;...原创 2020-02-17 05:23:36 · 106 阅读 · 0 评论 -
04-遮罩层-兽
展示方式 鼠标划过-现身 通过使用背景颜色透明度,相对位置,以及hover属性,来达到效果:Demo案例代码 在代码中文字的居中,需要注意处理p标签的默认margin值 p{ margin-top: 0px; /** 需要设置,才会真确的居,因为p标签有默认的margin值 */ } ...原创 2020-02-16 11:11:18 · 99 阅读 · 0 评论 -
03-Css能量聚集体-Bootstrap
通过借助Bootstrap框架生态的能量,能快速实现效果的同时,领略其灵魂身处的设计源泉。 跨平台,响应式。(还不太清楚) 可以借鉴其命名,书写规范 css重设,reset 熟悉????的性能,以便适应不同的路况。 栅格栏系统 ...原创 2020-02-16 11:02:36 · 170 阅读 · 0 评论 -
02-Css也具有编程性
对于css的编写处理,预编译Sass使得编写css,更具有编程的特性,更加人性化 Sass-最专业处理Css 变量 Sass中可以定义变量,方便统一修改和维护 $bg: red; body{ background-color: $bg; } 嵌套 Sass对css选择器进行嵌套,具有层级关系 ul{ li{ display:inline-block; } } mixin Sass...原创 2020-02-15 22:34:45 · 88 阅读 · 0 评论 -
01-表格的通用化妆品
表格 装数据,th,tr,td组成 常用样式 清除表格的默认样式,默认表格的边框样式,带有双横线,不共用公共边,非常不美观。 border-collapse: collapse; 表格内容水平左中右 text-align: left/center/right; 表格内容垂直上中下 vertical-align: top/middle/bottom; 示例代码 ...原创 2020-02-15 19:52:57 · 198 阅读 · 0 评论