-
除了最后一个元素之外其他元素之间添加分隔符
除了最后一个元素之外其他元素之间添加分隔符，您可以使用标准的 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
- 23
-
两行CSS代码实现最简单瀑布流实现方式
昨天无聊写了个随机一套图的小程序接口，在写 HTML 的时候遇到了让人难受的 css，百度后找到一位大神提供的办法，以后图片瀑布流都是垃圾，两行代码就够了！感觉自己膨胀了哈，下面一起来看看效果。 代码很简单，只需要给包裹所有图片的元素设置一个 CSS 样式，然后给包裹一张图片的元素设置一个样式即可。比如 <ul> <li><a href="xxxx"…...- 0
- 0
- 12
-
WordPress 为媒体添加自定义字段
WordPress 中，我们可以很轻松的使用插件或者写代码为文章或页面添加自定义字段。可能是因为使用的场景不多，支持为媒体添加自定义字段的插件和教程确很少。 在这篇文章中，我们一起来看一下怎么为 WordPress 媒体添加自定义字段。实现代码其实很简单，也完全没必要用插件来实现。最终实现的效果如下图所见。 首先，为媒体添加自定义字段表单 在下面的代码中，我们使用 attachment_field…...- 0
- 0
- 36
-
CSS3判断横屏竖屏方式（三种）
很多时候，为了让手机版横竖屏时有一个理想的效果，我们都需要通过判断区间来设定相应的 css 样式，现在的 CSS3 推出了一个可以判断手机横竖屏的媒体查询。在做移动端页面的时候经常会遇到需要判断横屏还是竖屏，下面将目前已知的通过 HTML，CSS，JS 三种判断方法记录下来，方便以后翻阅。 1、通过在 html 中分别引用横屏和竖屏的样式： <link rel="styleshee…...- 0
- 0
- 22
-
HTML+CSS+JS实现今天的日期和今天剩余的时间
使用 html+css+js 实现日历与定时器，看看今天的日期和今天剩余的时间。 哎，今天就又这么过去了，过的可真快。代码如下，复制即可使用： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<…...- 0
- 0
- 29
-
CSS完美实现iframe高度自适应（支持跨域）
Iframe 的强大功能偶就不多说了，它不但被开发人员经常运用，而且黑客们也常常使用它，总之用过的人知道它的强大之处，但是 Iframe 有个致命的“BUG”就是 iframe 的高度无法自动适应，这一点让很多人都头疼万分。百度或是谷歌一下，确实很多解决方法，但尝试一下，会发现问题很多：浏览器兼容性差，不能自适应，仅支持同域 Iframe 等诸多问题，尤其是跨域 Iframe 高度自适应问题。网上…...- 0
- 0
- 55
-
前端开发 CSS 常见布局方式学习及总结
对于很多前端开发人员来说，CSS 布局应该是日常工作中碰到最多的东西之一，但是让我迷惑的是有很多文章 关于布局名词都没有听说过，工作中也很少用。一个好的布局不仅可以减少代码的书写量，而且有助于我们理解页面结构，更好地实现多种页面效果。学习一段时间了，但对于 CSS 布局方法的掌握一直比较混乱，而一般情况下我们对页面布局最常用到的当属 float、display、position 这三个属性了，我们…...- 0
- 0
- 8
-
HTML5中Canvas绘图各种基本图形的方法
canvas 是 html5 的一部分，当然他们说的 H5 也并不是 html5 的意思，只是表示在手机浏览器中，更侠义的是在微信浏览器中打开的酷炫的网页。曾几何时，我也觉得 canvas 真的酷爆了，各种什么烟花、酷炫的动画效果、canvas 游戏等，都燃烧着我学习的热情。后来通过学习，多看书，其实 canvas 并不复杂，要用到的东西也不多，大概整理一下： 1、绘制直线： 4 这…...- 0
- 0
- 18
-
解决absolute绝对定位高度塌陷无法撑开父元素
网站上某个元素设置了 absolute 绝对定位后，它的高度是不会影响父元素的高度的。这在某些情况下会影响布局。怎么解决这种 absolute 绝对定位高度问题呢？让 absolute 绝对定位的高度自动添加到父元素上。 解决 absolute 绝对定位高度问题，一般有二种方法。 第一种就是给父元素添加一个固定的高度值，这样就不会有父元素高度为 0 的情况了。 第二种是使用 JQUERY 来获取 …...- 0
- 0
- 80
-
详解使用『rem』实现自适应响应式布局
rem 是相对于根元素，这样就意味着，我们只需要在根元素确定一个 px 字号，则可以来算出元素的宽高。本文讲的是如何使用 rem 实现自适应。rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到 rem 大家一定会想起 em 单位，em（font size of the element）是指相对于父元素的字体大小的单…...- 0
- 0
- 9
-
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
-
怎样让网页图片高度自适应宽度
你肯定知道 width 百分比可以实现图片宽度的自适应，那么你知道高度也可以根据宽度变话而自适应比变化么，看下本文就了解了！当前响应式布局，内容尺寸自适应设备是众多网站开发者的选择，毕竟现在显示器、笔记本、移动设备的尺寸太过于繁多了，其中大家都知道使用 width="100%"样式可以实现元素的自适应宽度，但是让元素的高度根据宽度变化而变化却并不能直接通过 css 简单实现。下…...- 0
- 0
- 11
-
CSS代码轻松实现虚线边框滚动动画
百度 ueditor 编辑器网站首页底部有一个滚动虚框的效果，如下 GIF 示意： 当时我看到这个效果的时候，很兴奋，没想到做这个官网页面的还是个 CSS 牛人！等我打开控制台一看——恩，原来是 JS 计算实现的，我就默默地关掉了页面，假装刚才什么都没发生过。 实际上，这种效果三两行 CSS 代码就可以实现，且 IE10+浏览器都支持。 <div class="box"&…...- 0
- 0
- 35
-
CSS实现隐藏滚动条并可以滚动内容
当我们的内容超出了我们的 div，往往会出现滚动条，影响美观，尤其是当我们在做一些导航菜单的时候，滚动条一出现就破坏了 UI 效果。 我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。 我们经常在前端开发中遇到这种情况，最容易想到的是加一个 iscroll 插件，但其实现在 CSS 也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。 方法一： 计算滚动条宽…...- 0
- 0
- 28
-
苹果手机将网站添加到主屏幕上的方法
通常在 iPhone,iPad,iTouch 的 safari 上可以使用添加到主屏按钮将网站添加到主屏幕上。 <link rel="apple-touch-icon" href="/custom_icon.png"/> apple-touch-icon 是 IOS 设备的私有标签，如果设置了相应 apple-touch-icon 标签，则添加到…...- 0
- 0
- 236
-
使用CSS3实现酷炫的3D旋转透视
3D 动画效果现在越来越普及，已经被广泛的应用到了各个平台，比如阿里云，华为云，webpack 官网等。它可以更接近于真实的展示我们的产品和介绍，带来极强的视觉冲击感。所以说，为了让自己更加优秀，css3 3D 动画必不可少。 1.CSS3 3D 转换的常用 API 介绍 首先先上一张 css 3D 的坐标系： 接下来我们来介绍几个常用的 api： 旋转 rotateX() rotateY() r…...- 0
- 0
- 7
-
利用animation动画实现呼吸灯效果
在阿里云看到其 Banner 上的一个呼吸灯效果，感觉非常具有科技感，看了下源码，原来只是一个 CSS3 效果，利用 animation 来实现的动画效果，一时技痒就写了一个 demo 记录一下。 实现思路 底图是一个暗的灯 jpg，另外一张图则是亮灯的 png 透明图片，利用绝对定位将亮灯图片定位在底图上。然后用 animation 写出动效，也就是呼吸灯的闪动效果。最后亮灯图片样式绑定该动效，…...- 0
- 0
- 66
-
实现滚动时动态缩小导航栏jQuery效果
我们先先看一下下面的效果，用 QQ 截的图，效果很不清楚，但是能说明问题。怎么实现这样的效果呢？用得比较多的算是 jQuery 的 waypoints 插件了，其实不用 jQuery 插件，很简单的一段 jQuery 代码就可以实现这样的效果，不过要结合 CSS3 过渡，IE9 以下的浏览器效果可能就差一点了。 实现以上效果的关键代码如下。首先，用 jQuery 判断网页滚动，网页滚动的高度大于 …...- 0
- 0
- 7
-
如何在 JavaScript 中获取 CSS 值
有时候单独的使用 CSS 是不够的。您可能需要使用 JavaScript 控制 CSS 值。但是你如何在 JavaScript 中获得 CSS 值？有两种可能的方式，取决于您是尝试获取内联样式还是计算样式。 获取内联样式 内联样式是存在于 HTML style 属性(attribute)中的样式。 //HTML 代码 <div class="element" style=…...- 0
- 0
- 16
-
通过css在网页中实现容器内元素横向滚动
网页中元素默认是纵向排列的，我们可以通过 css 属性将容器内子元素实现横向排列，超出隐藏，并可以横向滚动。 基础结构如下: <div class="scroll-box"> <div class="item">1</div> <div class="item">2</div> …...- 0
- 0
- 33
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×