css
风轻云淡180518
代码千万行,注释第一行;编程不规范,同事两行泪
展开
-
让网页变灰
每次全国哀悼日,各大网站首页都变成了灰色,添加以下全局CSS样式,可以实现此效果:本篇文章来自:http://www.fly63.com/article/detial/8487方法一html { -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysa...原创 2020-04-17 10:43:15 · 332 阅读 · 2 评论 -
css将一张宽度为百分比的图片设置成正方形
使用css很容易将图片设置为正方形,只要宽高相等即可,但如果图片的宽度是一个百分比呢,比如50%,那么就用到了下面的方法了。<div class="wrap"> <div class="div"> <img src="a.jpg"> </div></div><style> .wrap{ w...原创 2019-04-02 15:11:21 · 2088 阅读 · 2 评论 -
iphone 6的兼容问题
Flexdisplay: flex → display: -webkit-flexjustify-content: space-between; → -webkit-justify-content: space-betweenalign-items: center; → -webkit-align-items: centerflex-direction: co...原创 2019-03-20 15:02:39 · 558 阅读 · 0 评论 -
web前端rem适配
rem是前端的一个长度单位,前端的单位有px(像素),em(相对于父元素),rem(相对于根节点),px一般应用与PC端,而移动端则多采用rem来达到更好的效果。针对rem 主要有一下3中主流的适配方案:1.媒体查询(不推荐)// 计算rem的基准字体$rem-base-font-size: 100px;// UI设计图的分辨率宽度$UI-resolution-width: ...转载 2017-09-01 09:43:01 · 1452 阅读 · 0 评论 -
checkbox美化
传统的checkbox表单元素是不好看的,而且每个浏览器表现出来的样式还不一样,很多时候我们会借助一些表单美化的插件实现类似开关切换的效果,有些是用 js+css 实现的,而有些则是纯CSS实现的,我们更应该感兴趣的是后者,今天我们就来一步一步实现一个CheckBox美化的效果开始之前我们先搞清楚,要给CheckBox 的样式好像不太可行,所以需要借助label的for来间接触发 CheckB...原创 2018-11-19 11:00:32 · 1977 阅读 · 0 评论 -
css三角形
今天我们来聊一聊怎么通过css来绘制一个三角形的。原理就是border属性的应用。首先定义一下HTML结构<div class="box"></div>然后给box添加样式.box{ width:200px; height:60px; border:1px solid #333; position:relative; margin:5...原创 2018-11-26 10:40:23 · 205 阅读 · 0 评论 -
css position:sticky
position 是 CSS中的一个常用属性,常见的取值有:relative,absolute,static,fixed,不过我还有一个取值想必很多同学都没听过,那就是sticky,这个定位是干啥用的呢?我们经常会遇到的一个场景就是,网页左侧有一个重要区域,正常情况下是跟随网页滚动条滚动的,当该元素到达浏览器顶部时,元素的定位就变成了fixed不动了。对于这种需求的解决方案通常借助JS和C...原创 2018-10-22 16:19:34 · 536 阅读 · 0 评论 -
CSS子元素选择父元素
通常一个CSS选择器都是从上往下选择的,通过父元素选择子元素,那么能不能通过子元素选择父元素呢?<ul> <li> <a href="#" class="active">1</a> </li> <li> <a href=&quo原创 2018-10-09 23:21:38 · 101745 阅读 · 12 评论 -
nth-child 的妙用
你不知道的 :nth-child我们平时使用 :nth-child 的普遍用法是p:nth-child(1){ color:red;}表示获取在兄弟元素中的位置为1的<p>标签,实际上这里的1并非只能是一个数字,还可以是其他的数据格式。an+b这是一个表达式,这里的n从0开始取值,每次+1后代入计算,最终得出一个位置的数组,比如:p:nth-child(...原创 2018-10-05 16:16:50 · 1567 阅读 · 0 评论 -
CSS变量
今天的问题是如何实现一个主题切换功能,比如我们有黑白两个主题,常规的做法是编写两个CSS主题文件light.css.theme-light{ background-color:#fff; color:#444}.theme-light a{ color:#444;}black.css.theme-black{ background-color:#000...原创 2018-09-20 23:53:42 · 1111 阅读 · 0 评论 -
css flex布局
虽然flex已经出了很久了,而且兼容性也已经不是问题,但我在布局的时候还是用的float,看到别的同事用了flex,觉得挺方便的,就学习了一下,以下内容均来自:http://www.runoob.com/w3cnote/flex-grammar.html采用flex布局的元素,成为flex容器,他所有的子元素自动成为容器成员,成为flex项目,容器默认存在两根轴,水平轴(main axis) ...原创 2018-08-14 17:56:16 · 153 阅读 · 0 评论 -
炫酷的loading动画源码
黑色科技SVG动画先记录一下,有时间再去搬代码原创 2018-05-25 23:07:13 · 548 阅读 · 0 评论 -
CSS重置样式
浏览器对HTML元素都会有默认的样式,它们的样式都是根据语义来定义的,但有时也会对我们的开发带来不便,而且不同浏览器所呈现的样式也会有所差异,通常我们都会对样式进行重置,总结了一下,大致有以下两种方案。1、rest.jsrest比较激进,不管你有没有用,统统重置成一样的效果,且影响的范围很大,讲求跨浏览器的一致性。源码:https://meyerweb.com/eric/tools/css/res...原创 2018-05-23 20:43:20 · 348 阅读 · 0 评论 -
浏览器滚动条的处理
今天遇到了一个关于滚动条的问题,为了处理这个问题整整试了一上午,,印象深刻,遂作此文章,以备后用。* 子元素的宽度默认会撑满父元素的宽度* 没有滚动条时 子元素宽度 = 父元素宽度* 有滚动条时 父元素的有效宽度会变小 父元素宽度 = 原父元素宽度 - 滚动条宽度* 因此子元素重新调整宽度 子元素宽度 = 原父元素宽度 - 滚动条宽度* 此时子元素明显会因为宽度变...原创 2017-07-14 15:47:44 · 1214 阅读 · 0 评论