文章分类 -  HTML&CSS

1 2 下一页
MP4大文件虚拟HLS分片技术，避免点播服务器的文件碎片
摘要：本文主要介绍了通过虚拟分片技术，把MP4文件，映射为HLS协议中的一个个小的TS分片文件，实现了在不实际切分MP4文件的情况下，通过HLS协议播放MP4文件，从而避免了对MP4进行点播，尤其是大的MP4文件，需要长时间缓冲MP4头部数据的问题，同时可以解决对MP4文件进行切分，会在服务器制造出大量的 阅读全文
posted @ 2018-02-08 22:34 luckc# 阅读(1379) 评论(1) 推荐(1)
H5的Notification特性 - Web的桌面通知功能
摘要：目前，web网页使用桌面通知功能的越来越多，包括微博，腾讯视频等大厂站，桌面通知功能是H5的一个API - Notifications。它允许网页或应用程序可以发出通知，通知将被显示在页面之外的系统层面上（通常使用操作系统的标准通知机制，但是在不同的平台和浏览器上的表现会有差异），这样即使应用程序空 阅读全文
posted @ 2017-11-23 14:12 luckc# 阅读(1606) 评论(0) 推荐(0)
CSS动画简介
摘要：作者：阮一峰现在，我很少写介绍CSS的文章，因为感觉网站开发的关键还是在服务器端。但是，CSS动画除外，它实在太有用了。本文介绍CSS动画的两大组成部分：transition和animation。我不打算给出每一条属性的详尽介绍，那样可以写一本书。这篇文章只是一个简介，帮助初学者了解全貌，同时又是一... 阅读全文
posted @ 2014-12-02 09:09 luckc# 阅读(131) 评论(0) 推荐(0)
响应式Web设计：HTML5和CSS3实战 读书笔记
摘要：响应式Web设计：HTML5和CSS3实战Responsive Web Design with HTML5 and CSS3By : Pandao pandao####vip.qq.comUpdateTime :2013-08-21目录第1章 HTML5、CSS3及响应式设计入门第2章 媒体查询：支... 阅读全文
posted @ 2014-11-05 14:40 luckc# 阅读(1099) 评论(0) 推荐(0)
CSS3 3D transform变换，不过如此！
摘要：本文地址：http://www.zhangxinxu.com/wordpress/?p=2592一、写在前面的秋裤早在去年的去年，我就大肆介绍了2D transform相关内容。看过海贼王的都知道，带D的家伙都不是好惹的，2D我辈尚可以应付，3D的话，呵呵，估计我等早就在千里之外被其霸气震晕了~~看... 阅读全文
posted @ 2014-09-24 11:28 luckc# 阅读(215) 评论(0) 推荐(0)
箭头左右摇摆
摘要：.seat-sway { animation: sway 2s linear 0s infinite alternate; -moz-animation: sway 2s linear 0s infinite alternate; -webkit-animation: sway 2s line... 阅读全文
posted @ 2014-08-15 15:43 luckc# 阅读(158) 评论(0) 推荐(0)
跨终端响应式页面设计入门
摘要：跨终端/响应式页面不外乎是让各种分辨率的屏幕都能顺利阅读你的页面，常规来讲一个跨终端页面，在宽屏的电脑上看和在小屏幕手机上看的布局是不同的，布局不同的原因是为了让读者更好地阅读你的页面，见下图：这里有点要提到的是，我们常规会将PC版的页面和移动端设备的页面独立开来设计，这样会让PC端的页面布局更灵活... 阅读全文
posted @ 2014-08-13 12:49 luckc# 阅读(163) 评论(0) 推荐(0)
图标字体化浅谈
摘要：在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题，经过实践发现了一种比较好的解决方案，图标字体化。在微社区项目中，有很多小的Icon（图标），如分享、回复、赞、返回、话题、访问、箭头等，这些Icon（图标）一般都是纯色的。开始制作时考虑用双倍大小的Sprite图，通过CSS... 阅读全文
posted @ 2014-07-24 09:51 luckc# 阅读(235) 评论(0) 推荐(0)
朋友网无障碍优化实践
摘要：为了营造无障碍的信息空间，方便视障用户使用我们的服务，借助朋友网(pengyou.com)改版时机，我们实施了一些提高页面可访问性的实践。Web内容无障碍指南（WCAG）2.0定义了如何使web内容更便于残障人士访问。它定义了web内容无障碍的四项基本原则，即可感知、可操作、可理解和健壮性，为了达到... 阅读全文
posted @ 2014-07-24 09:46 luckc# 阅读(167) 评论(0) 推荐(0)
跨平台字体效果浅析
摘要：（本文中部分图片由于尺寸限制未能体现实际效果，劳烦点击大图查看）在对设计稿视觉还原的过程中，经常会产生一些字体还原的问题。例如对一些大号文字还原后，实际视觉效果有逊于在photoshop上的效果；在Mac上的设计稿还原后，明明用的还是“宋体”和“黑体”，但是还原后字型相距较大；而在Windows做好... 阅读全文
posted @ 2014-07-24 09:42 luckc# 阅读(753) 评论(0) 推荐(0)
网站字体渲染过程
摘要：前言我们知道同一种字体在不同浏览器上的表现有可能是不同的，除了浏览器，还有哪些导致表现不同的因素呢？不同系统下字形的渲染也是不一样的，根本原因是什么呢？我们希望各浏览器下字体排版一致，实现的话有完美的方案吗？带着这些问题我们来看看字体渲染的过程：解码了解解码之前，我们稍微先简单回顾下编码的一些知识，... 阅读全文
posted @ 2014-07-24 09:40 luckc# 阅读(264) 评论(0) 推荐(0)
移动终端开发必备知识
摘要：移动设备的用户越来越多，每天android手机的激活量都已经超过130万台，所以我们面向移动终端的WebAPP也开始跟进了。本文主要介绍webapp的开发与调试的相关知识和经验，以及给出几种可选的解决方案。一、基本概念（1） CSS pixels与device pixelsCSS pixels： 浏... 阅读全文
posted @ 2014-07-24 09:39 luckc# 阅读(130) 评论(0) 推荐(0)
响应式网页设计
摘要：概念响应式网页设计最初是由EthanMarcotte提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动... 阅读全文
posted @ 2014-07-24 09:38 luckc# 阅读(259) 评论(0) 推荐(0)
网页上的摄影展:等高响应布局实现
摘要：「等高响应式布局」是什么？介绍它之前，我们先回忆一下它的近亲「等宽响应式瀑布流」。回忆一下，Pinterest、Google+、花瓣网、美丽说等是否让你沉浸于不断往下拉体验丰富的图片阅览？那种感觉就像逛街，让所有商品呈现在网页上，只需要往下拉鼠标就能逐个浏览，不断加载，他们简洁同时整齐，原因是他们的... 阅读全文
posted @ 2014-07-24 09:34 luckc# 阅读(164) 评论(0) 推荐(0)
[ISUX译转]CSS3 transition规范的实际使用经验
摘要：本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异，关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章，“All You Need to Know About CSS Transitions”。Alex MacCaw讲述的是关于实现特定的效果，而我要谈的是... 阅读全文
posted @ 2014-07-24 09:32 luckc# 阅读(128) 评论(0) 推荐(0)
自适应网页设计（Responsive Web Design）
摘要：作者：阮一峰日期：2012年5月 1日随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时 阅读全文
posted @ 2012-05-01 16:36 luckc# 阅读(93) 评论(0) 推荐(0)
CSS 规范
摘要：本规范概述 制定本规范的目的在于使我们的CSS代码更加易于维护和重用，从而提升效率执行本规范时建议的流程 建议使用D(esign)C(oding)D(ebug)V(alidate)R(oundup)，即DCDVR的流程。首先需要规划样式并分为共有样式和页面个性化样式，然后才开始编码，编码的同时进行Debug，Validate和代码片断的总结，而不是在所有模板都完成后才进行这三个步骤。 一、关于... 阅读全文
posted @ 2011-12-26 17:27 luckc# 阅读(216) 评论(0) 推荐(0)
分享8个超棒的基于HTML5和jQuery的开发教程
摘要：HTML5和jQuery组合目前对于Web开发人员来说是强大的工具之一，使用这个组合能够帮助你扩展你设计的局限，实现一些非常绚丽及其强大的Web应用或者网站。尤其是最近jQuery 1.0的发布，更助力了移动设备的开发。现在已经有很多的开发人员和设计人员开始使用HTML5和jQuery配合开发来显示各种特效。今天我们将给大家推荐8个精心选择的HTML5和jQuery组合开发的教程，希望对大家有帮助... 阅读全文
posted @ 2011-12-22 09:59 luckc# 阅读(199) 评论(0) 推荐(0)
10款非常棒的CSS代码格式化工具推荐
摘要：如果你刚开始学习CSS，这意味着你的很多代码或结构可能需要优化，比如你可能过多使用了类、添加了多余的间隔或空行等等，这将导致代码臃肿、混乱，可读性和执行效率将大大降低。 本文为你整理了几款CSS工具，借助它们，你可以轻松写出漂亮的CSS代码。 1. CSS Lint 这是一个在线工具，可以帮助你检测CSS代码中的问题。该工具可以对一些基本的语法进行评估，并使用一套规则，以寻找有问题或效率低的... 阅读全文
posted @ 2011-12-15 10:14 luckc# 阅读(176) 评论(0) 推荐(0)
video + canvas = magic
摘要：You’ve already learned about the<video>and<canvas>elements, but did you know that they were designed to be used together? In fact, the two elements are absolutely wondrous when you combine them! I’... 阅读全文
posted @ 2011-11-29 14:31 luckc# 阅读(374) 评论(0) 推荐(0)

1 2 下一页