![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
傻她你呀
这个作者很懒,什么都没留下…
展开
-
Bootstrap里的圆角outline
Bootstrap里的圆角outlineBootstrap里的所有按钮都会有圆角outline的效果,像这样:刚开始我以为是outline的效果,但是outline的圆角效果只有火狐浏览器支持,大多数浏览器都不支持,所以这里肯定不是outlineBootstrap的btn类里面有box-shadow这个属性,很显然就是使用这个属性实现的,如果不使用Bootstrap<button class="menu-button">menu-button</button>原创 2020-06-29 08:56:35 · 5582 阅读 · 0 评论 -
数据分页的实现
数据分页的实现今天在做项目的过程当中遇到了数据分页,说到数据分页,相信都不会陌生,平常百度的时候都会遇到:这个算是比较经典的,今天特意实现一下数据分页,以下是我的效果图:可以进行页数搜索,像这样:外观看起来比较好看,也很好用话不多说,直接上代码以下是基本的布局 demo.html<!DOCTYPE html><html> <hea...原创 2019-10-25 16:52:55 · 1478 阅读 · 0 评论 -
checkbox的改造
checkbox的改造因为在视频播放器制作过程中,有一个要开启弹幕的按钮,像这样:于是呢,通过checkbox进行改造会好一点事实上,这样的按钮很常见,移动端更是屡见不鲜,因为它漂亮,美观话不多说,直接上代码有两种方法,一种是纯css方法,另外一种是css+js方法,不过如果能用css就用css,因为使用js的话就要在创建一个js文件,我不喜欢这样<!DOCTYPE h...原创 2019-10-23 10:49:49 · 153 阅读 · 0 评论 -
轮播图
轮播图说实话这篇文章我不是特别想写,因为轮播图的实现原理也比较简单,但是今天还是来说说这个事儿,算是加深一下印象2333一般常见的轮播图,例如小米官网的轮播图你会发现轮播图与的结构基本上是这样:一个父容器里面有一个图片集合,还有两个按钮,分别是“下一张”按钮和“上一张”按钮,可能还会有“指示器”,就是这个:今天来说说一个不一样的轮播图,但是本质上还是轮播图,如下:一共是十张图片,...原创 2019-10-10 20:10:50 · 696 阅读 · 0 评论 -
横向滚动
横向滚动说起横向滚动,经常用,注意是横向滚动,不是轮播图,看看下面事例:就是这样的横向滚动看看html布局<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=de...原创 2019-10-09 17:07:19 · 669 阅读 · 0 评论 -
css绝对定位的参照物
css绝对定位的重新认知所谓的css绝对定位,就是 position:absolute;这里记录一个我的错误认知,就是 绝对定位的参照物是 内容,还是 内容+内边距,我一直以为 参照物就是内容,但是实际上参照物是 内容+内边距看看下面的事例<!DOCTYPE html><html> <head> <meta chars...原创 2019-10-09 16:43:58 · 1821 阅读 · 0 评论 -
导航栏的魔法
导航栏的魔法说起导航栏如何制作,相信只要会html和css都会写出一个导航栏,现在就来谈谈导航栏的布局假如我要制作这样的导航栏因为图片太小看不见,为了更容易看清,看看左侧部分和右侧部分左侧部分右侧部分我最开始想到的肯定是flex布局,然后使用 justify-content:space-between ,这样基本就可以实现布局了,代码会是这样子<!DOCTYPE ht...原创 2019-10-09 09:34:25 · 136 阅读 · 0 评论 -
css有意思的那些事儿
css有意思的那些事儿今天我发现了一个比较有意思的事儿,style标签放在那里都是预先加载,一般来说,style标签都是放在head标签里面,但是今天我脑子可能进水了,突然想知道如果把style标签放在body标签里边或者body的结束标签之前看看元素是不是还有样式,发现元素依然还是有样式,也就是说,style标签无论放在那里都会预先加载其实仔细想想也不会太惊讶,因为在浏览器渲染html页面...原创 2019-09-19 20:39:48 · 202 阅读 · 0 评论 -
css3 gird布局
这次谢谢自己对css3grid布局的感悟23333什么时候会用到grid布局,如遇到一个二维布局的时候,那么grid布局比较合适,而对于一位布局,flex布局比较合适,那什么是一维布局,什么是二维布局呢?打开https://www.mi.com/小米官网,其实你可以看到很多,例如:这实际上就是个一维布局,当然你也可以使用二维布局这实际上就是个典型的二维布局,可以轻松使用...原创 2019-05-13 17:12:57 · 241 阅读 · 0 评论 -
分析小米商城的导航栏的布局及其动画实现
首先看看小米商城的导航栏,如图:通过实际测试可以知道,服务和社区不属于下拉菜单,除了这两个,剩下的全是下拉菜单,想成了一个下拉菜单组,一旦鼠标进入下拉菜单组,那么就会有下拉效果,通过也有过渡效果,所以肯定有transition'属性,目测时间为0.3s左右,一旦鼠标离开下拉菜单组,那么下拉菜单就会收起来,这个比较直观,还有就是下拉菜单选项之间的切换几乎是没有过度效果的。先来看看怎...原创 2019-05-20 15:23:14 · 5419 阅读 · 0 评论 -
分析小米商城左侧菜单的布局和效果实现
小米左侧菜单如图:也就是说,在没有点击左侧菜单的时候,背景是一个轮播图,一旦点击了左侧菜单,或者说鼠标在左侧菜单上滑动,那么就会触发左侧菜单的动画演示,这次就是来分析动画演示的具体是怎么实现的,以及他是怎么布局的。首先在这个区域,可以看见是有两个部分组成,分别是轮播图和左侧的开始菜单,但是你可以看见因为这两个是重叠在一起的,因此可以知道 轮播图 肯定是使用了position:ab...原创 2019-05-19 22:31:55 · 4137 阅读 · 2 评论