-
jQuery判断鼠标向上滚动并浮动导航
判断鼠标向上滚动,或者向下滚动,可以通过对比用户的上一次滚动的坐标和下一次的坐标,当上一次小于下一次时,即用户在向下滚动,反之,则说明用户在向上滚动。滚动的坐标值可以取窗口的 scrollTop。为啥会有这个需求呢?有没有发现在一国外的一些网站,当你向上滚动时,导航条浮动在顶部位置。用户如果是想看内容就可以直接点击到达,省去很多拖动的时间,当然返回顶部也是比较容易。但有时候返回顶部这个按钮往往被人…- 6
- 0
-
纯CSS3将彩色图片转换成黑白图片
通过使用过滤器我们能够不使用 photoshop 等图像软件或 js、php 等技术就可以进行各种图像处理。 最近到处看到有人在说 CSS3 的 filter 一直没有时间自己去测试这效果。 现在,CSS 过滤器已经被各种现代浏览器广泛支持,我们可以使用一些组合的方法,来制作跨浏览器的图像处理效果, 通过这种方法,即使是在 IE 浏览器中也能够正确的显示我们需要的图像效果。 今天终于抽出时间学习这…- 2
- 0
-
图片垂直水平居中CSS实现方法
在前端开发制作中,图片垂直居中对齐是很常见的,有些是固定高度,有些没有固定高度,分享几种使用 CSS 实现图片垂直&&水平居中的方法,有些可能并不能兼容所有浏览器,大家可以自行选择: 方法一: html { width:100%; height:100%; background:url(logo.png) center center no-repeat; } 方法二: img { …- 3
- 0
-
CSS实现隐藏滚动条并可以滚动内容
当我们的内容超出了我们的 div,往往会出现滚动条,影响美观,尤其是当我们在做一些导航菜单的时候,滚动条一出现就破坏了 UI 效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。 我们经常在前端开发中遇到这种情况,最容易想到的是加一个 iscroll 插件,但其实现在 CSS 也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。 方法一: 计算滚动条宽…- 7
- 0
-
font-face 字体文件跨域解决办法字体跨域
开发网站的时候经常会调用不同域名下的字体文件(同源策略禁止读取位于 ttf 文件),但是出现无限的情况,提示如下:已拦截跨源请求: 同源策略禁止读取位于 https://www.weimahe.com/fonts/fontawesome-webfont.woff?v=4.7.0 的远程资源。(原因:CORS 头缺少 ‘Access-Control-Allow-Origin’) 已拦截跨源请求:同源…- 7
- 0
-
竖向长方形图片横向排列并取图片中间不挤压变形的CSS方法
先看下这个图片:一个竖向的长方形图片,需求就是:通过 CSS 的方法使展示的时候竖向图片要实现横向正方形排列而且图片不能变形。一般排列后效果为: 完全变形了,那么进行代码样式优化后的效果为(取图片中间): HTML 部分: <li> <a href="1.jpg" title="测试" alt="测试"><d…- 4
- 0
-
DIV不确定高度内部元素水平垂直居中的方法归纳
总结当前知道的对 div 嵌套标签水平垂直居中方法,如果还有新的方法,请不吝赐教哦。好,下面开始列举代码咯。首先给需要实现水平垂直居中的两个 div 设置统一的样式: .styl { width: 100%; height: 300px; background: #ccc; margin: 30px auto; position: relative; border: 1px solid #000;…- 9
- 0
-
CSS修复图片指定尺寸缩小后模糊不清的问题
最近在开发插件的过程中,需要设定支付宝当面付二维码的图片尺寸大小的问题。起初很简单地直接在 <img> 标签中设定 height 和 width 属性,但是很快发现,大小是改变了,但图片质量下滑很严重。这就比较奇怪了,因为指定的图片尺寸,比实际图片的尺寸要小,也就是所是缩小展示,按我日常摄影的直觉,缩小后的图片不应该更锐利清晰才对么。 CSS 属性 image-rendering 用于…- 5
- 0
-
CSS控制文本两端对齐对最后一行无效解决方法
做前端的朋友对 text-align 这个属性肯定是在熟悉不过了,经常用 left、right、center 来控制行内元素相对父元素左、右、居中对齐排版,justtify 来实现文本的两端对齐,让一段多行文本看起来更方便阅读,排版更好看。 两端对齐相对于左对齐,视觉上显得整齐有序。但 justify 对最后一行无效,通常这样的排版对整段文字是极好的,我们并不希望当最后一行只有两个字时也两端对齐,…- 6
- 0
-
CSS样式表属性最佳书写顺序是怎样的?
好久没有更文了,博客都要荒废了,惭愧一下下,刚好这段时间稍微整理了一下之前写的样式表,就来说下 CSS 样式表中各个属性的书写顺序是怎样的。 像很多初学者一样,飞鸟刚开始写样式表也是很佛系的,想到什么就在样式里写什么,毫无规律。其实这样不仅不利于查看维护,更重要的是混乱的 CSS 属性书写顺序会对网页的加载渲染造成影响,拖慢页面加载速度。也就是说,一个规范的 CSS 属性书写属性也是网页优化的组成…- 12
- 0
-
DIV标签里面IMG图片下方留有空白怎么办
我们很多个人博客网站都会广告位投放一些图片广告,在网页设计中,图片是不可缺少的素材,但是在 div 标签里面放入 img 图片的话,有时候会在图片的下方出现一行空间的区域 如果单纯的图片不醒目或是图片所在的位置不重要的话,我们可以不去理会。 但是做为一个完美型的页且不太会前端的我来说,出现这个问题是忍无可忍的。 由于广告位平时背景色是白色,所以从未关注过图片广告下方有空白。 刚才试着改变广告位背景…- 11
- 0
-
利用:hover伪类实现鼠标指向区块滑出小提示效果
本文利用 css 中:hover 伪类实现将鼠标指向某区块时,区块内部滑出小提示效果,应用场景如广告上招商功能,一起来看一下。之前在某个平台发现了一个很有趣的效果,广告上有一个小按钮,当鼠标指向广告的时候,小按钮处侧滑出一个文本提示“也想在这里显示?联系我们吧”这种类似于“百度联盟图加 wap”版的效果瞬间让我觉得体验很棒,还能够起到“招商”的效果。当时准备拔下来,却发现人家启用了防扒代码功能,一…- 10
- 0
-
给菜单中UL下的某一个或某几个LI添加自定义类
我们有时候在定制 WORDPRESS 主题的时候,由于菜单样式的要求我们需要给我们的 WordPress 获取到的菜单中的 UL 下的某一个或某几个 LI 添加自定义的类,比如我给客户设置制作的这个主题中,因为 LOGO 在菜单中间显示,所以我需要第四个菜单和第五个菜单的右边和左边流出一定的距离来显示 LOGO,那么这个时候如果我能给第思个菜单和第五个菜单的 LI 分别添加一个自定义类,那么我就可…- 4
- 0
-
通过CSS代码自定义站点滚动条样式
平时我们看多了浏览器默认的滚动条也会腻的,所以偶尔改变一下滚动条的样式及颜色也是一种不错的选择。下面跟大家简单介绍一下如何通过 CSS 代码来自定义自己站点上的滚动条样式。此方法使用 CSS 来设置滚动条的样式,这比使用 jQuery 更快。但是,它仅适用于使用 Google Chrome,Safari,Opera 等 WebKit 渲染引擎的桌面浏览器。它对桌面计算机上的移动浏览器或 Firef…- 5
- 0
-
移动端自适应样式@media的使用方法
通用手机端样式: @media all and (orientation : portrait) { /*竖屏*/ } @media all and (orientation : landscape) { /*横屏*/ } 指定手机端高度样式: @media screen and (max-width: 750px) @media screen and (min-width: 720px) and…- 5
- 0
-
jQuery 实现点击选中改变当前样式
在做网站时,有些栏目元素有选择性,当我们点击某个栏目时,它会显示出不同于其它的样式,而没有被点击的,就恢复正常样式。效果如下图: 怎么在自己做网站时,实现这样的点击后改变当前样式的效果呢?这就需要使用 JQUERY 代码了。以下是 JQUERY 实现点击选中改变当前样式代码。 <script> $("#meau_nav>div").click(function…- 4
- 0
-
轻松解决 li 标签上边缘间隙问题
今天在调整网站评论模块样式的时候,发现 <li> 标签中上边缘有一个小小的间隙,虽然影响不大,但是对于一个有着深度强迫症的伪程序员,当然是要解决它。具体问题如下: 原因好像是插入的 <input> 标签的影响,解决方式也很简单,直接设置 CSS 为 float: left; 即可。- 3
- 0
-
几行代码搞定CSS项目名称两端对齐
最近这两天因为疫情的原因闲下来了,无聊又调整了调整自己的主题,在调整过程中因为有些项目需要两端对齐,所以便有了这篇文章,说到两端对齐,大家并不陌生,在 word、powerpoint、outlook 等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐、居中对齐、右对齐的方式来对齐页面的文本或模块。响应式网页设计出现以来,更多是使用百分比布自适应布局,特别是在…- 5
- 0
-
Audio 标签播放音频怎样隐藏下载按钮?禁止另存为?
有时候我们喜欢分享一些音频音乐,大部分应该会用插件来实现,调用网易或者 QQ 音乐。但是毕竟不是每首歌都能在某一平台找到,或者音质不理想,所以往往使用 audio 标签也就能满足了。但是 audio 标签的前台显示会有一个下载按键或者能右键另存为,这个就很不讨喜,如何隐藏呢?正常情况下,我们使用 audio 标签分享音频,前台显示会出现如下效果,会有一个下载的按钮,这个完全没有必要,还有不好的影响…- 11
- 0
-
CSS文字超出部分隐藏并显示省略号
网站前端开发中 web 网页中文字超出了需要隐藏,并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,实现这个效果有两种解决方法,大致如下: 一是用程序开截取字符长度,这个其实也是可以的,但是并不利于 SEO 优化,因为搜索引擎得到的也只是截取的长度 第二种是用 css 样式来做,这种只会隐藏超出部分,实际上隐藏的文字还是在 html 代码中只是没有被显示出来,这样搜索引擎也能够准确读…- 3
- 0
-
CSS3渐变色的实现方法讲解
在进行网页编程的时候有很多时候都会用到渐变色,但是 CSS2 处理渐变色比较困难,CSS3 就比较方便了,所以今天余斗就教大家用 CSS3 实现渐变色功能。 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起…- 12
- 0
-
JS实现点击弹出层再点击任意位置隐藏弹出层
我们经常使用到弹出层。对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度。我们在使用的时候需要注意几个弹出层的注意点: 弹出层的界面需要统一,不一致的弹出层并不能增加美感,相反还会显得页面布局更加杂乱无章; 弹出层的设计一定要好看,按钮要符合项目的主色调; 弹出层的宽度固定屏幕占比,设置 max-width,高度根据内容自适应; 点击其他区域能隐藏弹出层。 今天,主要说说点击其他区域隐藏…- 13
- 0
-
前端开发 CSS 常见布局方式学习及总结
对于很多前端开发人员来说,CSS 布局应该是日常工作中碰到最多的东西之一,但是让我迷惑的是有很多文章 关于布局名词都没有听说过,工作中也很少用。一个好的布局不仅可以减少代码的书写量,而且有助于我们理解页面结构,更好地实现多种页面效果。学习一段时间了,但对于 CSS 布局方法的掌握一直比较混乱,而一般情况下我们对页面布局最常用到的当属 float、display、position 这三个属性了,我们…- 5
- 0
-
实现滚动时动态缩小导航栏jQuery效果
我们先先看一下下面的效果,用 QQ 截的图,效果很不清楚,但是能说明问题。怎么实现这样的效果呢?用得比较多的算是 jQuery 的 waypoints 插件了,其实不用 jQuery 插件,很简单的一段 jQuery 代码就可以实现这样的效果,不过要结合 CSS3 过渡,IE9 以下的浏览器效果可能就差一点了。 实现以上效果的关键代码如下。首先,用 jQuery 判断网页滚动,网页滚动的高度大于 …- 3
- 0
幸运之星正在降临...
点击领取今天的签到奖励!
恭喜!您今天获得了{{mission.data.mission.credit}}积分
我的优惠劵
-
¥优惠劵使用时效:无法使用使用时效:
之前
使用时效:永久有效优惠劵ID:×
没有优惠劵可用!