codecamp

Pure模板

常见模板

Pure是为了在每个网络项目中都可以使用的目标。为了展示这一点，我们制作了一些利用Pure的常见布局。这些布局是响应式的，不需要JavaScript（某些菜单交互除外）。

当查看这些布局时，查看或复制源以了解发生的情况。这些布局示例可以在您自己的项目中根据zLib许可证免费使用。

博客

一个布局示例，显示一个包含帖子列表的博客页面。查看 | 下载

blog@2x

基础网格按钮菜单

电子邮件

展示响应式电子邮件布局的布局示例。查看 | 下载

email@2x

基础网格按钮菜单

照片库

展示响应式照片库的布局示例。查看 | 下载

gallery@2x

基础网格按钮菜单形式

登陆页面

展示响应型产品着陆页的布局示例。查看 | 下载

marketing@2x

基础网格按钮菜单形式

定价表

展示响应式定价表的布局示例。查看 | 下载

基础网格按钮菜单

pricing@2x

基础网格按钮菜单

响应侧菜单

具有隐藏在移动设备上的侧面菜单的布局示例，就像Pure网站一样。查看 | 下载

side-menu@2x

基础网格菜单

响应水平到垂直菜单

一组水平菜单切换到垂直，并以较小的窗口宽度隐藏。查看 | 下载

tucked-menu-vertical@2x

基础网格菜单

响应性水平到滚动菜单

展示一个隐藏在小窗口宽度的水平菜单，当显示时滚动。查看 | 下载

tucked-menu@2x

温馨提示

下载编程狮App，免费阅读超1000+编程语言教程

取消

确定

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }