早前访问 Google Design 网站,在 Resources 目录下看到了 Material Design Lite 链接。我好奇点开,一下子就被 MDL 组件库的魅力吸引住了。后来详细阅读 Material Design 文档,才明白 Material Design Lite (MDL) 是一个基于 Material Design 理念的 Web 开发组件...阅读全文
框架
217
0
Movie(电影)是用 Node.js 和 MongoDB 实现的 Web 应用程序。一、项目结构 - movie(项目根目录) |- app(应用程序根目录) |- controllers(控制器) |- category.js(分类目录控制器) |- comm...阅读全文
Node.js
246
1
一、在HTML中使用CSS 查看我之前写过的文章 在HTML中使用CSS 二、CSS书写规范 位置属性(position,top,right,bottom,left,z-index,display,float 等)大小(width,height,padding,margin 等)文字系列(font,line-height,letter-spacing,color,text...阅读全文
CSS
552
10
一、对WEB标准以及W3C的理解与认识 WEB 标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括 XHTML 和 XML,表现标准语言主要包括 CSS,行...阅读全文
HTML
471
1
永远遵循同一套编码规范!不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。一、HTML 1.1 语法 用两个空格来代替制表符(tab)– 这是唯一能保证在所有环境下获得一致展现的方法;嵌套元素应当缩进一次(即两个空格);对于属性的...阅读全文
CSS, HTML
935
3
JavaScript 实现侧边栏滚动特效:右边文章可见区域高度 oarticleH 大于左边侧边栏可见区域高度 osidebarH 时触发 scrollEvent 事件。如果网页被卷去的高度 scrollH 加上屏幕可视化区域高度 screenH 大于左边侧边栏可见区域高度 osidebarH ,左边侧边栏 osidebar 固定...阅读全文
JavaScript
754
0
首页滚动特效:页面渲染时,CSS3 实现文字动画;滑动页面时,JavaScript 实现改变背景图片的 background-position 属性和线性改变文字透明度。<!DOCTYPE html> <html> <head> <meta charset="utf-8"/&g...阅读全文
CSS3, JavaScript
987
3
一、前言 演示地址:jQuery 图片轮播 二、主要实现代码 2.1 HTML主要代码 index.html(HTML主要代码) <article id="main"> <section id="showcase"> <div id="sliders"> <div class="sliders"...阅读全文
jQuery, 图片轮播
1777
2
一、前言 jQuery 是继 prototype 之后又一个优秀的 JavaScript 库,顾名思议,也就是 JavaScript 和查询(Query),即是辅助 JavaScript 开发的库。它是轻量级的 JS 库,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery 2.0 ...阅读全文
jQuery
1183
1
一、前言 我们都知道:浏览网页时,右(左)侧边栏的高度往往没有文章主体内容的高度高。当页面向下滑动高度超出右(左)侧边栏高度的时候,右(左)侧边栏就不可见了。怎样让右(左)侧边栏一直部分显示呢?解决方案:当右(左)侧边栏底部可视化时,就固定在可视...阅读全文
JavaScript, jQuery
1711
3
一、前言 现今,无论是移动设备还是平板电脑亦或是 PC 屏幕,屏幕大小各不相同,若是针对每个屏幕大小单独设计一个解决方案,则会大幅增加网站建设的复杂程度和运营成本。响应式网页设计的概念就是可以让网页根据用户的使用环境进行自动调整,有效的改善用户体验。...阅读全文
CSS, HTML, 响应式网页
2949
15
一、前言 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。在 CSS3 中创建动画,需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画...阅读全文
CSS3, keyframes
1071
1
一、提要 HTML5 作为当今最炙手可热的 Web 开发技术,凭借其强大的功能特性和跨平台等优势,吸引了业内开发人员的重点关注,掌握 HTML5 技术也成为 Web 开发人员的一项必备技能。 二、概念 什么是 HTML5 ?HTML5 并不只是一个单独的技术。它是一个概括性的术语,包...阅读全文
HTML5
917
1
一、前言 在 HTML 中使用 CSS,包括内联式、内嵌式、链接式和导入式。二、分类 2.1 内联式 内联式是所有样式应用方式中最为直接的一种,它通过对 HTML 标记使用 style 属性,将 CSS 代码直接写在其中。<!DOCTYPE html PUBLIC "-...阅读全文
CSS
1206
2
最近几年,Web 领域出现了一个全新的 JavaScript 开发框架——Node.js。该框架一经问世,便以其独特的优势得到了广大开发人员的关注。以下主要从什么是 Node.js 框架,使用 Node.js 框架能够解决什么问题,为什么要用 Node.js 框架,在哪些场合下应该考虑使用 Node.js ...阅读全文
Node.js
296
8
根据 Akamai 在 2009 年的研究,47% 的访客希望页面在 2 秒内加载完,并且有 57% 的访客会在页面加载超过 3 秒后离开。除了这项研究,也有不少案例表明加载时间会影响销售。一、打好基础 当你的房子开始陷入地面,你不会去擦窗户 —— 而是修复地基。你的网站也是一样...阅读全文
WordPress
1153
9
一、前言 暑假期间,为了更好的学习一些后台的技术,我们团队一起做了用 Node.js、基于 Node.js 平台的 web 应用开发框架 Express、Node.js 模板引擎 Swig、MongoDB、MVC 框架等开发技术实现“新思路团队 CMS 内容管理系统”这个项目。老师分配给我的任务是首页、分页...阅读全文
MongoDB, Node.js
799
2
WordPress 4.1 正式版带来新主题 Twenty Fifteen、新功能、改进外,还新增了不少函数。一、add_theme_support( ‘title-tag’ ) 在 WordPress 4.1 开始新增了一个名为 title-tag 的主题特性。通过声明这个特性,主题就能知道自身并没有定义标题,WordPr...阅读全文
WordPress
815
0
每当我们更新完文章后,我们都会坐等搜索引擎来抓取收录你的最新文章,这种收录速度太慢了!因为现在很多搜索引擎已经提供了各自的官方 ping 服务。何为 ping 服务?ping 是基于 XML_RPC 标准协议的更新通告服务,用于博客网站把更新的文章内容快速地通知给搜索引...阅读全文
WordPress
905
2
采用 WordPress 建站的时候,发现页面会生成很多冗余的代码。如:<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.bizhongbio.com/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="appl...阅读全文
WordPress
1087
0
使用按钮时,在 Android 手机浏览器中显示正常,但在 iOS Safari 浏览器中会看到按钮显示为圆角样式,设置 border-radius: 0; 也不好使。这是因为 iPhone、iPad 设备上的 Safari 解析 input[type=”submit”] 和 input[type=”reset”] 按钮会以...阅读全文
iOS
1499
0
10 月我和另一个伙伴接了“中南民族大学实验室与设备管理处改版”的项目,该项目于 2015 年 10 月 30 日正式上线。以下展示的图片是网站旧版与新版的部分页面。查看网站阅读全文
网页设计
1118
1
图片来自 © Romain Briaux 欣赏更多 Romain Briaux 作品:Romain Briaux on Behance,Romain Briaux, French graphic designer阅读全文
品牌设计
1130
1
一、前言 谷歌发布新操作系统“ L Developer Preview”后,也同步推出了可视化语言 Material Design,它的设计美学将会融入到谷歌所有的平台之中,包括 Chrome OS 和网页,它也将形成一个统一的外观,将所有的产品捆绑在一起。扁平化的设计,加上明亮的色彩,Material...阅读全文
交互设计
1558
8
一、前言 不管你是不是一个羽翼未丰企业的领导,专业的网站能为你带来的东西比你想象的多很多。退一万步来说,“考虑到我们是一个小厂”,粗糙的网站也许能被用户理解,但是不一定能接受。每天大家所浏览的大量的网站,已经从头到脚为用户灌输了“一个正常的、好的网站...阅读全文
网页设计
958
0
Google doodles Rio 2016: This is a project proposal to Google. The project includes some illustrations and animations for Google, concept of doodles mobile games of Rio 2016 Olympics in Brazil. 图片来自 © Leo Natsume 欣赏更多 Leo Natsume...阅读全文
插画
2203
0
澳大利亚悉尼插画家 Jim Tsinganos 杂志插画作品欣赏。图片来自 © JIM TSINGANOS ILLUSTRATION 欣赏更多 Jim Tsinganos 插画作品,官方网站:JIM TSINGANOS ILLUSTRATION阅读全文
插画
2001
0
平面设计师的工作,是让需要传达的信息实现视觉转换,变得井然有序,形象生动,从而实现信息的有效传达。对于平面设计师而言,若想成功,就必须具备正确的专业知识、技能和敏锐的直觉。设计水平有强弱之分,设计作品自然也有好坏之分。当我们谈到“好设计”或“坏设计...阅读全文
设计
839
0
2015 年的网页设计基本上延续了前面几年的流行趋势,至今比较常见的视觉就是基于扁平化设计的谷歌原质化设计(Material Design)语言,但是它还远远比不上“响应式设计”来得更加革命性。 然而至今为止,我们所能见到最多的就是网页设计里面开始大量使用大背景底图设...阅读全文
网页设计, 视觉设计
2479
3
页面加载完之后:“canvas 绘制破碎玻璃背景”代码来自:Shattered 演示地址:诡异的背景首页阅读全文
网页设计
1625
3
银河系猫2015.04.15
图片来自 © Jen Bartel 欣赏更多 Jen Bartel 作品:Jen Bartel’s Portfolio,Jen Bartel Illustration阅读全文
插画
2924
0
一、前言 用图像创造场景感,增强用户的真实体验,近些年来,图片作为背景填充整个屏幕的设计越来越广泛,曾经只有时尚潮流网站或者摄影类站点才会特别依赖富有冲击力的图像,但是现在几乎任何类型的网站都有可能采用这种大图片作为背景,特别是企业品牌宣传、产品...阅读全文
网页设计, 视觉设计
1180
0
章同学,是我高中同学,创作的作品令人赞赏。以下是其中的一些精选作品。图片来自:章同学 章同学的作品,“出乎意料,恰如其分。” 浏览章同学更多作品:章同学(http://weibo.com/u/1920100401)阅读全文
作品
1544
3
一、前言 原研哉在他的《设计中的设计》中有介绍过这样一个案例:日本机场原来是用一个圆圈和一个方块表示出入的区别,形式简单并且好用,但设计师佐藤雅彦却用一个更“温暖”的方式来重新设计了出入境的印章:入境章是一架向左的飞机,出境章则是个向右的飞机。通...阅读全文
情感化设计
1094
1
Paolo Domeniconi(Aguaplano),意大利插画师,出生于 1965 年,早年他曾在广告公司工作多年,1992 年转为专职自由插画师,目前他的作品大多是与出版社合作的童书插画。图片来自 © Paolo Domeniconi Illustrator 看着像铅笔画,并不是细滑的画面,表现出略显...阅读全文
插画
2735
0
处女座2014.12.16
演示地址:Virgo 阅读全文
网页设计
1394
1
阅读全文
网页设计
1741
3
一、提要 继拟物化(Skeuomorphism)、扁平化(Flat Design)、长阴影(Long Shadow)之后,低多边形(Low Poly)又火速掀起了最新设计风潮。其实,这种设计风格在早期计算机建模和动效中就被广泛采用,在快要被遗忘之时,突然又流了一把。二、特点 Low Poly 是一...阅读全文
网页设计
2446
0
“受冷空气持续影响,本周,我国大部分地区可谓寒意彻骨,大部分地区的天气将呈现缓步下跌的趋势。从 21 日开始,在一股势力强劲的冷空气影响下,不少地方的气温将连续突破今冬新低。中央气象局估计,我国将出现一次明显低温雨雪天气过程。”—— 中央气象局 仍在武汉的...阅读全文
bizhongbio
643
6
北京时间 2015 年 9 月 10 日凌晨 1 点,苹果公司在旧金山的比尔·格雷厄姆市政礼堂举行 2015 苹果秋季新品发布会。本次发布会中,发布了Apple Watch 更多的表带和机身款式、12.9 英寸的 iPad Pro、专为 iPad Pro 打造的全新 Smart keyboard、专为 iPad Pro 打造的全...阅读全文
Apple
1380
0
暑假总结2015.08.31
今年暑假,很多人留校,我也不例外。有的人囿于兼职,有的人囿于考研,而我囿于学习。我不顾归家的心切、不顾家长的想念,毅然决定留校学习前端技术。虽然新思路团队留校成员许多,但是怎敌亲人的陪伴。但这也没办法,既然选择留校,就好好学习。毕竟“执念已深,无法...阅读全文
bizhongbio
1243
0
由新浪娱乐发起的微博话题 #一句话祝福高考生# 导语这样写道:“何炅、李健、井柏然、陈意涵、佟大为、乔振宇、赵丽颖、郭碧婷、宋佳、彭于晏、欧豪、陈都灵、胡歌等人为高考生送上祝福,他们也分享了为自己加油的小秘诀或考试小技巧。祝高考生们考试顺利!”。...阅读全文
bizhongbio
1626
3
它,就要来了。15 年 4 月 24 日发售。北京时间今凌晨 1 点苹果在旧金山芳草地艺术中心举行“2015 年苹果春季发布会”。苹果官网这样描述:“Our most personal device yet. Our goal has always been to make powerful technology more accessible. More relevan...阅读全文
Apple
1104
1
Shot on iPhone 6 全球作品廊(World Gallery),这是由苹果公司为了抢占广告牌市场而推出的一项大型活动,并专门推出了一个专属页面,收集整理世界各地使用 iPhone 6 所拍摄的优秀摄影作品。苹果官网这样描述:“People take incredible photos and videos on iPho...阅读全文
Apple
2267
1
一份薄礼2015.02.26
这一天,一份薄礼,来自腾讯 QQ。图片来自:必钟的 iPhone5(截屏)阅读全文
QQ
1207
0
《一年级》是湖南卫视 2014 年重磅打造大型校园纪实节目,节目 2014 年 9 月 3 日开始录制,10 月 17 日开播,播出时间每周五晚 22:00-24:00。《一年级》是中国电视首次深入真实校园,对学童鲜师共同的成长进行全景记录。《一年级》讲述的是一群一年级新生进入校园...阅读全文
真人秀
1042
0
这款名叫《纪念碑谷》(Monument Valley)的解谜游戏由 8 人组成的英国独立游戏开发团队 USTWO GAMES 制作,于 4 月 3 日在 Apple 的 App Store 上架,售价 25 RMB。《纪念碑谷》设计的灵感来自错觉图形大师 M.C.Escher,奉行简洁、纯粹、极致等理念。游戏的所有...阅读全文
游戏
2187
0
欢迎来到我的个人博客网站 - 双鱼bizhongbio – 渡人渡己,前端开发技术博客。双鱼bizhongbio,是专注于分享 web 前端开发技术的个人博客。磨砺,聚变。没有伞的孩子,必须努力奔跑。从开学就开始制作个人博客,期间遇到数多挫折,没有很好的设计功底、网站设计经验...阅读全文
bizhongbio
1372
3