分类为 前端 的文章:
注:中文的话除了“黑体宋体楷体”也就“雅黑”可选了,以下是英文的几个可用字体(蓝色标注的是本站推荐使用)。另,本文偏重Windows系统。 所有平台都预装的字体,被称为“安全字体”,因为它可以保证所有用户的视觉效果是一样的。字体安全即从安全字体的使用中说起!! 在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体。但多数情况下,考虑各个因素...
2013/06/21 浏览数(2,620) 分类(UI)
我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。 那么,又怎么来计算选择器的特殊性呢?下面这张图介绍了特殊...
2013/06/20 浏览数(1,682) 分类(UI)
js获取本地即将上传文件的大小: <input type="file" onchange="fileChange(this);" /> <script type="text/javascript"> var isIE = /msie/i.test(navigator.userAgent) && !window.opera; function fileChange(target) { var fileSize = 0; if (isIE && !target.files) { var filePath = target.value; var fileSystem = new ActiveXObject("...
2013/06/14 浏览数(6,962) 分类(Javascript)
提到图片,我们不得不从位图开始说起,位图图像(bitmap),也称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和染色以构成一副图片。当放大位图时,可以看见赖以构成整个图像的无数单个方块。 常见的格式中JPG、PNG、GIF亦属于位图,所以它们的数据结构大致相同,只是每一种图片格式都有不同的压缩算法,不同的扫描方式,但是优化的方法都有一个共同点,都是围绕着每个像素颜色值来下...
2013/06/14 浏览数(2,815) 分类(UI)
什么是扁平化设计? 在实际当中,扁平化设计一词所指的是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果,从而打造出一种看上去更“平”的界面。扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。 随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸,创建多个屏幕尺寸和分辨率的skeuomorphic设计既繁琐又费时。设计正朝着更加扁平化的设计,你可以一次保证在...
2013/06/14 浏览数(1,882) 分类(UI)
一、无图片技术定义 在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果的技术。 二、为什么要“无图片”? 首先我们通过yslow的statistics查看新浪微博最新版首页的文件,得到Stylesheet File(CSS文件)大小为206.8K, CSS Image大小为623.8K。明显发现CSS文件比CSS Image小很多。   当然单纯拿这两个来比,还不能说明什么。 下面我们...
2013/06/7 浏览数(1,406) 分类(UI)
效果: 可自动确定显示位置的横向二级菜单预览 [查看演示] 代码: <ul id="nav"> <li><a href="index.php?&lang=1">首页</a></li> <li><a href="page.php?cid=1&lang=1">公司简介</a> <ul class="submenu"> <li><a href="page.php?cid=8&lang=1" 公司简介</a></li> ...
2013/04/24 浏览数(1,844) 分类(jQuery)
说明: 通常我们使用以下方法来清除浮动: <style> .content{float:right} .clear {clear:both} </style> <div class="content">content</div> <div>sidebar</div> <div class="clear"></div> <div>footer</div> 这个方法简单有效,但是会浪费一个元素。下文是一个用CSS来清除浮动的方法,不需要添加空元素: <style> .c...
2013/04/18 浏览数(1,803) 分类(UI)
效果: 根据身份证号自动填写性别、年龄和籍贯 代码: HTML: <!-- checkPeopleNumber('ZZZZZZ201302281446','放性别的元素ID','放生日的元素ID','放籍贯的元素ID'); 根据身份证号自动填写性别、生日、籍贯,返回错误信息 14:48 2013年2月28日 --> 输入身份证号:<input type="text" name="peopleNumber" value="" onblur="documen...
2013/02/28 浏览数(2,717) 分类(Javascript)
说明: 相机里的照片太大传不到网站上?有这个工具就够了,免费、绿色、小巧、强大。推荐给需要的朋友们。 这个软件可以单张或批量缩小图片尺寸和体积、添加水印(文字、图片或者都加),软件还自带了一些特效。 用法: 第一步:点击“添加图片”,选中需要处理的照片,可以同时选多张。 第二步:如果不设置水印的话,跳过这一步,点下一个标签“特效处理”。 第三步:特效,不需要就跳过。 第四步:输出大小调整为“800×600...
2012/10/15 浏览数(4,217) 分类(UI)
名称 如何工作 cubic-bezier(x1, y1, x2, y2) X 和 Y 值在0到1之间,以定义用于Time function的贝塞尔曲线的形状。 linear 均速 ease 逐渐慢下来 ease-in 加速(渐入) ease-out 减速(淡出) ease-in-out 加速然后减速
2012/10/10 浏览数(1,613) 分类(UI)
点击返回顶部
  1. 留言
  2. 联系方式