📌  相关文章
📜  Pure.CSS输入(1)

📅  最后修改于: 2023-12-03 15:03:53.629000             🧑  作者: Mango

Pure.CSS介绍

Pure.CSS是一个基于响应式设计的轻量级CSS框架，提供了灵活的网格系统，美观的基础样式和易于定制的组件，使开发响应式网站变得简单和快速。它专注于提供基本的CSS样式，避免过重载入和阻塞浏览器渲染。

Pure.CSS是Yahoo!推出的，它提供了设计样式表、排版、JS组件、响应式网格等一系列封装好的代码，可以使我们在开发过程中非常方便、快捷地实现对应的效果，帮助我们快速构建出符合现代化网站的特点。

以下是Pure.CSS的一些优点：

  • 轻量级：Pure.CSS是一个轻量级的框架，尺寸只有4KB左右，使得页面加载更快。
  • 简单易用：Pure.CSS拥有极其简洁的代码，使用起来非常方便，并且提供了大量的预定义CSS类。
  • 响应式设计：Pure.CSS提供了响应式的基础样式和灵活的网格系统，使得网站可以自适应各种设备的大小屏幕。
  • 可定制性：Pure.CSS提供了一系列易于定制的组件，用户可以根据自己的需要进行修改。
  • 跨浏览器兼容性：Pure.CSS经过了多种浏览器的测试，可以兼容所有现代主流浏览器。
如何开始使用Pure.CSS

Pure.CSS提供了多种使用方法：

1. CDN引用

您可以通过以下方式，使用CDN引用Pure.CSS：

<!-- Minified version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.0.3/dist/pure-min.css">

<!-- Un-minified version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.0.3/dist/pure.css">

通过以上方法引用Pure.CSS，您可以直接在HTML文件中使用Pure.CSS提供的CSS类。

2. 下载Pure.CSS

您可以通过以下方式，下载并使用Pure.CSS：

  1. 访问Pure.CSS的官方网站 https://purecss.io/。
  2. 点击“Download”按钮下载压缩包。
  3. 解压下载的文件夹，将其中的CSS文件和JS文件复制到您的项目中。
  4. 在HTML文件中使用Pure.CSS提供的CSS类。

通过以上方法引用Pure.CSS，您也可以直接在HTML文件中使用Pure.CSS提供的CSS类。

Pure.CSS的网格系统

Pure.CSS提供了灵活的网格系统，可以帮助您轻松构建响应式网站。以下是Pure.CSS的网格系统示意图：

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|---|---|---|---|---|---|---|---|---|----|----|----|
|   |   |   |   |   |   |   |   |   |    |    |    |

Pure.CSS将页面水平分为12个等宽的列，用户可以根据自己的需求组合这些列，创建出自己想要的布局。

使用Pure.CSS的网格系统非常简单，只需要使用pure-u-*类即可，其中“*”代表使用几个列，如pure-u-1-2表示使用2个列，pure-u-1-3表示使用3个列。

以下是Pure.CSS的网格系统的示例代码：

<div class="pure-g">
    <div class="pure-u-1-2">.pure-u-1-2</div>
    <div class="pure-u-1-2">.pure-u-1-2</div>
</div>

<div class="pure-g">
    <div class="pure-u-1-3">.pure-u-1-3</div>
    <div class="pure-u-1-3">.pure-u-1-3</div>
    <div class="pure-u-1-3">.pure-u-1-3</div>
</div>

以上代码会创建出两个网格系统，每个网格系统都有几列网格。您可以根据自己的需求来修改这些代码。

Pure.CSS的组件

Pure.CSS提供了各种易于定制的组件，可以帮助您快速创建各种UI元素。以下是Pure.CSS提供的一些组件：

  • Buttons：Pure.CSS提供了美观的按钮样式，您可以根据自己的需求定制不同的按钮类型。
  • Forms：Pure.CSS提供了各种表单元素的样式，如输入框、文本域、下拉框等等。
  • Tables：Pure.CSS提供了易于阅读的表格样式。
  • Menus：Pure.CSS提供了多种菜单样式，包括横向菜单、竖向菜单等等。
  • Icons：Pure.CSS提供了多种图标样式，可以轻松创建各种图标。
Pure.CSS的例子

以下是一个使用Pure.CSS构建的网站示例：

<!DOCTYPE html>
<html>
<head>
    <title>Pure.CSS Example</title>

    <!-- Include the Pure CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.0.3/dist/pure-min.css">

    <!-- Custom Style -->
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Navigation Menu -->
    <div class="pure-menu pure-menu-horizontal">
        <a href="#" class="pure-menu-heading pure-menu-link">Pure.CSS Example</a>

        <ul class="pure-menu-list">
            <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
        </ul>
    </div>

    <!-- Main Content -->
    <div class="pure-g">
        <div class="pure-u-1-3">
            <h2>Column 1</h2>
            <p>This is column 1.</p>
        </div>
        <div class="pure-u-1-3">
            <h2>Column 2</h2>
            <p>This is column 2.</p>
        </div>
        <div class="pure-u-1-3">
            <h2>Column 3</h2>
            <p>This is column 3.</p>
        </div>
    </div>

    <!-- Footer -->
    <div class="pure-g">
        <div class="pure-u-1">
            <p>&copy; Pure.CSS Example.</p>
        </div>
    </div>

</body>
</html>

以上代码会创建出一个带有导航菜单、3列网格和页脚的网站页面。

总结

Pure.CSS是一个轻量级的CSS框架，提供了灵活的网格系统和易于定制的组件，可以轻松创建美观的响应式网站。使用Pure.CSS非常简单，只需要引入CSS文件，并使用预定义的CSS类即可。如果您正在寻找一种轻量级而简单易用的CSS框架，那么Pure.CSS绝对是一个不错的选择。