百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

一组小型的自适应CSS模块，可以在每个Web项目中使用——Pure

liuian 2025-01-02 17:47 18 浏览

介绍

Pure.css是一组小型的自适应CSS模块，可以在每个Web项目中使用。Pure以Normalize.css为基础，并提供native HTML元素以及最常见的UI组件的布局和样式，考虑到移动设备，Pure具有开箱即用的响应能力，因此元素在所有屏幕尺寸上都看起来不错。

<link rel="stylesheet" href="./pure-min.css"  />

PS：Normalize.css使浏览器更一致地渲染所有元素，并符合现代标准。它只针对需要规范化的样式。



Github

https://github.com/pure-css/pure

相关特性

  • 可以根据需求进行定制的响应式网格。
  • 建立在Normalize.css上的坚实基础，可解决跨浏览器的兼容性问题。
  • 与<a>和<button>元素一起使用的样式一致的按钮。
  • 垂直和水平菜单的样式，包括对下拉菜单的支持。
  • 表格对齐方式在所有屏幕尺寸上看起来都很好。
  • 各种常见的表格样式。
  • 极简的外观，易于定制。
  • 默认情况下是响应式的，具有非响应式配置选项。
  • 极小的体积：缩小4.5KB + gzip。

    • 兼容性

  • IE 8+
  • Latest Stable: Firefox, Chrome, Safari
  • iOS 6-8
  • Android 4.4+

    • 布局

    通过使用Grid，Menu等，可以轻松创建适用于所有屏幕尺寸的精美响应式布局。




    Pure的设计目标是可以在每个Web项目中使用它

    定制化

    与其他框架不同，Pure的设计不受限制，最小且扁平。添加新的CSS规则比覆盖现有规则要容易得多。通过添加几行CSS，可以自定义Pure的外观以与你的Web项目一起使用。




    表单

    以下创建默认的内联表单，将pure-form类名添加到任何<form>元素。如下

    <form class="pure-form">
    <fieldset>
        <legend>A compact inline form</legend>

        <input type="email" placeholder="Email">
        <input type="password" placeholder="Password">

        <label for="remember">
            <input id="remember" type="checkbox"> Remember me
        </label>

        <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </fieldset>
</form>




    还有其他常见类型表单，本文不过多介绍

    按钮


    表格

    要设置HTML表的样式，请添加pure-table类名。此类为表元素添加了填充和边框，并强调了标题。





    菜单

    • 垂直菜单

    默认情况下，菜单是垂直的。


    • 水平菜单

    要创建水平菜单，请添加pure-menu-horizontal类名称。


    总结

    本文只介绍了部分有关于Pure的内容，详细的介绍可以Github以及官方提供的详细内容和使用指南！

    相关推荐

    第7章 Linux磁盘管理—磁盘格式化和挂载

    提醒：本文为合集文章，后续会持续更新！关注我，每日提升！7.3　格式化磁盘分区磁盘分区虽然分好区了，但暂时还不能用，我们还须对每一个分区进行格式化。所谓格式化，其实就是安装文件系统，Windows下的...

    Linux三剑客之sed命令详解，小白也能看得懂!

    sed全称为StreamEDitor，行编辑器，同时也是一种流编辑器，它一次处理一行内容。处理时，把当前处理的行存储在临时缓冲区中，称为“模式空间”(patternspace)，接着用sed命令处...

    Rust语言介绍，新崛起的编程语言

    Rust是一门系统编程语言，由于其独特的特点和性能，近年来备受开发者关注，是近几年发展最迅猛的编程语言之一。据StackOverflow开发者调查显示，Rust连续第八年被评为最受喜爱的编程语言，...

    What does &quot; 2&gt;&amp;1 &quot; mean?

    技术背景在Linux或Unix系统中，程序通常会将输出发送到两个地方：标准输出（stdout）和标准错误（stderr）。标准输出用于正常的程序输出，而标准错误则用于输出程序运行过程中产生的错误信息。...

    玩转命令行:7 个高效 Linux 命令技巧，助你事半功倍!

    日常的运维、开发、测试过程中，Linux命令行无疑是我们最常接触的界面之一。掌握一些不为人知但极具实用价值的命令技巧，不仅能大幅提升你的工作效率，更能在关键时刻帮你快速定位问题、批量处理任务、自动化...

    作为测试人，如何优雅地查看Log日志?

    作为一名测试工程师，测试工作中和Linux打交道的地方有很多。比如查看日志、定位Bug、修改文件、部署环境等。项目部署在Linux上，如果某个功能发生错误，就需要我们去排查出错的原因，所以熟练地掌握查...

    Linux新手必备:20个高效命令轻松掌握!

    Linux基本命令使用指南在现代计算机操作系统中，Linux因其开放性、灵活性和强大的功能，广泛应用于服务器和开发环境中。作为技术人员，掌握Linux的基本命令是非常重要的。在本文中，我们将重点介绍2...

    如何在 Linux 中有效使用 history 命令?

    在Linux中，每当你在终端输入一条命令并按下回车，这条命令就会被默默记录下来。而history命令的作用，就是让你回顾这些操作的足迹。简单来说，它是一个“命令行日记本”，默认存储在用户主目录...

    Linux/Unix 系统中find命令用法

    find是Linux/Unix系统中一个非常强大且灵活的命令，用于在目录层次结构中查找文件和目录。它允许你根据各种条件（如名称、类型、大小、权限、修改时间等）来搜索，并对找到的结果执行操作。基本...

    阿里云国际站:如何通过日志分析排查故障?

    本文由【云老大】TG@yunlaoda360撰写一、日志收集确定日志位置：应用程序日志：通常位于/var/log/或应用程序的安装目录下，例如Nginx的日志位于/var/log/ngi...

    Linux History命令:如何显示命令执行的日期和时间

    在Linux系统中，history命令是一个简单却强大的工具，它允许用户查看和重用之前执行过的命令。然而，默认情况下，history命令的输出仅显示命令的序号和内容，并不包含命令执行的日期和时间。这对...

    在R语言中使用正则表达式

    有时候我们要处理的是非结构化的数据，例如网页或是电邮资料，那么就需要用R来抓取所需的字符串，整理为进一步处理的数据形式。R语言中有一整套可以用来处理字符的函数，在之前的博文中已经有所涉及。但真正的...

    网络安全实战:记一次比较完整的靶机渗透

    0x01信息搜集nmap-sC-sV-p--A10.10.10.123-T4-oAnmap_friendzone访问80端口的http服务只发现了一个域名。0x02DNS区域传输因...

    Java程序员必备的Linux命令

    Java程序员必备的Linux命令作为一名Java开发者，在日常工作中难免会与Linux服务器打交道。熟练掌握一些常用的Linux命令，不仅能提高工作效率，还能让你在团队中显得更加专业。今天，我将带你...

    linux shell 笔记——1

    shell的格式开头#!/bin/bash或者#!/bin/sh开头系统变量：HOME、HOME、HOME、PWD、SHELL、SHELL、SHELL、USER,PATH等等比方：echo$...

    一周热门
    最近发表
    标签列表