css

前端深入之css篇丨2020年前,彻底掌握css动画animation
日志写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...
前端深入之css篇丨2020年前,彻底掌握css动画transition
日志写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...
浮动元素遇到标准流元素 会发生转角遇到爱
日志 你遇到过这种问题吗? 比如一共有几个div是浮动的    但是它遇到了标准流的一个div 然后就发生问题了 可是并不知道问题是怎么产生的 eg:html <div class="bo ...
CSS实现核辐射警告标志
日志今天做了下360的前端星计划测试题,碰到一个有趣的css题,实现如下图效果,记得上次也是在360面试的时候碰到一个有趣的css实现宝马logo,不得不说360的面试题还是很有创意的. 我一直努力想用一 ...
A>B等CSS选择器
日志这些是CSS3特有的选择器,A>B 表示选择A元素的所有子B元素. 与A B的区别在于,A B选择所有后代元素,而A>B只选择一代. 另外:没有<的用法. A+B表示HTML中紧随A ...
css解决滚动弹出层里边的滚动条时带动了整个页面滚动的问题
日志之前一个朋友问我说他的一个弹出层在弹出后,上下滑动弹出层或遮罩层,结果遮罩层下边的整个页面(页面超出了一屏)也跟着滚动了,他说他不想要这样的效果,我说你把弹出层和遮罩层的position:fixed设 ...
前端自动化工具gulp自动添加版本号
日志之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时 ...
解决overflow:hidden在安卓微信页面没有效果的办法
日志在做h5移动端时候,发现overflow: hidden;在安卓微信页面失效问题,经研究和实验,用第三种方法和第四种方法可以解决! 1.完全隐藏 在<boby>里加入scroll=&quo ...
CSS实现三角效果
日志方法一:使用border来设置边框,元素有高度和宽度 <i class="triangle"></i> .triangle { transform: rot ...
浅析word-break work-wrap区别
日志word-break:[断词] 定义:规定自动换行的处理方法.   注:通过word-break使用,可以实现让浏览器在任意位置换行. 语法:word-break: normal|break-all| ...
Bootstrap 入门到精通
日志介绍 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.Bootstr ...
下拉菜单demo---参考阿里云首页顶部下拉菜单
日志前言: 最近开始学习html+css,准备仿照各大网站写一些demo. 正文: 分析阶段: 如下图: 链接来自于: 阿里云:https://www.aliyun.com/ 实现过程: (一)用css3 ...
css设置移动端checkbox和radio样式
日志复选框Checkbox是Web应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式.以往只有少数浏览 ...
gulp多张图片自动合成雪碧图
日志相信做前端的同学都做过这样的事情,为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面.对于一些图片较多的项 ...
用clip剪裁实现半圆
日志定义和用法 clip 属性剪裁绝对定位元素. 说明 这个属性用于定义一个剪裁矩形.对于一个绝对定义元素,在这个矩形内的内容才可见.出了这个剪裁区域的内容会根据 overflow 的值来处理.剪裁区域可 ...
css去掉使用bootstrap框架后打印网页时预览效果下的超链接
日志在我们写网页的时候,超链接是链接各个页面的桥梁,也是搜索引擎爬虫(spider)收录网站页面的关键,因此,在每个网页中会有许多的超链. 今天,一个同行妹妹在使用了bootstrap框架来搭建自己的网站 ...
CSS去除firefox点击链接时的虚线边框
日志a { outline: none; } 或者缩小范围: a:focus { outline: none; }
相邻div实现一个跟着另一个自适应高度示例代码
日志 方法一: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> &l ...
css尖角
日志.market-nav-arrow { height: 0; font-size: 0; line-height: 0; border-style: solid; border-width: 7px ...
学习Sass之安装Sass(一)
日志为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE.JS而成为目前前后端统一开 ...