![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 67
重阳微噪
这个作者很懒,什么都没留下…
展开
-
盒子水平垂直居中的11种方案
1、定位+margin拉回<style> #box { width: 100px; height: 100px; position: relative; background-color: #ff0; } #block { width: 30px; height: 30px; background-color: aqua; position: absolute;原创 2020-09-24 16:27:08 · 360 阅读 · 0 评论 -
CSS一个div实现一个心形
css.heart { width: 100px; height: 100px; position: relative; background-color: #f00; transform: rotate(45deg); } .heart::before, .heart::after { position: absolute; content: ''; background-color:原创 2020-05-22 16:41:09 · 1527 阅读 · 1 评论 -
className多种样式的三种写法
1、 className 利用 ${ } className={`${style.fruit} ${style.apple}`}2、 className join className={[style.fruit,style.apple].join(' ')}3、利用classnames库 npm install classnames --save <div className=classnames({ 'class1': true, 'class.原创 2020-05-20 11:21:36 · 2598 阅读 · 0 评论 -
css系列----纯 css 实现轮播图(自动)
3、纯 css 实现轮播图(自动)实现原理:利用 css3 中 动画和 overflow:hidden 实现/* 容器大小 */.container { height: 300px; width: 800px; overflow: hidden;}/* .wrap */.wrap { position: relative; left: 0px; width: ...原创 2020-03-20 16:03:06 · 4385 阅读 · 0 评论 -
css系列----纯 css 实现轮播图(手动)
2、纯 css 实现轮播图(手动)实现原理:利用 css3 中 input:checked 和 + ~选择器实现/* 设置容器大小*/.container { position: relative; width: 800px; height: 300px;}/* 设置input位置 */.container input { position: absolute; z...原创 2020-03-20 15:33:08 · 3354 阅读 · 4 评论 -
css系列----css 实现选项卡功能
1、纯 css 实现选项卡功能实现原理:利用css3 中input:checked 和 + ~选择器实现ul li { float: left; height: 30px; width: 100px; cursor: pointer;}input:checked + li { color: #f00;}input:checked ~ div { visibi...原创 2020-03-20 10:55:53 · 1799 阅读 · 0 评论