-
CSS 文字加粗不影响整体宽度
在写 Tab 组件时（每一项的数据都从后台获取，width 宽度不定，使用 padding 隔开），下划线时通过计算每一项的宽度实现滑动效果，字体加粗标记当前项，且当鼠标 hover 时，对应项的字体也加粗，此时由于字体加导致粗宽度变化了，所以滑块位置也偏移了，想到用鼠标的 mouseenter 和 mouseleave 重新计算宽度，但是比较麻烦，有没有好的方法处理，使字体加粗不影响宽度的改变？…...- 0
- 0
- 86
-
文章标题链接平滑右移效果代码
在很多的博客上看到了，鼠标过去，文章列表标题抖动右移的效果。感觉挺炫的。我试了一下。在我的博客主题上感觉不太适合，所以没有继续用。不过先收着吧，以后需要的时候也可以继续用。大家可以试试！ 方法一： 优点：兼容所有浏览器，包括 IE 什么的。 缺点：代码也很短，没什么缺点。 jQuery(document).ready(function($){ $('.entry-title a'…...- 0
- 0
- 38
-
JS实现点击弹出层再点击任意位置隐藏弹出层
我们经常使用到弹出层。对于弹出层，原本的意义就是增加与用户的交互，提升用户的好感度。我们在使用的时候需要注意几个弹出层的注意点： 弹出层的界面需要统一，不一致的弹出层并不能增加美感，相反还会显得页面布局更加杂乱无章； 弹出层的设计一定要好看，按钮要符合项目的主色调； 弹出层的宽度固定屏幕占比，设置 max-width，高度根据内容自适应； 点击其他区域能隐藏弹出层。 今天，主要说说点击其他区域隐藏…...- 0
- 0
- 21
-
CSS3 文字边框 -webkit-text-stroke 镂空的字体
其实一直没用过这个属性，发现还可以有很不错的效果，就二行代码就搞掂，分享下 CSS 边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke 可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用 color: transparent 属性，还可以创建镂空的字体！ 代码如下： h3 { color: transparent; -webkit-tex…...- 0
- 0
- 26
-
[前端学习]CSS 设置文字只显示一行，多余显示省略号
一般在我们写网站前端时，文章标题和文章描述为了好看和排列整齐经常需要用到这个功能。 显示一行 .text1{ display: inline-block; //设置inline-block属相 white-space: nowrap;//强制不换行 width: 100%; overflow: hidden;//隐藏超出部分 text-overflow:ellipsis;//显示“&h…...- 0
- 0
- 578
-
常见CSS五种隐藏元素方式
今天微码盒分析下 CSS 隐藏元素，通常小伙伴们都会想到的一种方法就是设置 display:none，这是也是最为人所熟知并且是最常用的方法。 当然我也相信还有不少人想到使用设置 visibility:hidden 来隐藏元素，这种方式也是常用的方法，而且也有很多人知道两者的不同。 除了这两种方法，本文总结了四种 css 隐藏元素方式，具有一定的参考价值，比较了这几种“隐藏”元素方法的区别和优缺点…...- 0
- 0
- 22
-
HTML5 网页上下翻页时钟效果代码
因为博客首页有个 Flash 的时钟，对于大多数浏览器 Flash 是没有问题的，而 Firefox 等就稍微有些麻烦了，而且 IOS 系统是 Flash 的死对头。很早之前就想着上个 HTML5 的时钟来替代这个 Flash，今天从一个网站弄了点源码，修改了下，总算完工了。 PS：185 行的 urlSize 为显示的宽度，高度自动适应。 <html> <head><…...- 0
- 0
- 19
-
给菜单中UL下的某一个或某几个LI添加自定义类
我们有时候在定制 WORDPRESS 主题的时候，由于菜单样式的要求我们需要给我们的 WordPress 获取到的菜单中的 UL 下的某一个或某几个 LI 添加自定义的类，比如我给客户设置制作的这个主题中，因为 LOGO 在菜单中间显示，所以我需要第四个菜单和第五个菜单的右边和左边流出一定的距离来显示 LOGO，那么这个时候如果我能给第思个菜单和第五个菜单的 LI 分别添加一个自定义类，那么我就可…...- 0
- 0
- 6
-
JavaScript中escape()、encodeURI()、encodeURIComponent()的区别
JavaScript 中有三个可以对字符串编码的函数，分别是： escape,encodeURI,encodeURIComponent，相应 3 个解码函数：unescape,decodeURI,decodeURIComponent 。 下面简单介绍一下它们的区别 1 escape()函数 定义和用法 escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。 语法 esc…...- 0
- 0
- 20
-
除了最后一个元素之外其他元素之间添加分隔符
除了最后一个元素之外其他元素之间添加分隔符，您可以使用标准的 CSS 来做到这一点： li:after { content: ','; } li:last-of-type:after { content: ''; } 我更喜欢单独的规则，但如果稍微少一个更简洁： li:not(:last-of-type�…...- 0
- 0
- 26
-
纯CSS制作中英文双语导航菜单
网站模板开发过程中，时常有客户需要把菜单做成中英文效果，当鼠标悬浮时切换语言，今天创客云分享一款你一定喜欢的 CSS 中英文双语菜单教程，此教程支持鼠标悬浮特效，您可以先运行一下看效果，绝对会另你满意。用到了一个背景图片，请自行下载。 代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "…...- 0
- 0
- 20
-
两行CSS代码实现最简单瀑布流实现方式
昨天无聊写了个随机一套图的小程序接口，在写 HTML 的时候遇到了让人难受的 css，百度后找到一位大神提供的办法，以后图片瀑布流都是垃圾，两行代码就够了！感觉自己膨胀了哈，下面一起来看看效果。 代码很简单，只需要给包裹所有图片的元素设置一个 CSS 样式，然后给包裹一张图片的元素设置一个样式即可。比如 <ul> <li><a href="xxxx"…...- 0
- 0
- 12
-
WordPress 为媒体添加自定义字段
WordPress 中，我们可以很轻松的使用插件或者写代码为文章或页面添加自定义字段。可能是因为使用的场景不多，支持为媒体添加自定义字段的插件和教程确很少。 在这篇文章中，我们一起来看一下怎么为 WordPress 媒体添加自定义字段。实现代码其实很简单，也完全没必要用插件来实现。最终实现的效果如下图所见。 首先，为媒体添加自定义字段表单 在下面的代码中，我们使用 attachment_field…...- 0
- 0
- 35
-
CSS3判断横屏竖屏方式（三种）
很多时候，为了让手机版横竖屏时有一个理想的效果，我们都需要通过判断区间来设定相应的 css 样式，现在的 CSS3 推出了一个可以判断手机横竖屏的媒体查询。在做移动端页面的时候经常会遇到需要判断横屏还是竖屏，下面将目前已知的通过 HTML，CSS，JS 三种判断方法记录下来，方便以后翻阅。 1、通过在 html 中分别引用横屏和竖屏的样式： <link rel="styleshee…...- 0
- 0
- 21
-
HTML+CSS+JS实现今天的日期和今天剩余的时间
使用 html+css+js 实现日历与定时器，看看今天的日期和今天剩余的时间。 哎，今天就又这么过去了，过的可真快。代码如下，复制即可使用： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<…...- 0
- 0
- 28
-
CSS完美实现iframe高度自适应（支持跨域）
Iframe 的强大功能偶就不多说了，它不但被开发人员经常运用，而且黑客们也常常使用它，总之用过的人知道它的强大之处，但是 Iframe 有个致命的“BUG”就是 iframe 的高度无法自动适应，这一点让很多人都头疼万分。百度或是谷歌一下，确实很多解决方法，但尝试一下，会发现问题很多：浏览器兼容性差，不能自适应，仅支持同域 Iframe 等诸多问题，尤其是跨域 Iframe 高度自适应问题。网上…...- 0
- 0
- 54
-
前端开发 CSS 常见布局方式学习及总结
对于很多前端开发人员来说，CSS 布局应该是日常工作中碰到最多的东西之一，但是让我迷惑的是有很多文章 关于布局名词都没有听说过，工作中也很少用。一个好的布局不仅可以减少代码的书写量，而且有助于我们理解页面结构，更好地实现多种页面效果。学习一段时间了，但对于 CSS 布局方法的掌握一直比较混乱，而一般情况下我们对页面布局最常用到的当属 float、display、position 这三个属性了，我们…...- 0
- 0
- 8
-
HTML5中Canvas绘图各种基本图形的方法
canvas 是 html5 的一部分，当然他们说的 H5 也并不是 html5 的意思，只是表示在手机浏览器中，更侠义的是在微信浏览器中打开的酷炫的网页。曾几何时，我也觉得 canvas 真的酷爆了，各种什么烟花、酷炫的动画效果、canvas 游戏等，都燃烧着我学习的热情。后来通过学习，多看书，其实 canvas 并不复杂，要用到的东西也不多，大概整理一下： 1、绘制直线： 4 这…...- 0
- 0
- 16
-
解决absolute绝对定位高度塌陷无法撑开父元素
网站上某个元素设置了 absolute 绝对定位后，它的高度是不会影响父元素的高度的。这在某些情况下会影响布局。怎么解决这种 absolute 绝对定位高度问题呢？让 absolute 绝对定位的高度自动添加到父元素上。 解决 absolute 绝对定位高度问题，一般有二种方法。 第一种就是给父元素添加一个固定的高度值，这样就不会有父元素高度为 0 的情况了。 第二种是使用 JQUERY 来获取 …...- 0
- 0
- 76
-
详解使用『rem』实现自适应响应式布局
rem 是相对于根元素，这样就意味着，我们只需要在根元素确定一个 px 字号，则可以来算出元素的宽高。本文讲的是如何使用 rem 实现自适应。rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到 rem 大家一定会想起 em 单位，em（font size of the element）是指相对于父元素的字体大小的单…...- 0
- 0
- 8
-
JS实现静态页面搜索并高亮显示的方法
本文实例讲述了 JS 实现静态页面搜索并高亮显示功能。分享给大家供大家参考，具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS搜索</title> </head> <…...- 0
- 0
- 26
-
纯CSS3实现手风琴风格菜单具体步骤
有朋友问我，我的 demo 里面的手风琴效果怎么做出来，看起来很漂亮，其实这个手风琴效果没用一点 js，全部用 css3 来实现的，菜单主要通过使用:target 伪类来实现，教程中我们主要通过使用伪类:before 和:target 来定义样式，使用:target 来实现菜单点击展开子菜单事件，希望你能够喜欢这个教程： 如何使用纯 CSS3 创建手风琴风格菜单呢，菜单主要通过使用:target …...- 0
- 0
- 20
-
Darkmode – 网站支持炫酷暗黑模式/夜间模式
Darkmode.js 这个东西还是挺好玩的，非常易于使用，只需一段代码就可以让你的网站支持暗黑模式，安装好之后，在网页的右下角有一个圆形按钮，点击即可切换白天/夜晚模式。Darkmode.js 是开源的项目，所以可以免费玩耍 ，不过如果想玩的好，还是需要点技术的。这篇文章就来看看如何安装这个 Darkmode.js。 官网：https://darkmodejs.learn.uno/ Github…...- 0
- 0
- 26
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×