利用:hover伪类实现鼠标指向区块滑出小提示效果 PetitQ HTML/CSS 2019-3-12 1.27K 0 0 本文利用css中:hover伪类实现将鼠标指向某区块时,区块内部滑出小提示效果,应用场景如广告上招商功能,一起来看一下。之前在某个平台发现了一个很有趣的效果,广告上有一个小按钮,当鼠标指向广告的时候,小按钮处侧滑出一个文本提示“也想…
利用:hover伪类实现鼠标指向区块滑出小提示效果 PetitQ HTML/CSS 2019-3-12 1.27K 0 0 本文利用css中:hover伪类实现将鼠标指向某区块时,区块内部滑出小提示效果,应用场景如广告上招商功能,一起来看一下。之前在某个平台发现了一个很有趣的效果,广告上有一个小按钮,当鼠标指向广告的时候,小按钮处侧滑出一个文本提示“也想…
竖向长方形图片横向排列并取图片中间不挤压变形的CSS方法 PetitQ HTML/CSS 2021-12-18 906 0 0 先看下这个图片:一个竖向的长方形图片,需求就是:通过CSS的方法使展示的时候竖向图片要实现横向正方形排列而且图片不能变形。一般排列后效果为: 完全变形了,那么进行代码样式优化后的效果为(取图片中间): HTML部分: CSS部分: …
竖向长方形图片横向排列并取图片中间不挤压变形的CSS方法 PetitQ HTML/CSS 2021-12-18 906 0 0 先看下这个图片:一个竖向的长方形图片,需求就是:通过CSS的方法使展示的时候竖向图片要实现横向正方形排列而且图片不能变形。一般排列后效果为: 完全变形了,那么进行代码样式优化后的效果为(取图片中间): HTML部分: CSS部分: …
font-face 字体文件跨域解决办法字体跨域 PetitQ HTML/CSS 2021-9-19 1.28K 0 0 开发网站的时候经常会调用不同域名下的字体文件(同源策略禁止读取位于ttf文件),但是出现无限的情况,提示如下:已拦截跨源请求: 同源策略禁止读取位于 https://www.22vd.com/fonts/fontawesome-we…
font-face 字体文件跨域解决办法字体跨域 PetitQ HTML/CSS 2021-9-19 1.28K 0 0 开发网站的时候经常会调用不同域名下的字体文件(同源策略禁止读取位于ttf文件),但是出现无限的情况,提示如下:已拦截跨源请求: 同源策略禁止读取位于 https://www.22vd.com/fonts/fontawesome-we…
原生态JS的方法调用CLASS元素标签 PetitQ HTML/CSS 2018-11-08 1.50K 0 0 最近研究起来原生态的js来,主要因为jquery太冗余了,拖慢了网站的访问速度,于是就写下了下面的这段代码来替换$(“.a1”)和$(“.a2”),希望对你们有用。
原生态JS的方法调用CLASS元素标签 PetitQ HTML/CSS 2018-11-08 1.50K 0 0 最近研究起来原生态的js来,主要因为jquery太冗余了,拖慢了网站的访问速度,于是就写下了下面的这段代码来替换$(“.a1”)和$(“.a2”),希望对你们有用。
CSS文本中换行不生效空格合并 PetitQ HTML/CSS 2021-12-06 1.23K 0 0 css 天天打交道,没想到在一个基础的white-space属性上栽跟斗了,最近在项目的一个功能时,小程序上报上来的问题,用户是选择了直接使用手机键盘上换行的方式来填写多行的表单内容。但是当PC管理端查看的时候,span内的内容全部…
CSS文本中换行不生效空格合并 PetitQ HTML/CSS 2021-12-06 1.23K 0 0 css 天天打交道,没想到在一个基础的white-space属性上栽跟斗了,最近在项目的一个功能时,小程序上报上来的问题,用户是选择了直接使用手机键盘上换行的方式来填写多行的表单内容。但是当PC管理端查看的时候,span内的内容全部…
jQuery获取上传文件的名称类型大小 PetitQ HTML/CSS 2018-11-09 2.11K 0 1 Web开发中,经常会涉及到文件上传。文件上传时通常都要验证文件的有效性,这个通常就要用正则表达式来判断。通常情况下,当用户通过<input type='file>'标签来上传文件时,我们可以看到上传文件的名称。HTML5…
jQuery获取上传文件的名称类型大小 PetitQ HTML/CSS 2018-11-09 2.11K 0 1 Web开发中,经常会涉及到文件上传。文件上传时通常都要验证文件的有效性,这个通常就要用正则表达式来判断。通常情况下,当用户通过<input type='file>'标签来上传文件时,我们可以看到上传文件的名称。HTML5…
CSS3渐变色的实现方法讲解 PetitQ HTML/CSS 2019-9-24 1.41K 0 0 在进行网页编程的时候有很多时候都会用到渐变色,但是CSS2处理渐变色比较困难,CSS3就比较方便了,所以今天余斗就教大家用CSS3实现渐变色功能。 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡…
CSS3渐变色的实现方法讲解 PetitQ HTML/CSS 2019-9-24 1.41K 0 0 在进行网页编程的时候有很多时候都会用到渐变色,但是CSS2处理渐变色比较困难,CSS3就比较方便了,所以今天余斗就教大家用CSS3实现渐变色功能。 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡…
用CSS让字体在一行内显示不换行 PetitQ HTML/CSS 2018-11-08 2K 0 0 当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?用CSS让文字在一行内显示不换行的方法,一般的文字截断(适用于内联与块): .text-overflow{ display:b…
用CSS让字体在一行内显示不换行 PetitQ HTML/CSS 2018-11-08 2K 0 0 当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?用CSS让文字在一行内显示不换行的方法,一般的文字截断(适用于内联与块): .text-overflow{ display:b…
苹果手机将网站添加到主屏幕上的方法 PetitQ HTML/CSS 2018-11-08 2.98K 2 0 通常在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。 apple-touch-icon是IOS设备的私有标签,如果设置了相应apple-touch-icon标签,则添加到主屏上的图标…
苹果手机将网站添加到主屏幕上的方法 PetitQ HTML/CSS 2018-11-08 2.98K 2 0 通常在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。 apple-touch-icon是IOS设备的私有标签,如果设置了相应apple-touch-icon标签,则添加到主屏上的图标…
如何给自己的网站添加WEB社交分享按钮 PetitQ HTML/CSS 2022-5-02 873 0 0 我们注意到,很多的网站都有WEB分享按钮,可以一键分享到很多的网站平台,如:分享到微博、微信、人人网等等。 以前我们做这种WEB分享按钮使用的是百度分享,但现在百度分享已经停用了。下面介绍另一种自己做网站时添加WEB分享按钮的方法。…
如何给自己的网站添加WEB社交分享按钮 PetitQ HTML/CSS 2022-5-02 873 0 0 我们注意到,很多的网站都有WEB分享按钮,可以一键分享到很多的网站平台,如:分享到微博、微信、人人网等等。 以前我们做这种WEB分享按钮使用的是百度分享,但现在百度分享已经停用了。下面介绍另一种自己做网站时添加WEB分享按钮的方法。…
jQuery判断鼠标向上滚动并浮动导航 PetitQ HTML/CSS 2018-11-11 1.74K 0 0 判断鼠标向上滚动,或者向下滚动,可以通过对比用户的上一次滚动的坐标和下一次的坐标,当上一次小于下一次时,即用户在向下滚动,反之,则说明用户在向上滚动。滚动的坐标值可以取窗口的scrollTop。为啥会有这个需求呢?有没有发现在一国外…
jQuery判断鼠标向上滚动并浮动导航 PetitQ HTML/CSS 2018-11-11 1.74K 0 0 判断鼠标向上滚动,或者向下滚动,可以通过对比用户的上一次滚动的坐标和下一次的坐标,当上一次小于下一次时,即用户在向下滚动,反之,则说明用户在向上滚动。滚动的坐标值可以取窗口的scrollTop。为啥会有这个需求呢?有没有发现在一国外…
DIV标签里面IMG图片下方留有空白怎么办 PetitQ HTML/CSS 2019-6-13 1.35K 0 0 我们很多个人博客网站都会广告位投放一些图片广告,在网页设计中,图片是不可缺少的素材,但是在div标签里面放入img图片的话,有时候会在图片的下方出现一行空间的区域,如果单纯的图片不醒目或是图片所在的位置不重要的话,我们可以不去理会,…
DIV标签里面IMG图片下方留有空白怎么办 PetitQ HTML/CSS 2019-6-13 1.35K 0 0 我们很多个人博客网站都会广告位投放一些图片广告,在网页设计中,图片是不可缺少的素材,但是在div标签里面放入img图片的话,有时候会在图片的下方出现一行空间的区域,如果单纯的图片不醒目或是图片所在的位置不重要的话,我们可以不去理会,…