我们经常看到有很多的垂直时间轴用来记录事件进展，而有朋友问我要求分享水平的时间轴，其实水平时间轴的难点在于自适应屏幕尺寸。那么 今天我要给大家分享的是一款支持响应式、支持触屏手势滑动的水平时间轴。效果展示 源码下载 HTML 我们的HTML结构由两部分组成，div.timeline用于放置日期导航水平线，它有水平多个日期div.events-wrapper和水平轴左右方向导航按钮ul.cd-timeline-navigation组成。而div.events-content放置的...
目的： 实现一个响应式导航，当屏幕宽度大于700px时，效果如下：当屏幕宽度小于700px时，导航变成一个小按钮，点击之后有一个菜单慢慢拉下来： 思路： 1.为了之后在菜单上绑定事件，并且不向DOM中添加多余的节点，在大屏幕中出现的导航和小屏幕中的下拉导航必须是一个。 所以我选择了将导航绝对定位。 2.默认导航列表是出现的，当屏幕宽度小于700px时它隐藏，并且设置position，当屏幕宽度大于700px时，它出现。或者，默认导航...
cssSlidy是一款支持手机移动端的焦点图轮播插件，支持标题设置，滑动动画，间隔时间等。在线实例实例演示使用方法 <div id="slidy-container"> <figure id="slidy"> <a href=# target=_blank><img src="img/2.jpg" alt="jQuery.nicescroll美化滚动条" data-caption="jQuery.nicescroll美化滚动条"></a> <a href=# target=_blank><img src="img/4.jpg" alt="jQuery仿淘宝商品多属性查询" data-caption="jQuery仿淘宝商品多属性查...
jQuery时间轴插件效果图预览 （图一） （图二）附注说明： 图一是浏览器宽度像素大于560px下的展示效果，图二是在浏览器宽度像素小于560px下的展现效果。使用的是CSS3的Media Query（媒体查询）实现的效果。 另外页面中圆形、圆角和三角同样使用了CSS3的特殊样式。这些基础的样式和效果在本文中不会赘述，不了解的童鞋可以上网搜索学习一下，很简单。 页面上每个时间节点的展示内容提供了三种展示样式，多张图片的展示风格、...
我们经常看到有很多的垂直时间轴用来记录事件进展，而有朋友问我要求分享水平的时间轴，其实水平时间轴的难点在于自适应屏幕尺寸。那么 今天我要给大家分享的是一款支持响应式、支持触屏手势滑动的水平时间轴。效果展示 源码下载 HTML 我们的HTML结构由两部分组成，div.timeline用于放置日期导航水平线，它有水平多个日期div.events-wrapper和水平轴左右方向导航按钮ul.cd-timeline-navigation组成。而div.events-content放置的...
我看最近微博流行CSS居中技术，我看了几编资料写的都不多好，于是抽时间把相关资料整合了，具体内容如下。 点击此处下载源码 效果展示：要求: 1.尽可能兼容更多浏览器，这里兼容到ie7,ie6不支持max-*就不考虑了。 2.浏览器尺寸变化时，图片总是等比例拉伸或缩放。 3.包裹图片的div也是响应式的，并且每个div的尺寸是一样的。 4.图片始终保持水平垂直居中。 5.图片的行列数不变，这里一直都是3*3. 下面来搞定一个个要求。 满足要求1...
现在屏幕分辨率的范围很大，从 320px (iPhone) 到 2560px (大型显示器)，甚至更大。用户也不只是使用台式电脑访问web站点了，他使用手机、笔记本电脑、平板电脑。所以传统的设置网站宽度为固定值，已经不能满足需要了。web设计需要适应这种新要求，页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍，如何使用html5和CSS3 Media Queries完成跨浏览器的响应式设计。 第一次运行 在开始之前，我们可以...
随着 Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰，曾经一度困扰着网页开发者，好在 CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢？什么是响应式图片？响应式图片是指：用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。CSS3 响应式图片对于很多...
今天给大家分享一组响应式网站模板，这些网站都是基于 HTML5 & CSS3 制作的干净、简单、响应式的网站。每个网站都提供了在线演示并可以免费下载使用。需要注意的是，下载的时候需要 Follow 作者的 Twitter。我要下载
这篇文章主要为大家详细介绍了CSS3 media queries结合jQuery实现响应式导航,具有一定的参考价值，感兴趣的小伙伴们可以参考一下目的：实现一个响应式导航，当屏幕宽度大于700px时，效果如下：当屏幕宽度小于700px时，导航变成一个小按钮，点击之后有一个菜单慢慢拉下来： 思路：1.为了之后在菜单上绑定事件，并且不向DOM中添加多余的节点，在大屏幕中出现的导航和小屏幕中的下拉导航必须是一个。 所以我选择了将导航绝对定位。2....
Ink 可以帮助你快速创建响应的 HTML 电子邮件，可工作在任何设备和客户端。这个 CSS 框架帮助您构建可在任何设备上阅读的 HTML 电子邮件。曾经需要你兼顾各种邮件客户端的日子一去不复返了，Ink 的灵活性和稳定性让你的读者可以查看到你精致的电子邮件。 您可能感兴趣的相关文章 你应该知道的10个奇特的 HTML5 单页网站 Rainyday.js ? 竟然有如此逼真的雨滴效果 10大流行的 Metro UI 风格 Bootstrap 主题 推荐35款精...
响应式Web设计(Responsive Web Design)是2013年最流行的界面设计趋势之一。那么你知道有哪些好用的支持响应式设计的工具吗？为你推荐10个超棒的响应式Web设计工具，希望你能喜欢： 1、Bootstrap 由两个Twitter员工开发并开源的前端框架，目前已经更新到了v3.0版本，在Github上非常火爆，在国内也有很多粉丝，值得一试。 2、Adobe Edge Inspect 对移动开发者尤其有用的工具，其前身是 Adobe Shadow，用于帮助设计师和开发者同...
今天给大家分享一些富有创意且响应式的Drupal 7的主题，更多主题资源请访问 Goodfav Magazine. Properta ? Real Estate Drupal Theme ? MORE INFO Flat, modern and clean design;100% Fully Responsive;Retina Ready;Bootstrap;ront end submission system;SEO on-page optimized;Google Maps Integration;Touch Friendly Flat Metro ? Responsive Drupal Theme ? MORE INFO Falt Metro is a multipurpose, fully respo...
本文参考是参考http://www.netmagazine.com/tutorials/build-basic-responsive-site-css做的练习。 文中作者阐述了对于响应式设计不应该针对不同的终端显示不同的内容，当用户在pc上可以查到的内容，在移动端却怎么也找不到，这是很困惑的一件事情。所以响应式设计要做的是适当的缩放，针对不同的设备显示适当的布局，而不是改变内容。所以响应式布局的是利用流式布局（利用百分比设置各元素宽度）和css3的Media Query来实现...
接了一个活，要求页面宽度大小随着显示器的大小改变而改变，属于自适应的一类。 我就想到了响应是布局，但是查了许多资料大多数都看不懂，求指教。简单易懂的。 回复讨论(解决方案) 流式布局不就可以了，宽度什么的用百分比做，加个最小宽度控制一下。