CSS
Mickey_于浩
————————Mickey mouse
展开
-
css —— 按钮水波纹扩散动画效果实现
水波纹动画效果原创 2022-04-26 17:00:59 · 4415 阅读 · 0 评论 -
CSS ( Flex布局 ) —— 关于flex布局使用滚动条时,最后一个元素margin无效的问题
在开发中,很常用到flex布局,当使用flex布局,需要使用滚动条的时候,最后一个元素会出现margin无效的情况,如下: <div class="wrap"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div&原创 2020-08-21 15:04:53 · 6697 阅读 · 1 评论 -
CSS —— 有了它,图片再也不会变形了!object-fit 与 object-position 属性详解
在页面展示图片中,总会遇到图片展示不符合自己想法的事情,比如固定了图片宽高,图片会变形其实CSS提供了一个object-fit属性,object-fit: cover; 就可以解决图片变形的问题介绍:object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。object-fit 一般用于 img 和 video 标签,一般可以对这些原素进行保留原始比例的剪切、...原创 2020-04-27 15:58:24 · 1434 阅读 · 0 评论 -
屏幕滚动到页面某个位置,导航栏固定顶部功能。临近值闪烁问题解决办法
在前端开发中,又是会遇到实现页面中有个导航栏,页面滚动到导航栏位置时,导航栏固定在顶部。滚动回去,导航栏再恢复到页面中。我们需要获取 :1. 导航栏在页面中距离窗口顶部的高度 top2. 时刻检测窗口滚动的高度 scrollTop当 scrollTop >= top时 说明页面已经滚动到导航的位置了,这时候使用给导航添加个class然后设置导航position:fixed...原创 2019-08-06 17:52:25 · 2321 阅读 · 0 评论 -
【css】苹果手机上input的button按钮颜色显示问题
在手机页面上写了个input的button按钮,但是颜色显示不对可以在css中加上下面这句input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; } 问题解决...原创 2018-04-16 10:10:16 · 2315 阅读 · 1 评论 -
【CSS】css实现移动端或手机网页上溢出滚动但隐藏滚动条的原理和方法
要实现可以滚动但又不显示滚动条的原理很简单,只要在外面再套一个盒子,想办法把滚动条挤出盒子外隐藏掉就好了下面以导航栏允许横向滚动不显示滚动条的方法为例:<div style="overflow:hidden;height:60px;"> <div style="overflow-x:scroll;width:400px;"> <ul style="width:8...原创 2018-03-23 15:23:48 · 9930 阅读 · 0 评论 -
虚线
var w = $("#divdiv").width(); var x = Math.floor(w/28); for(var i=0;i $("#divdiv").append(""); } $("#divdiv span").css({'width':'25px','margin-left':'3px','border-bottom':'1原创 2017-09-13 11:19:01 · 344 阅读 · 0 评论 -
CSS——word-spacing汉字不起作用的解决方法
使用:letter-spacing才可以word-spacing==>单词间隔letter-spacing==>字母/汉子间隔原创 2017-06-22 10:27:35 · 3351 阅读 · 0 评论 -
CSS——textarea多行文本框禁止拖动问题解决
很简单:textarea{resize:none;}就OK了!!!原创 2017-06-22 10:24:17 · 12346 阅读 · 5 评论 -
CSS——微信朋友圈图片样式实现方法
像微信朋友圈一样,添加图片的时候,等比例正方形显示在列表中,示例如下: .figure-list{ margin: 0; padding: 0; } .figure-list:after{ content: ""; display: blo原创 2017-05-24 11:03:56 · 8711 阅读 · 0 评论 -
CSS——实现图片等比例正方形显示,宫格排列
像微信朋友圈一样,添加图片的时候,等比例正方形显示在列表中,示例如下: .figure-list{ margin: 0; padding: 0; } .figure-list:after{ content: ""; display: block;原创 2017-05-24 11:00:49 · 6897 阅读 · 0 评论 -
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
文章转载来源地址:http://blog.csdn.net/freshlover/article/details/11579669 点击打开链接Ⅰ.绝对定位居中(Absolute Centering)技术我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS:转载 2016-09-20 08:54:44 · 525 阅读 · 0 评论