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 · 322 阅读 · 0 评论 -
css justify-content
justify-content能够帮助我们快速实现布局w3school justify-contentjustify-content演示css-tricks justify-content原创 2020-04-21 09:55:13 · 254 阅读 · 0 评论 -
css 内容溢出2 scroll
w3school overflow scroll height: 300px; overflow: scroll;原创 2020-04-10 11:03:40 · 177 阅读 · 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 · 201 阅读 · 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 · 358 阅读 · 0 评论 -
css 内容溢出情况
text-overflow: ellipsis;overflow: hidden;原创 2020-03-30 17:42:11 · 188 阅读 · 0 评论 -
css顶部固定
<div class="footer"> <div> <el-button type="primary" size="small" @click="handleToFooter(0)" >{{$t('pageSetUp.saveAndPublish')}}&...原创 2020-03-23 19:46:41 · 238 阅读 · 0 评论 -
07-选择器-意中人
我的意中人,我会遇到的基本选择器通配符选择器标签选择器类选择器ID选择器Demo Source Code原创 2020-02-18 07:58:52 · 114 阅读 · 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 · 98 阅读 · 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 · 108 阅读 · 0 评论 -
04-遮罩层-兽
展示方式鼠标划过-现身通过使用背景颜色透明度,相对位置,以及hover属性,来达到效果:Demo案例代码在代码中文字的居中,需要注意处理p标签的默认margin值 p{ margin-top: 0px; /** 需要设置,才会真确的居,因为p标签有默认的margin值 */ }...原创 2020-02-16 11:11:18 · 100 阅读 · 0 评论 -
03-Css能量聚集体-Bootstrap
通过借助Bootstrap框架生态的能量,能快速实现效果的同时,领略其灵魂身处的设计源泉。跨平台,响应式。(还不太清楚)可以借鉴其命名,书写规范css重设,reset熟悉????的性能,以便适应不同的路况。栅格栏系统...原创 2020-02-16 11:02:36 · 176 阅读 · 0 评论 -
02-Css也具有编程性
对于css的编写处理,预编译Sass使得编写css,更具有编程的特性,更加人性化Sass-最专业处理Css变量Sass中可以定义变量,方便统一修改和维护$bg: red;body{ background-color: $bg;}嵌套Sass对css选择器进行嵌套,具有层级关系ul{ li{ display:inline-block; }}mixinSass...原创 2020-02-15 22:34:45 · 93 阅读 · 0 评论 -
01-表格的通用化妆品
表格装数据,th,tr,td组成常用样式清除表格的默认样式,默认表格的边框样式,带有双横线,不共用公共边,非常不美观。border-collapse: collapse; 表格内容水平左中右text-align: left/center/right;表格内容垂直上中下vertical-align: top/middle/bottom;示例代码...原创 2020-02-15 19:52:57 · 201 阅读 · 0 评论