jQuery滚动事件$(window).scroll()实现导航栏高度变化 PetitQ HTML/CSS, JQuery/PHP 2023-3-31 245 0 0 有些网站的导航菜单的高度随着网页下拉变化,并且将网页恢复到顶部时,高度又恢复。效果如下图: 怎么实现这样的导航栏高度随着网页拖动变化呢?这就需要使用到jQuery滚动事件$(window).scroll()。下面介绍一下实现方法。 …
jQuery滚动事件$(window).scroll()实现导航栏高度变化 PetitQ HTML/CSS, JQuery/PHP 2023-3-31 245 0 0 有些网站的导航菜单的高度随着网页下拉变化,并且将网页恢复到顶部时,高度又恢复。效果如下图: 怎么实现这样的导航栏高度随着网页拖动变化呢?这就需要使用到jQuery滚动事件$(window).scroll()。下面介绍一下实现方法。 …
如何给网页表单添加滑动验证 PetitQ HTML/CSS 2023-3-31 268 0 0 为了防止网站上的表单被恶意的提交垃圾信息,我们会给网页表单添加验证功能。常见的验证就是验证码验证,之外还有滑动验证。通过滑块的滑动来进行表单验证。 如何给网页表单添加这种滑动验证功能呢?下面介绍一下方法。 第一步:制作表单框,使用以…
如何给网页表单添加滑动验证 PetitQ HTML/CSS 2023-3-31 268 0 0 为了防止网站上的表单被恶意的提交垃圾信息,我们会给网页表单添加验证功能。常见的验证就是验证码验证,之外还有滑动验证。通过滑块的滑动来进行表单验证。 如何给网页表单添加这种滑动验证功能呢?下面介绍一下方法。 第一步:制作表单框,使用以…
网站实现a标签直接下载pdf文件不在浏览器打开 PetitQ HTML/CSS 2023-3-03 104 0 0 默认情况下pdf文件使用超链接打开时,会在浏览器里直接打开预览,而不能直接下载。怎么让pdf文件点击后,自动下载而不是打开呢?其实让网站点击a标签直接下载pdf而不是在浏览器打开浏览方法很简单,只需要在a标签添加download属性…
网站实现a标签直接下载pdf文件不在浏览器打开 PetitQ HTML/CSS 2023-3-03 104 0 0 默认情况下pdf文件使用超链接打开时,会在浏览器里直接打开预览,而不能直接下载。怎么让pdf文件点击后,自动下载而不是打开呢?其实让网站点击a标签直接下载pdf而不是在浏览器打开浏览方法很简单,只需要在a标签添加download属性…
除了最后一个元素之外其他元素之间添加分隔符 PetitQ HTML/CSS 2022-11-05 277 0 0 除了最后一个元素之外其他元素之间添加分隔符,您可以使用标准的CSS来做到这一点: li:after { content: ','; } li:last-of-type:after { content: ''; } 我更喜欢单独的规则…
除了最后一个元素之外其他元素之间添加分隔符 PetitQ HTML/CSS 2022-11-05 277 0 0 除了最后一个元素之外其他元素之间添加分隔符,您可以使用标准的CSS来做到这一点: li:after { content: ','; } li:last-of-type:after { content: ''; } 我更喜欢单独的规则…
Font Awesome 网站字体图标不显示的解决方法 PetitQ HTML/CSS 2022-9-27 1.08K 0 0 在做网站过程中,经常会遇到一些奇怪的问题。例如一个网站中有的网页的字体图标正常显示,但有的字体图标却显示为空白。如下图: 正常情况下: 字体图标不显示: 通过浏览器的检查功能,可以查到造成字体图标不显示的原因,是由于字体图标的样式在…
Font Awesome 网站字体图标不显示的解决方法 PetitQ HTML/CSS 2022-9-27 1.08K 0 0 在做网站过程中,经常会遇到一些奇怪的问题。例如一个网站中有的网页的字体图标正常显示,但有的字体图标却显示为空白。如下图: 正常情况下: 字体图标不显示: 通过浏览器的检查功能,可以查到造成字体图标不显示的原因,是由于字体图标的样式在…
通过css在网页中实现容器内元素横向滚动 PetitQ HTML/CSS 2022-9-26 311 0 0 网页中元素默认是纵向排列的,我们可以通过css属性将容器内子元素实现横向排列,超出隐藏,并可以横向滚动。 基础结构如下: 1 2 3 4 5 . . . item可以根据实际需要增加更多 横向浮动,隐藏,滑动相关css如下: .it…
通过css在网页中实现容器内元素横向滚动 PetitQ HTML/CSS 2022-9-26 311 0 0 网页中元素默认是纵向排列的,我们可以通过css属性将容器内子元素实现横向排列,超出隐藏,并可以横向滚动。 基础结构如下: 1 2 3 4 5 . . . item可以根据实际需要增加更多 横向浮动,隐藏,滑动相关css如下: .it…
自适应网页怎么做?自适应网页制作方法 PetitQ HTML/CSS 2022-9-26 735 0 0 自适应网页是指网页根据用户浏览设备的头信息,自动变换网页的CSS参数,达到网不同浏览设置显示不同的网页版面的效果。自适应网页的原因就是使用CSS3中的@media属性来判断变换的。在实际网页制作过程中,我们怎么制作自适应网页呢?下面…
自适应网页怎么做?自适应网页制作方法 PetitQ HTML/CSS 2022-9-26 735 0 0 自适应网页是指网页根据用户浏览设备的头信息,自动变换网页的CSS参数,达到网不同浏览设置显示不同的网页版面的效果。自适应网页的原因就是使用CSS3中的@media属性来判断变换的。在实际网页制作过程中,我们怎么制作自适应网页呢?下面…
如何让网页文字像古文一样从右到左排列 PetitQ HTML/CSS 2022-9-12 339 0 0 以前古文书籍的文字排序是从右到左,向上到下的排列。那么我们自己的网页上的文字也想像古文书籍那样排列,怎么实现呢?对于CSS3中已经有这样的属性来控制这个的效果了。 要实现这种网页文字像古文一样从右到左排列,可以使用CSS3中的wri…
如何让网页文字像古文一样从右到左排列 PetitQ HTML/CSS 2022-9-12 339 0 0 以前古文书籍的文字排序是从右到左,向上到下的排列。那么我们自己的网页上的文字也想像古文书籍那样排列,怎么实现呢?对于CSS3中已经有这样的属性来控制这个的效果了。 要实现这种网页文字像古文一样从右到左排列,可以使用CSS3中的wri…
网站Video标签播放大视频卡顿解决方法(m3u8流媒体) PetitQ HTML/CSS 2022-8-27 683 0 0 自从HTML5推出之后,网站上的视频可以像图片一样使用video标签直接播放了。但使用video播放视频有一个缺点就是只能播放小视频,如果视频比较大就会出现卡顿的问题。因为它需要先把视频加载完才会播放。 下面就介绍一下网站Video…
网站Video标签播放大视频卡顿解决方法(m3u8流媒体) PetitQ HTML/CSS 2022-8-27 683 0 0 自从HTML5推出之后,网站上的视频可以像图片一样使用video标签直接播放了。但使用video播放视频有一个缺点就是只能播放小视频,如果视频比较大就会出现卡顿的问题。因为它需要先把视频加载完才会播放。 下面就介绍一下网站Video…
浅谈 CSS3 盒布局与弹性盒布局 PetitQ HTML/CSS 2022-6-11 483 0 0 在网页布局中,如果让让几个块状区域横向排列,常用的方法就是使用float:left。但使用float属性时,会出现一些问题,例如浮动,并且如果不同版块的内容数量不一样就会造成各个版块的高度不一样。 section 什么是CSS3 盒…
浅谈 CSS3 盒布局与弹性盒布局 PetitQ HTML/CSS 2022-6-11 483 0 0 在网页布局中,如果让让几个块状区域横向排列,常用的方法就是使用float:left。但使用float属性时,会出现一些问题,例如浮动,并且如果不同版块的内容数量不一样就会造成各个版块的高度不一样。 section 什么是CSS3 盒…
CSS 文字加粗不影响整体宽度 PetitQ HTML/CSS 2022-6-05 487 0 0 在写Tab组件时(每一项的数据都从后台获取,width宽度不定,使用padding隔开),下划线时通过计算每一项的宽度实现滑动效果,字体加粗标记当前项,且当鼠标hover时,对应项的字体也加粗,此时由于字体加导致粗宽度变化了,所以滑…
CSS 文字加粗不影响整体宽度 PetitQ HTML/CSS 2022-6-05 487 0 0 在写Tab组件时(每一项的数据都从后台获取,width宽度不定,使用padding隔开),下划线时通过计算每一项的宽度实现滑动效果,字体加粗标记当前项,且当鼠标hover时,对应项的字体也加粗,此时由于字体加导致粗宽度变化了,所以滑…
如何给自己的网站添加WEB社交分享按钮 PetitQ HTML/CSS 2022-5-02 514 0 0 我们注意到,很多的网站都有WEB分享按钮,可以一键分享到很多的网站平台,如:分享到微博、微信、人人网等等。 以前我们做这种WEB分享按钮使用的是百度分享,但现在百度分享已经停用了。下面介绍另一种自己做网站时添加WEB分享按钮的方法。…
如何给自己的网站添加WEB社交分享按钮 PetitQ HTML/CSS 2022-5-02 514 0 0 我们注意到,很多的网站都有WEB分享按钮,可以一键分享到很多的网站平台,如:分享到微博、微信、人人网等等。 以前我们做这种WEB分享按钮使用的是百度分享,但现在百度分享已经停用了。下面介绍另一种自己做网站时添加WEB分享按钮的方法。…