纯CSS代码将整个网站页面变成黑白色整站灰色 PetitQ HTML/CSS 2021-12-13 8.28K 0 18 对于南京大屠杀这样需要悼念的日子,一般在全国哀悼日,大地震的日子,清明节,我们都会让自己的网站全站灰色,以表示对逝者的悼念。以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表…
纯CSS代码将整个网站页面变成黑白色整站灰色 PetitQ HTML/CSS 2021-12-13 8.28K 0 18 对于南京大屠杀这样需要悼念的日子,一般在全国哀悼日,大地震的日子,清明节,我们都会让自己的网站全站灰色,以表示对逝者的悼念。以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表…
纯CSS3将彩色图片转换成黑白图片 PetitQ HTML/CSS 2018-11-09 3K 0 0 通过使用过滤器我们能够不使用photoshop等图像软件或js、php等技术就可以进行各种图像处理。最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果。现在,CSS过滤器已经被各种现代浏览器广泛支持,我们可以使用…
纯CSS3将彩色图片转换成黑白图片 PetitQ HTML/CSS 2018-11-09 3K 0 0 通过使用过滤器我们能够不使用photoshop等图像软件或js、php等技术就可以进行各种图像处理。最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果。现在,CSS过滤器已经被各种现代浏览器广泛支持,我们可以使用…
纯CSS3实现手风琴风格菜单具体步骤 PetitQ HTML/CSS 2018-11-08 1.54K 0 0 有朋友问我,我的demo里面的手风琴效果怎么做出来,看起来很漂亮,其实这个手风琴效果没用一点js,全部用css3来实现的,菜单主要通过使用:target伪类来实现,教程中我们主要通过使用伪类:before和:target来定义样式,…
纯CSS3实现手风琴风格菜单具体步骤 PetitQ HTML/CSS 2018-11-08 1.54K 0 0 有朋友问我,我的demo里面的手风琴效果怎么做出来,看起来很漂亮,其实这个手风琴效果没用一点js,全部用css3来实现的,菜单主要通过使用:target伪类来实现,教程中我们主要通过使用伪类:before和:target来定义样式,…
竖向长方形图片横向排列并取图片中间不挤压变形的CSS方法 PetitQ HTML/CSS 2021-12-18 922 0 0 先看下这个图片:一个竖向的长方形图片,需求就是:通过CSS的方法使展示的时候竖向图片要实现横向正方形排列而且图片不能变形。一般排列后效果为: 完全变形了,那么进行代码样式优化后的效果为(取图片中间): HTML部分: CSS部分: …
竖向长方形图片横向排列并取图片中间不挤压变形的CSS方法 PetitQ HTML/CSS 2021-12-18 922 0 0 先看下这个图片:一个竖向的长方形图片,需求就是:通过CSS的方法使展示的时候竖向图片要实现横向正方形排列而且图片不能变形。一般排列后效果为: 完全变形了,那么进行代码样式优化后的效果为(取图片中间): HTML部分: CSS部分: …
移动端自适应样式@media的使用方法 PetitQ HTML/CSS 2019-5-19 2.23K 0 0 通用手机端样式: @media all and (orientation : portrait) { /*竖屏*/ } @media all and (orientation : landscape) { /*横屏*/ } 指定手机…
移动端自适应样式@media的使用方法 PetitQ HTML/CSS 2019-5-19 2.23K 0 0 通用手机端样式: @media all and (orientation : portrait) { /*竖屏*/ } @media all and (orientation : landscape) { /*横屏*/ } 指定手机…
禁止移动设备长按拷贝 PetitQ HTML/CSS 2018-11-07 1.76K 0 0 网页在手机上浏览时通常会碰到一个问题,就是不小心触摸时间过长就出现自带的拷贝等按键了(有些客户也需要屏蔽手机端复制功能),造成了不好的体验,下面就教你解决办法。 web端,只需在css中加入代码就可以了 *{ -webkit-tou…
禁止移动设备长按拷贝 PetitQ HTML/CSS 2018-11-07 1.76K 0 0 网页在手机上浏览时通常会碰到一个问题,就是不小心触摸时间过长就出现自带的拷贝等按键了(有些客户也需要屏蔽手机端复制功能),造成了不好的体验,下面就教你解决办法。 web端,只需在css中加入代码就可以了 *{ -webkit-tou…
用纯CSS打造圆形图片旋转的方法 PetitQ HTML/CSS 2018-11-08 3.85K 0 4 上次看到一个博客的LOGO图片很好看,一个旋转的圆形人物图片,但是我看他用了大量的JS代码来渲染这个效果。其实这种方式纯CSS3是完全可以实现,我们只需要考虑清楚我们的思路。 1、圆形图片 我们这里使用了一张哈弗H2的图片。 然后把…
用纯CSS打造圆形图片旋转的方法 PetitQ HTML/CSS 2018-11-08 3.85K 0 4 上次看到一个博客的LOGO图片很好看,一个旋转的圆形人物图片,但是我看他用了大量的JS代码来渲染这个效果。其实这种方式纯CSS3是完全可以实现,我们只需要考虑清楚我们的思路。 1、圆形图片 我们这里使用了一张哈弗H2的图片。 然后把…
用CSS让字体在一行内显示不换行 PetitQ HTML/CSS 2018-11-08 2.01K 0 0 当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?用CSS让文字在一行内显示不换行的方法,一般的文字截断(适用于内联与块): .text-overflow{ display:b…
用CSS让字体在一行内显示不换行 PetitQ HTML/CSS 2018-11-08 2.01K 0 0 当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?用CSS让文字在一行内显示不换行的方法,一般的文字截断(适用于内联与块): .text-overflow{ display:b…
浅谈 CSS3 盒布局与弹性盒布局 PetitQ HTML/CSS 2022-6-11 739 0 0 在网页布局中,如果让让几个块状区域横向排列,常用的方法就是使用float:left。但使用float属性时,会出现一些问题,例如浮动,并且如果不同版块的内容数量不一样就会造成各个版块的高度不一样。 section 什么是CSS3 盒…
浅谈 CSS3 盒布局与弹性盒布局 PetitQ HTML/CSS 2022-6-11 739 0 0 在网页布局中,如果让让几个块状区域横向排列,常用的方法就是使用float:left。但使用float属性时,会出现一些问题,例如浮动,并且如果不同版块的内容数量不一样就会造成各个版块的高度不一样。 section 什么是CSS3 盒…
每个IP自定义时间弹窗跳转广告代码 PetitQ HTML/CSS 2018-12-24 1.67K 0 0 分享一段网页自定义ip时间转跳弹窗的广告代码,支持自定义设置用户IP重复转跳网址的时间,做到每个用户,每个IP一定时间内不重复弹窗的功能。许多站长接广告的时候,因为弹窗价格比较高,所以经常会选择弹窗广告,不过这样对用户体验非常的差。…
每个IP自定义时间弹窗跳转广告代码 PetitQ HTML/CSS 2018-12-24 1.67K 0 0 分享一段网页自定义ip时间转跳弹窗的广告代码,支持自定义设置用户IP重复转跳网址的时间,做到每个用户,每个IP一定时间内不重复弹窗的功能。许多站长接广告的时候,因为弹窗价格比较高,所以经常会选择弹窗广告,不过这样对用户体验非常的差。…
根据user-agent判断客户端是PC、安卓、苹果显示不同内容 PetitQ HTML/CSS 2019-11-20 1.48K 0 0 今天接到一个做客户的单子,他要求安卓、苹果、PC端打开的页面显示不同的APP下载链接!目前用电脑上的浏览器,android设备,iphone,ipad均做过测试,此代码可行,各设备判断均正确。分享给有需要的人,大牛请绕道~ HTML…
根据user-agent判断客户端是PC、安卓、苹果显示不同内容 PetitQ HTML/CSS 2019-11-20 1.48K 0 0 今天接到一个做客户的单子,他要求安卓、苹果、PC端打开的页面显示不同的APP下载链接!目前用电脑上的浏览器,android设备,iphone,ipad均做过测试,此代码可行,各设备判断均正确。分享给有需要的人,大牛请绕道~ HTML…
最简单的HTMML5下拉菜单样式表代码分享 PetitQ HTML/CSS 2020-9-23 850 0 0 下拉菜单是wordpress程序主题里面最常用的菜单体验方式,但是大多新手的对于菜单的使用和调整方式并不理解,尤其是不懂样式表的同学操作起来很加的困难,所以这里给大家提供了现成的样式表代码样式,可以直接复制过去就可以呈现下拉的形态,…
最简单的HTMML5下拉菜单样式表代码分享 PetitQ HTML/CSS 2020-9-23 850 0 0 下拉菜单是wordpress程序主题里面最常用的菜单体验方式,但是大多新手的对于菜单的使用和调整方式并不理解,尤其是不懂样式表的同学操作起来很加的困难,所以这里给大家提供了现成的样式表代码样式,可以直接复制过去就可以呈现下拉的形态,…