Swiper 自动无缝匀速滚动
摘要:除了必要的代码外,还要加一个样式: .swiper-wrapper { display: flex; transition-timing-function: linear; /* 确保滚动速度是恒定的 */ }
阅读全文
posted @
2025-02-13 09:33
JoeYoung
阅读(3)
推荐(0) 编辑
table 中设置宽度被td或th里的内容撑开超出
摘要:给 table 表格添加属性: table-layout: fixed; 再对超出内容做换行、隐藏及点点点显示。 注意:给 table 设置宽度单位为百分比则给子元素设置宽度也用百分比。
阅读全文
posted @
2024-10-17 16:07
JoeYoung
阅读(111)
推荐(0) 编辑
通栏中不定数量的图片/轮播自适应宽高的简单示例
摘要:最近接到一个需求,在一个页面会有多个通栏,每个通栏中会有不固定数量的图片或轮播图,要求各图片/轮播要同等比例自适应宽高,写成通用代码。 示意图: 光是图片好说,其中有swiper就会比较麻烦。 代码: <div class="container"> <div class="zt_banner"> <
阅读全文
posted @
2024-05-30 09:50
JoeYoung
阅读(25)
推荐(0) 编辑
CSS的逻辑组合伪类
摘要:CSS 的逻辑组合伪类有 4 种,分别是::not()、:is()、:where()和:has()。 否定伪类:not() :not 伪类选择器用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类(negation pseudo-class)。 也叫否定伪类,是在元
阅读全文
posted @
2023-12-06 14:51
JoeYoung
阅读(138)
推荐(0) 编辑
CSS结构伪类选择器之否定伪类:not()
摘要:结构伪类选择器是针对 HTML 层级结构的伪类选择器。 常用的结构化伪类选择器有: :root选择器、:not选择器、:only-child选择器、:first-child选择器、:last-child选择器、 :nth-child选择器、:nth-child(n)选择器、:nth-last-chi
阅读全文
posted @
2023-12-05 14:48
JoeYoung
阅读(2673)
推荐(0) 编辑
iOS端内嵌H5页面 点击a标签无反应
摘要:问题1: iOS端内嵌H5页面,点击a链接无反应 解决: 一般这种问题发生在新窗口打开的情况下,也就是说 target 的值为 _blank 时会发生这个问题,改为 _self 即可解决问题。或者iOS的用户长按链接也是可以打开链接的,不过是跳转到了浏览器。 问题2: 如果点击的模块不是a标签或者b
阅读全文
posted @
2022-01-28 15:47
JoeYoung
阅读(574)
推荐(0) 编辑
/deep/ 深度作用选择器作用及使用
摘要:之前在开发中遇到一个问题,vue项目结合 element ui 使用。 但是 element ui 的样式不一定符合我们的需求,这时我们就需要改变它的样式。 比如博主使用到了element ui 的对话框,我想要改变这个对话框标题的颜色,所以我需要在页面中审查元素找到对应的标签。 但是当我找到并且复
阅读全文
posted @
2021-03-22 15:58
JoeYoung
阅读(323)
推荐(0) 编辑
css3字体缩放样式-webkit-text-size-adjust的用法详解
摘要:写页面的应该都知道Chrome浏览器默认情况下的字体最小为12px,如果你要设置某字体大小为10px的话,你会在Chrome发现还是12px。如果要使此生效的话,就得修改Chrome的默认配置了,一般应用下面的代码就能在全局生效了: html { -webkit-text-size-adjust:
阅读全文
posted @
2021-03-03 10:32
JoeYoung
阅读(2347)
推荐(0) 编辑
常见的移动端H5页面开发遇到的坑和解决办法
摘要:转过来,平时看看。虽然还有很多问题至今无解。比如:华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏。!! 1、安卓浏览器看背景图片,有些设备会模糊。 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,
阅读全文
posted @
2020-08-07 15:02
JoeYoung
阅读(3390)
推荐(0) 编辑
CSS3 Transform 属性详解
摘要:今天我们一起来学习有关于CSS3制作动画的几个属性:变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。本文主要介绍的是这三个属性之中的第一个──变形transform。 Transform字面上就是变形,改变的意思。在CSS3中transfo
阅读全文
posted @
2020-08-05 16:55
JoeYoung
阅读(1254)
推荐(0) 编辑
CSS3 @keyframes 规则
摘要:@keyframes 是实现过渡动画的方式。在动画过程中,通过更改css样式,实现从一个CSS样式设定到另一个。 定义和用法 通过 @keyframes 规则,您能够创建动画。 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中,您能够多次改变这套 CSS 样式。 以百分比来
阅读全文
posted @
2020-08-05 10:28
JoeYoung
阅读(400)
推荐(0) 编辑
nth-child(n)后代选择器IE8不兼容问题
摘要:使用jQuery解决方案: if (navigator.appName 'Microsoft Internet Explorer') { //判断是否是IE浏览器 if(navigator.userAgent.match(/Trident/i)&&navigator.userAgent.match(
阅读全文
posted @
2020-04-11 01:06
JoeYoung
阅读(422)
推荐(0) 编辑
网页黑白样式
摘要:网页黑白样式: html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscal
阅读全文
posted @
2020-04-04 21:41
JoeYoung
阅读(241)
推荐(0) 编辑
锚点/JQ:点击导航跳到网页中的指定位置
摘要:今天做了一个简单的功能,页面往下滚动到一定位置,顶部出现一个浮动的导航栏,点击导航栏标签,下面页面跳转到相应的区域。回到顶部,导航栏隐藏。 因为顶部有一个浮动的导航栏,所以跳转到下面页面的时候,总是盖住一部分,顶部浮动DIV的高度占用。 最简单的解决办法就是给锚点加上个下面的样式: 示例代码如下:
阅读全文
posted @
2019-09-25 16:26
JoeYoung
阅读(1798)
推荐(0) 编辑
html5 商品分类页面效果zepto
摘要:点击左边容器条目,右边列表对应的内容置顶显示,滑动右边的列表,左边容器的对应的标题高亮显示。 效果图如下: 代码:
阅读全文
posted @
2019-09-17 15:00
JoeYoung
阅读(4145)
推荐(0) 编辑
css解决fixed布局不会出现滚动条问题
摘要:需求是页面移动到一定高度时,顶部出现固定的导航栏,并导航栏带滚动条。 CSS很好实现,但是导航栏飘浮顶部后,滚动条怎么也不显示,搜了一些资料终于解决了,现做下笔记。
阅读全文
posted @
2019-09-17 09:46
JoeYoung
阅读(2462)
推荐(0) 编辑
CSS的选择器
摘要:最近在研究jQuery的选择器,大家知道jQuery的选择器和css的选择器非常相似,所以整理一下css选择器;css1-css3提供非常丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到。1.基础的选择器选择器含义示例*通用元素选择器,匹配任何元素* { margin:0; padding:0; }E标签选择器,匹配所有使用E标签的元素p { font-size:2em; }.info和E.infoclass选择器,匹配所有class属性中包含info的元素.info { background:#ff0; }p.info { backgro
阅读全文
posted @
2013-08-16 16:56
JoeYoung
阅读(255)
推荐(0) 编辑
用CSS3将你的设计带入下个高度
摘要:在本文中,我们将研究CSS3的优势,并看一下一些网页设计师是如何使用它们的。最后,我们将了解到从CSS3中我们能得到什么以及我们如何在我们的项目中使用它的新特性。
阅读全文
posted @
2013-03-18 16:44
JoeYoung
阅读(360)
推荐(0) 编辑