搜索内容

yiyan 的文章
  • CSS3 Columns:比table更好用的分列式布局方法

    CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用float,clear,margin等属性进行调控,避免了很多麻烦。
    yiyan 前端教程 2020年11月26日
  • Vendor Prefix:为什么需要浏览器引擎前缀

    Vendor prefix—浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和Safari浏览器使用的是WebKit渲染引擎,火狐浏览器使用的是Gecko引擎,Internet Explorer使用的是Trident引擎,Opera以前使用Presto引擎,后改为WebKit引擎。一种浏览器引擎里一般不实现其它引擎前缀标识的CSS属性,但由于以WebKit为引擎的移动浏览器相当流行,火狐等浏览器在其移动版里也实现了部分WebKit引擎前缀的CSS属性。
    yiyan 前端教程 2020年11月26日
  • 在CSS里用calc进行计算

    CSS就像迷一样让人想不透;我们喜欢CSS,是因为它很简单,但我们又不停的要求它提供更多的功能。CSS里已经新增的特征有placeholders, 动画技术和click events等。但有一个问题是,CSS是静态的;完全没有逻辑操作。可CSS里的calc函数却打破了这种趋势,它提供了程序员使用CSS编程计算的能力。
    yiyan 前端教程 2020年11月26日
  • CSS里的:target伪选择器

    :target是CSS里一个非常有趣的伪选择器。它在CSS里发生效力的过程是这样的:当浏览器地址里的hash(地址里#号后面的部分)和:target伪选择器指定的ID匹配上时,它的样式就会在这个ID元素上生效。让我们看一看这个:target伪选择器是如何起作用的:
    yiyan 前端教程 2020年11月26日
  • HTML5里download属性

    HTML5给我们带来了很多“重型”的特征,例如WebSockets,Web Workers,History, Storage 和一些像 classList 这样的工具类。然而,也有很多小的非常好的特征;其中一个就是新添加的download属性。download属性能让我们指定浏览器下载时采用新的文件名称。而不是链接上原始的文件名称。
    yiyan 前端教程 2020年11月26日
  • HTML5里的placeholder属性

    HTML5里新引入很多有趣的新特征;有些体现在HTML里,有些是JavaScript API,全部非常的有用。其中我最喜欢的一个特征就是文本框(INPUT)里的placeholder属性。placeholder属性能够让你在文本框里显示提示信息,一旦你在文本框里输入了什么信息,提示信息就会隐藏。
    yiyan 前端教程 2020年11月26日
  • 用CSS3和JavaScript开发《街头霸王》游戏

    最近我学到了一种很酷的技术,使用CSS3的steps()动画属性来生成PNG背景动画。这种技术的主要功能是利用铺贴PNG背景图的方式“重现”GIF图的动画效果。我的朋友都知道,年轻时候我非常痴迷《街头霸王》游戏,而当我看到了这个素材….你知道我的脑子里想到了什么吗?
    yiyan 前端教程 2020年11月26日
  • 用CSS制造出光泽一闪而过的图片效果

    我曾在Addy Osmani的博客里看到过这种效果。这种当鼠标悬停时光泽一闪而过。十分的简单,但非常的漂亮。在重新设计网站版面时,我很想在我的logo上使用这种效果。只需要两个HTML元素和一个CSS变换,我就能创造出我自己的闪光效果。让我们来实现它!
    yiyan 前端教程 2020年11月26日
  • 使用Helium找出页面上无用的CSS样式

    我最无法忍受的一个事情就是多余的代码。不论是页面中的CSS还是JavaScript,还是浮肿的HTML代码或没有优化的图片,这是我们的懒惰和错误让成千上万的访问用户受连累。有一个非常棒的工具,叫做Helium,它能帮助程序员找出样式表中无用的或有问题的样式规则。让我们来看看是如何使用它!
    yiyan 前端教程 2020年11月26日
  • CSS里内置的计数器

    计数器(counter),“老一辈”程序员估计对这个东西印象深刻,早期的网站页面上经常会有这个东西,如今这种特征都变成了笑话。CSS里自己实现了一种计数器,很简单,很直接。使用CSS计数器,你可以实现简单的纯CSS的计数功能,并能将其显示到页面上。下面我们简单的看一下CSS计数器是如何使用的!
    yiyan 前端教程 2020年11月26日
  • 如何在JavaScript里防止事件函数的高频触发和调用

    网页中JavaScript最基本的功能是监听或响应用户的动作,这非常的有用。用户的动作有些频率非常高,有的十分罕见。有些监听器函数的执行如闪电般完成,而有些繁重的会把浏览器拖死。拿浏览器窗口的resize事件来说,这种事件会在浏览器窗口大小的每一尺度变化都触发一次,如果监听器体量很大,你的浏览器很快就会被拖垮。
    yiyan 前端教程 2020年11月26日
  • 用JavaScript判断CSS浏览器类型前缀的方法

    不管我们对浏览器类型前缀有多么的讨厌,我们都不得不每天面对它,否者有些东西不能正常工作。这些前缀的用法有两种:在CSS里(例如“-moz-”)和在JS里。有一个神奇的X-Tag项目里有一段很聪明的JavaScript脚本,可以用来判断当前使用的是什么前缀——让我来展示它是如何工作的!
    yiyan 前端教程 2020年11月26日
  • 多重背景CSS动画

    CSS背景动画很长时间以来都是一个热门话题,很多时候都是因为效果特别绚丽,而且不需要额外的技术。最近有人问我是否可以给页面上一个指定的元素安排多重背景动画,答案是yes….虽然有些限制因素。让我们来看看如何实现这个效果!
    yiyan 前端教程 2020年11月26日
  • 5种JavaScript和CSS交互的方法

    随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作。我们的网页中都有.js文件和.css文件,但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道!
    yiyan 前端教程 2020年11月26日
  • 漫谈CSS transform动画技术

    CSS Transform效果是指通过在浏览器里让网页元素移动、旋转、透明、模糊等方法来实现改变其外观的技术。在CSS里定义的变化动作会在页面生成前应用到网页元素上,所以你看不到发生的过程。然而,这些变化动作也可以由mouseover或其它相似事件触发,这样我们就可以看到它的动作过程。
    yiyan 前端教程 2020年11月26日
  • CSS变量初体验

    根据Mozilla软件工程师Cameron McCormack的透露,火狐浏览器从V29版开始支持一种新的CSS特征——CSS变量。下面这个视频可以让你大概的了解一下CSS变量的基本情况:
    yiyan 前端教程 2020年11月26日
  • 纯CSS3的3D旋转立方体

    提示:将鼠标放到立方体上,会发现更炫的动画效果。(用谷歌浏览器观看效果最佳) 前后上下左右
    yiyan 前端教程 2020年11月26日
  • HTML5画布(Canvas)技术效果演示:用CSS3的animation轻松实现背景动画——漂浮的云

    慢悠悠的云
    yiyan 前端教程 2020年11月26日
  • HTML5画布(Canvas)技术效果演示:五彩缤纷

    yiyan 前端教程 2020年11月26日
  • HTML5画布(Canvas)技术效果演示:可撕扯的网布

    用鼠标撕扯布面 按住右键拖拽鼠标可割破布面
    yiyan 前端教程 2020年11月26日
  • 用HTML5画布实现一个会走动的时钟

    我以前用Flex实现了一个能走动的时钟,但Adobe丢弃了Flex后,我觉得用HTML5的画布(canvas)功能重新做出效果一样的时钟。下面是它的效果图:
    yiyan 前端教程 2020年11月26日
  • 利用css实现的表格样式展示

    本文来自css快速入门栏目,文中为大家展示了几款css实现的表格样式,非常漂亮、美观,希望可以帮助到大家。文中展示了单像素边框css表格、带背景图的css样式表格、自动换颜色的样式表格和鼠标悬停高亮的样式表格。
    yiyan CSS3教程 2020年7月23日
  • CSS3属性选择器的几种用法(代码实例)

    1、整个div宽为850,要求在页面中居中显示;2、标题大小为28,加粗显示;3、其他字体14px大小;4、点击明星八卦,跳转到tobagua.html,点击军事新闻跳转到toaffairs.html现在来具体操作...
    yiyan CSS3教程 2020年7月19日
  • CSS3中background-orgin实现带相框照片显示效果-案例解析(代码实例 )

    1、每个相框宽500px,高500px,其中border宽20px,里面文字padding为20,边框的大小为20px;2、里面的照片必须按照背景图片实现现在来具体操作...
    yiyan CSS3教程 2020年7月14日
  • Python MongoDB

    MongoDB 是目前最流行的 NoSQL 数据库之一,使用的数据类型 BSON(类似 JSON)。 MongoDB 数据库安装与介绍可以查看我们的 MongoDB 教程。 PyMongo Python 要……
    yiyan Python3 教程 2020年7月13日