codecamp

Pure基础

利用Normalize.css,一个HTML5就绪的替代CSS重置。

Pure基础

Pure中的所有模块构建在Normalize.css之上。这是我们的基础层,保持一定程度的跨浏览器一致性。您可以通过<link>在您的页面上添加此元素来拉入Normalize.css :

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/base-min.css">

有点关于Normalize.css

Normalize.css是Nicolas GallagherJonathan Neal的一个开源项目。也就是说:

Normalize.css是一个小型CSS文件,可在HTML元素的默认样式中提供更好的跨浏览器一致性。这是一种现代化的HTML5准备,可以替代传统的CSS重置

Normalize.css提供了很好的文档和一个彻底的指南,说明它与传统的重置有何区别。您还可以查看YUI的CSSNormalize模块,其中包括通用的Normalize以及上下文版本。规范化的上下文版本仅将归一化样式应用于具有类名称的元素的子元素yui3-normalized。

附加功能

除了Normalize.css规则之外,Pure's Base模块还包含大多数网站使用的常见样式。

隐藏元素

将hidden属性添加到HTML元素,以通过屏幕将其隐藏display: none !important;。或者,为了与旧的IE兼容,您可以使用CSS类名.hidden。

<input type="text" name="_csrf" hidden>

响应图像

将.pure-img类名添加到<img>元素,使其与视口缩放。建立响应式网站时,这很方便。

<input type="text" name="_csrf" hidden>

超越规范

Normalize.css是您的项目的一个很好的起点,但是一些HTML元素(如表单,表格和菜单)需要比Normalize提供的更多的样式。

我们对这些元素做出了更加舆论的外观和感觉,同时保持最小化,以便您可以根据自己的网站或应用的需求进行自定义。查看我们的CSS形式表格菜单

Pure模板
Pure网格
温馨提示
下载编程狮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; }