![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 60
敲出真谛
这个作者很懒,什么都没留下…
展开
-
常见三栏布局方法总结
1.float<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三栏布局</title> <style> * { ..原创 2021-02-24 20:03:22 · 488 阅读 · 1 评论 -
再说css中的BFC
1.BFC是什么?在解释BFC之前,先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。FC(Formatting Context),直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。常见的FC有BFC、IFC,还有GFC和FFC。BFC(Block Formatting Context)块级格式化上下文,是用于布局块级盒子的一块渲染区域。MDN上的解释:BFC是Web页面 CS原创 2021-02-23 17:01:46 · 160 阅读 · 1 评论 -
浏览器兼容性专题一 在火狐浏览器下父级为flex:1的布局中el-table无限被拉伸
今天在火狐浏览器下演示自己的vue项目,发现试用的element-ui中的table表格在伸缩布局中flex:1属性下存在表格无线拉伸的现象。被人鄙视了一把,心里哪个滋味呀,你懂的。。。话不多说,上现象老弟你这是要去哪里,现在疫情这么严重,不让出门不知道吗?查询资料后,发现伸缩布局在火狐浏览器下存在兼容性问题,而在谷歌浏览器下是可以正常显示的。解决方法1.在flex:1的元...原创 2020-03-31 10:09:23 · 1627 阅读 · 0 评论 -
前端面试杂技 --- 攻克前端面试 (html&css)
1.在下列的 HTML 中,哪个可以添加背景颜色?() A.<body color="yellow"> B.<background>yellow</background> C.<body bgcolor="yellow">2.在下列的 HTML 中,哪个可以插入背景图像?() A.<body background="backgr...原创 2019-04-03 14:54:50 · 6639 阅读 · 1 评论 -
使用swiper插件实现轮播图
swiper是一款功能强大的插件,可以实现很多我们意想不到的轮播效果。1.在使用swiper之前首先要引入插件自带的样式和行为 <link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/> <script src="../css/swiper.min-3.js" ty...原创 2018-12-29 19:48:23 · 4331 阅读 · 0 评论 -
css3实现旋转的八卦图动画
border的功能真的不容小觑,可以实现一些意想不到的特殊符号。今天就用border实现正方形继而实现旋转的八卦图先上个效果图<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" co原创 2018-12-05 19:51:09 · 1408 阅读 · 0 评论 -
那些年我们用css3实现的打开盒子的3d动画
本片博客意在练习使用css3的新增特性实现一些炫酷的特效特效如图代码如下<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"原创 2018-12-01 15:41:12 · 2238 阅读 · 0 评论 -
css3实现盒子旋转打开的3d动画
先来记忆一下动画相关的知识 animation 动画 帧数 1秒 60副画面 animation-name 动画名称 见名知意 animation-duration 动画时间 animation-delay 动画延迟时间 ...原创 2018-12-01 11:56:45 · 2054 阅读 · 0 评论 -
css3实现奔跑的小人动画
定位 层级和动画的完美融合效果图有点吃藕了,图片不重要<!doctype html><html><!--根标签--> <head> <!--不可视区域--> <meta charset="UTF-8"><!--国际编码--> <!--网页三要素--原创 2018-12-04 19:42:49 · 2991 阅读 · 0 评论 -
css3实现下拉列表框
利用css3的新特性transition过渡特性实现下拉列表框 (js方式前面已经实现)transition 主要有四大特性1.transition-property 过渡的属性2.transition-duration 过渡持续的时间3.transition-delay 过渡延迟指定的时间4.transition-timing-function 过渡运动的曲线...原创 2018-11-30 13:56:04 · 5174 阅读 · 0 评论 -
说说淘宝网logo的双重保险
研究了淘宝网的结构之后不得不佩服马爸爸的研发团队,整个架构即使网络不好的情况下,也是照样实现功能的。并不是想象中的js和css加载不出来之后就成了一团乱麻。今天我们就拿淘宝网的logo实现来说说网站的双保险设计,何为双保险呢,就是网络差的情况下,logo图片即使加载不出来,但是照样有可以点击的文字来实现功能。如下图 在图片加载出来时显示的图标是这样的,真个border框以内都是可以点击...原创 2018-11-15 19:52:11 · 210 阅读 · 0 评论 -
css实现垂直居中的12种方法,用起来666
今天利用周末整理了一下垂直居中的问题,这也是在平时的开发中用的较多的技术栈。1.单行文字的垂直居中 原理:利用行高等于盒子的高来实现<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> &l原创 2018-09-01 16:14:46 · 549 阅读 · 0 评论 -
jQuery仿淘宝精品服饰广告的实现
技术栈涉及 隐式迭代的遍历 筛选选择器 和为元素排序等代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>仿淘宝精品服饰广告/title> <style> *{ margin: 0;原创 2018-08-18 22:33:33 · 703 阅读 · 0 评论 -
js实现点击空白处隐藏
技术栈涉及阻止冒泡的方法和怎样判断点击的是当前对象,都是一些工作中比较常用的知识点。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style&am原创 2018-08-12 21:26:22 · 5098 阅读 · 1 评论 -
js实现垂直滚动条
滚动条长度的计算公式 = 容器的高度/内容的高度*容器的高度图例如下滚动条滚动一次,内容移动的距离 = (内容的高度 - 容器的高度)/(容器的高度 - 滚动条高度)*滚动条移动的距离代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title...原创 2018-08-12 17:35:12 · 6515 阅读 · 1 评论 -
js实现筋斗云效果
理解缓动动画的原理<!DOCTYPE html><!--create by ydj on 2018-08-12--><html> <head> <meta charset="UTF-8"> <title>筋斗云</title> <style>原创 2018-08-12 15:59:31 · 2310 阅读 · 4 评论 -
js实现拖动的水平条
理解拖动的原理,鼠标先按下再移动,鼠标抬起停止拖动。代码如下:<!DOCTYPE html><!--create by ydj on 2018-08-12--><html> <head> <meta charset="UTF-8"> <title>拖动的水平条</title&g原创 2018-08-12 15:23:17 · 2867 阅读 · 1 评论 -
js实现放大镜效果
本片博客的技术栈涉及布局中的offsetxx相关的操作和子绝父相的小技巧使用,以及要想使用top/left必须使用定位等思想。代码如下:<!DOCTYPE html><!--create by ydj on 2018-08-12--><html> <head> <meta charset="UTF-8"> <..原创 2018-08-12 13:29:49 · 3615 阅读 · 0 评论