1)什么是Pure.CSS?
Pure.CSS是Yahoo开发的级联样式表(CSS)框架。它用于使网站更快, 更美观且响应更快。
2)Pure.CSS的重要特征是什么?
- 这是免费的。
- 它具有内置的响应式设计。
- 它使用标准的CSS以最小的足迹。
- 它是小型的响应式CSS模块的集合。
- 它支持阴影和粗体颜色。
- 在各种平台和设备上, 颜色和阴影保持一致。
3)标准CSS是什么意思?
标准CSS非常易于学习, 并且不依赖于任何外部JavaScript库(例如jQuery)。 Pure.CSS使用标准CSS。
4)如何使用Pure.CSS?
有两种使用Pure.CSS的方法:
- 本地安装:你可以在系统上下载pure.css文件, 并将其包含在HTML代码中。
- 基于CDN的版本:你可以直接从Content Delivery Network(CDN)将pure.css文件包含到HTML代码中。
PURE.CSS提供了一些特殊的类来创建响应式设计:
- .pure-u- *:用于设置容器以占用任何设备上所需的空间。
- .pure-u-sm- *:用于设置容器以占用宽度为?的设备上的所需空间。 568px。
- .pure-u-md- *:用于设置容器以占用宽度为?的设备上的所需空间。 768像素。
- .pure-u-lg- *:用于设置容器以占用宽度为?的设备上的所需空间。 1024px。
- .pure-u-xl- *:用于设置容器以占用宽度为?的设备上的所需空间。 1280像素。
PURE.CSS通过两种类型的类提供了Pure Grid的概念:
- pure-g:网格类
- pure-u- *:单位类
以下是使用Pure.CSS网格的规则:
- 单位宽度以分数为单位。例如, Pureu-1-2表示宽度为1/2或50%, Pureu-2-5表示宽度为2/5或40%, 依此类推。
- Pure Grid的子级(具有pure-g类的元素)必须使用pure-u或pure-u- *类名。
- 所有内容都应该是网格单元的一部分, 以便正确呈现。
Pure优雅, 简单且轻巧。使用起来非常容易。使用Pure CSS的最大优点是它具有可扩展性。你只需在自己的CSS中添加一些样式, 然后更改网站外观即可。
9)什么是Pure.CSS的本地安装?
本地安装是在网站目录中下载pure-min.css文件的过程, 例如/ css, 然后在HTML页面中使用CSS文件。
例:
<
html>
<
head>
<
title>
The PURE.CSS Example<
/title>
<
meta name="viewport" content="width=device-width, initial-scale=1">
<
link rel="stylesheet" href="http://www.srcmini.com/pure-min.css">
<
style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
border-top: 1px solid yellow;
border-bottom: 1px solid red;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
<
/style>
<
/head>
<
body>
<
div class="grids-example">
<
div class="pure-g">
<
div class="pure-u-1-3">
<
p>
First Column<
/p>
<
/div>
<
div class="pure-u-1-3">
<
p>
Second Column<
/p>
<
/div>
<
div class="pure-u-1-3">
<
p>
Third Column<
/p>
<
/div>
<
/div>
<
/div>
<
/body>
<
/html>
10)如何使用基于CDN的Pure.CSS版本?
你可以直接从Content Delivery Network(CDN)将Pure.CSS文件包含到HTML代码中。 yui.yahooapis.com提供最新版本的内容。
例:
<
html>
<
head>
<
title>
The PURE.CSS Example<
/title>
<
meta name="viewport" content="width=device-width, initial-scale=1">
<
link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<
style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
border-top: 1px solid yellow;
border-bottom: 1px solid red;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
<
/style>
<
/head>
<
body>
<
div class="grids-example">
<
div class="pure-g">
<
div class="pure-u-1-3">
<
p>
First Column<
/p>
<
/div>
<
div class="pure-u-1-3">
<
p>
Second Column<
/p>
<
/div>
<
div class="pure-u-1-3">
<
p>
Third Column<
/p>
<
/div>
<
/div>
<
/div>
<
/body>
<
/html>
11)什么是Pure.CSS菜单?
Pure.CSS中有两种菜单类型:
- 垂直菜单
- 水平菜单
欲了解更多信息, 请点击此处
12)什么是Pure.CSS形式?
【推荐!Pure.CSS常见面试题和答案合集】Pure.CSS具有非常简单且响应迅速的CSS来设计表单。你可以使用Pure.CSS创建不同类型的表单。以下是一些类名的列表:
- pure-form:指定紧凑的内联形式。
- pure-form-stacked:表示堆叠形式, 其输入元素位于标签下方。与Pure格式一起使用。
- pure-form-aligned:它表示一个对齐的表单, 其中输入元素位于标签下方。与Pure格式一起使用。
- pure-input-rounded:用于显示带有圆角的表单控件
- Pure按钮:用于美化按钮。
- pure-checkbox:用于美化复选框。
- pure-radio:用于美化收音机。
推荐阅读
- 面试宝典!SVG面试题和答案汇集
- 史上最全!PHP面试题和知识点汇总
- 开源技术分享(Linux 内核参数 swappiness细解)
- android自定义gradle插件之当前项目使用
- Android viewpager + fragment取消预加载
- Ubuntu18.04下的 Android Studio 3.1.2
- APP有奖邀请技术三大方案
- Jmeter 抓app包 抓到一半不好用了
- 安装 Genymotion 模拟器及 Appium