-
![[前端美化]为B2主题首页增加一个公众号与网站统计区块！](https://www.weimahe.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg)
[前端美化]为B2主题首页增加一个公众号与网站统计区块！
小编今天无聊逛了逛B2主题的售后群，发现一枚大佬，这位大佬专门分享各种Wordpress主题以及好看的前端样式。 今天这篇文章就是基于这位大佬创作的，微码盒小编只是在原基础上稍微改动了一些。 预览 下面小编将这个代码展示出来，对于B2主题用户来说，使用非常简单。 只需要在主题设置-首页模块-新增一个HTML模板，位置可以自由选择。 HTML代码 <div class="join-u…...- 0
- 0
- 738
-
[前端学习]CSS 设置文字只显示一行，多余显示省略号
一般在我们写网站前端时，文章标题和文章描述为了好看和排列整齐经常需要用到这个功能。 显示一行 .text1{ display: inline-block; //设置inline-block属相 white-space: nowrap;//强制不换行 width: 100%; overflow: hidden;//隐藏超出部分 text-overflow:ellipsis;//显示“&h…...- 0
- 0
- 564
-
网站Video标签播放大视频卡顿解决方法（m3u8流媒体）
自从 HTML5 推出之后，网站上的视频可以像图片一样使用 video 标签直接播放了。但使用 video 播放视频有一个缺点就是只能播放小视频，如果视频比较大就会出现卡顿的问题。因为它需要先把视频加载完才会播放。 下面就介绍一下网站 Video 标签播放大视频卡顿解决方法，就是将普通的 MP4 视频转成 m3u8 流媒体，然后再使用 video 标签进行播放。可以彻底解决 Video 标签播放大…...- 0
- 0
- 142
-
CSS 文字加粗不影响整体宽度
在写 Tab 组件时（每一项的数据都从后台获取，width 宽度不定，使用 padding 隔开），下划线时通过计算每一项的宽度实现滑动效果，字体加粗标记当前项，且当鼠标 hover 时，对应项的字体也加粗，此时由于字体加导致粗宽度变化了，所以滑块位置也偏移了，想到用鼠标的 mouseenter 和 mouseleave 重新计算宽度，但是比较麻烦，有没有好的方法处理，使字体加粗不影响宽度的改变？…...- 0
- 0
- 47
-
网站实现a标签直接下载pdf文件不在浏览器打开
默认情况下 pdf 文件使用超链接打开时，会在浏览器里直接打开预览，而不能直接下载。怎么让 pdf 文件点击后，自动下载而不是打开呢？其实让网站点击 a 标签直接下载 pdf 而不是在浏览器打开浏览方法很简单，只需要在 a 标签添加 download 属性即可，代码如下： <a href="wendang.pdf" download="文档.pdf"&…...- 0
- 0
- 43
-
手机网站实现左边弹出导航菜单点击一级分类展开二级分类
手机网站实现左边弹出导航菜单点击一级分类展开二级分类，下面介绍一下手机网站常见的左边弹出导航菜单，并且点击一级分类展开二级分类的功能实现方法。 HTML 代码： <ul id="topmeau" class="wap_menu hidden-md hidden-lg"><li class="current-menu-item me…...- 0
- 0
- 41
-
CSS控制图片水平居中与垂直居中
一个网站上会有很多图片，在网站排版过程中，需要设置图片居中显示。通过 CSS 控制图片居中显示，包括水平居中与垂直居中。图片的水平居中比较简单，也比较常见。就是使用外边距 margin:0 auto 来控制水平居中: .cont img{display:block;margin:0 auto;} 要实现图片在一个区域垂直居中，需要设置图片所在区域的 DISPLAY 属性，把这个区域名转化成单元格，…...- 0
- 0
- 31
-
JS判断浏览器环境（pc端，移动端，还是微信浏览器）
今天突然看到一段很好的代码，分享给大家，顺便也给自己留个笔记。我们部署在 Web 服务器上的前端应用，既可以用 PC 浏览器访问，也可以用手机浏览器访问，再加上现在智能设备的推广，我们甚至能在车载系统、穿戴设备和电视平台上访问。设备的多样化让用户无处不在，有时候我们需要根据不同的浏览器运行环境做出对应的处理。浏览器是 JavaScript 的承载体，我们可以从浏览器上获取相关的信息，来进一步处理我…...- 0
- 0
- 29
-
如何让网页文字像古文一样从右到左排列
以前古文书籍的文字排序是从右到左，向上到下的排列。那么我们自己的网页上的文字也想像古文书籍那样排列，怎么实现呢？对于 CSS3 中已经有这样的属性来控制这个的效果了。 要实现这种网页文字像古文一样从右到左排列，可以使用 CSS3 中的 writing-mode 属性。 writing-mode 属性定义了文本在水平或垂直方向上如何排布。 语法格式如下： writing-mode: horizont…...- 0
- 0
- 25
-
Audio 标签播放音频怎样隐藏下载按钮？禁止另存为？
有时候我们喜欢分享一些音频音乐，大部分应该会用插件来实现，调用网易或者 QQ 音乐。但是毕竟不是每首歌都能在某一平台找到，或者音质不理想，所以往往使用 audio 标签也就能满足了。但是 audio 标签的前台显示会有一个下载按键或者能右键另存为，这个就很不讨喜，如何隐藏呢？正常情况下，我们使用 audio 标签分享音频，前台显示会出现如下效果，会有一个下载的按钮，这个完全没有必要，还有不好的影响…...- 0
- 0
- 25
-
CSS完美实现iframe高度自适应（支持跨域）
Iframe 的强大功能偶就不多说了，它不但被开发人员经常运用，而且黑客们也常常使用它，总之用过的人知道它的强大之处，但是 Iframe 有个致命的“BUG”就是 iframe 的高度无法自动适应，这一点让很多人都头疼万分。百度或是谷歌一下，确实很多解决方法，但尝试一下，会发现问题很多：浏览器兼容性差，不能自适应，仅支持同域 Iframe 等诸多问题，尤其是跨域 Iframe 高度自适应问题。网上…...- 0
- 0
- 22
-
通过JS实现一键复制指定内容教程
经常会见到网站上各种“一键复制”的友好体验按钮，不局限于 code 的复制，这样友好的体验，方便快捷的操作对访客来说百利无一害。在网上搜索了一番关于“JS 实现一键复制”的文章数不胜数啊。用得较多的就是通过 clipboard.min.js 来实现复制，毕竟现在 Flash 在各浏览器中被禁用等等各种不友好。今天分享一个实用的功能，通过点击事件复制一段文本到剪切板，在网上找了一些，整理了一下，方便…...- 0
- 0
- 21
-
利用animation动画实现呼吸灯效果
在阿里云看到其 Banner 上的一个呼吸灯效果，感觉非常具有科技感，看了下源码，原来只是一个 CSS3 效果，利用 animation 来实现的动画效果，一时技痒就写了一个 demo 记录一下。 实现思路 底图是一个暗的灯 jpg，另外一张图则是亮灯的 png 透明图片，利用绝对定位将亮灯图片定位在底图上。然后用 animation 写出动效，也就是呼吸灯的闪动效果。最后亮灯图片样式绑定该动效，…...- 0
- 0
- 21
-
DIV标签里面IMG图片下方留有空白怎么办
我们很多个人博客网站都会广告位投放一些图片广告，在网页设计中，图片是不可缺少的素材，但是在 div 标签里面放入 img 图片的话，有时候会在图片的下方出现一行空间的区域 如果单纯的图片不醒目或是图片所在的位置不重要的话，我们可以不去理会。 但是做为一个完美型的页且不太会前端的我来说，出现这个问题是忍无可忍的。 由于广告位平时背景色是白色，所以从未关注过图片广告下方有空白。 刚才试着改变广告位背景…...- 0
- 0
- 20
-
Font Awesome 网站字体图标不显示的解决方法
在做网站过程中，经常会遇到一些奇怪的问题。例如一个网站中有的网页的字体图标正常显示，但有的字体图标却显示为空白。如下图： 正常情况下： 字体图标不显示： 通过浏览器的检查功能，可以查到造成字体图标不显示的原因，是由于字体图标的样式在这些网页中被修改了。解决方法也很简单，只需要在字体图标不正常的网页上面，加上以下的 CSS 样式代码即可。 <style> .fa { font: norm…...- 0
- 0
- 19
-
Pjax 无刷新加载页面基础示例
今天浏览了一些精美的前端页面，然后看见有些页面运用了pjax，让整个页面加载很快。之前很久就想去看看 Pjax 是怎么实现的了，今天就去了解了一下，然后懂得了他的运行原理。下面就来分享一下。 在两个不同的页面，把内容放在同一个容器当中，然后绑定本页的所有 a 标签，然后替换旧的容器的内容为新的内容。为了方便理解，我绘制了一个草图（画的不好，不喜勿喷）。 第一步 首先在页面引入 Jquery1.7 …...- 0
- 0
- 19
-
PHP 实现图片 Base64 编码与解码
我们在传输和处理图片时，Base64 是一个常用的选择，PHP 中就有函数（base64_encode 和 base64_decode）分别负责图片 Base64 编码和图片 Base64 解码，老王昨天在网上找到 2 段关于图片 Base64 编码和解码的 PHP 代码实现，用起来还不错，这里与大家做个分享。 一、PHP 实现图片 Base64 编码 实现思路主要就是先将图片流读取到 ->…...- 0
- 0
- 18
-
解决absolute绝对定位高度塌陷无法撑开父元素
网站上某个元素设置了 absolute 绝对定位后，它的高度是不会影响父元素的高度的。这在某些情况下会影响布局。怎么解决这种 absolute 绝对定位高度问题呢？让 absolute 绝对定位的高度自动添加到父元素上。 解决 absolute 绝对定位高度问题，一般有二种方法。 第一种就是给父元素添加一个固定的高度值，这样就不会有父元素高度为 0 的情况了。 第二种是使用 JQUERY 来获取 …...- 0
- 0
- 18
-
jQuery 通过class名称验证表单值不为空
我们在使用 CMS 系统开发网站的时候，经常需要验证表单数据为必填项，若用 jQuery 通过 ID 去验证，不仅会影响效率，还会有所遗漏，不易于后期维护。 本章将介绍如何利用 jQuery，通过为表单配置 class 进行统一验证。（ID 一个页面只可以使用一次，class 可以多次引用） 1：为 input 添加 class，名字可以随意设置，但每个 input 需要保持一致，本章案例 cal…...- 0
- 0
- 17
-
CSS控制文本两端对齐对最后一行无效解决方法
做前端的朋友对 text-align 这个属性肯定是在熟悉不过了，经常用 left、right、center 来控制行内元素相对父元素左、右、居中对齐排版，justtify 来实现文本的两端对齐，让一段多行文本看起来更方便阅读，排版更好看。 两端对齐相对于左对齐，视觉上显得整齐有序。但 justify 对最后一行无效，通常这样的排版对整段文字是极好的，我们并不希望当最后一行只有两个字时也两端对齐，…...- 0
- 0
- 17
-
微信打开网址添加提示浏览器中打开遮罩
由于微信的限制，应用文件在内置浏览器中下载全部被屏蔽掉，造成很多人用微信扫描二维码下载时点击下载按钮没反应，我想到的是做一个提示用户在浏览器中打开下载。网上流传的各种微信打开下载链接，微信已更新基本失效。今天要加的是一个终极解决方法：弹出一个遮罩提示用户在新的浏览器窗口打开。再也不用管微信如何的更新，直接判断微信的 ua，然后弹出一个遮罩提示用户在浏览器中打开下载。并且不加关闭的按钮。类似于下面这…...- 0
- 0
- 17
-
响应式网页中如何插入响应式图片
现下流行的网页基本都是基于响应式布局设计（responsive web design）的，本文讲解在响应式布局的网页中如何正确的插入图片使其能自适应屏幕大小，同时还能获得最佳的加载性能与显示效果，这种方式叫做”响应式图片”（responsive image）。 响应式图片的解决方案有很多，HTML、JavaScript 和 CSS 都可以实现，本文介绍 HTML 与 CSS 两种方式，因为实现最简…...- 0
- 0
- 17
-
DIV不确定高度内部元素水平垂直居中的方法归纳
总结当前知道的对 div 嵌套标签水平垂直居中方法，如果还有新的方法，请不吝赐教哦。好，下面开始列举代码咯。首先给需要实现水平垂直居中的两个 div 设置统一的样式： .styl { width: 100%; height: 300px; background: #ccc; margin: 30px auto; position: relative; border: 1px solid #000;…...- 0
- 0
- 16
-
Darkmode – 网站支持炫酷暗黑模式/夜间模式
Darkmode.js 这个东西还是挺好玩的，非常易于使用，只需一段代码就可以让你的网站支持暗黑模式，安装好之后，在网页的右下角有一个圆形按钮，点击即可切换白天/夜晚模式。Darkmode.js 是开源的项目，所以可以免费玩耍 ，不过如果想玩的好，还是需要点技术的。这篇文章就来看看如何安装这个 Darkmode.js。 官网：https://darkmodejs.learn.uno/ Github…...- 0
- 0
- 16
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×