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

自适应CSS模块，Pure.css让Web样式更加灵活

liuian 2025-01-02 17:46 48 浏览

介绍

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以及官方提供的详细内容和使用指南！

    相关推荐

    Python 中 必须掌握的 20 个核心函数——items()函数

    items()是Python字典对象的方法，用于返回字典中所有键值对的视图对象。它提供了对字典完整内容的高效访问和操作。一、items()的基本用法1.1方法签名dict.items()返回：字典键...

    Python字典:键值对的艺术_python字典的用法

    字典(dict)是Python的核心数据结构之一，与列表同属可变序列，但采用完全不同的存储方式：定义方式：使用花括号{}（列表使用方括号[]）存储结构：以键值对(key-valuepair)...

    python字典中如何添加键值对_python怎么往字典里添加键

    添加键值对首先定义一个空字典1>>>dic={}直接对字典中不存在的key进行赋值来添加123>>>dic['name']='zhangsan'>>...

    Spring Boot @ConfigurationProperties 详解与 Nacos 配置中心集成

    本文将深入探讨SpringBoot中@ConfigurationProperties的详细用法，包括其语法细节、类型转换、复合类型处理、数据校验，以及与Nacos配置中心的集成方式。通过...

    Dubbo概述_dubbo工作原理和机制

    什么是RPCRPC是RemoteProcedureCall的缩写翻译为:远程过程调用目标是为了实现两台(多台)计算机\服务器,互相调用方法\通信的解决方案RPC的概念主要定义了两部分内容序列化协...

    再见 Feign!推荐一款微服务间调用神器，跟 SpringCloud 绝配

    在微服务项目中，如果我们想实现服务间调用，一般会选择Feign。之前介绍过一款HTTP客户端工具Retrofit，配合SpringBoot非常好用！其实Retrofit不仅支持普通的HTTP调用，还能...

    SpringGateway 网关_spring 网关的作用

    奈非框架简介早期(2020年前)奈非提供的微服务组件和框架受到了很多开发者的欢迎这些框架和SpringCloudAlibaba的对应关系我们要知道Nacos对应Eureka都是注册中心Dubbo...

    Sentinel 限流详解-Sentinel与OpenFeign服务熔断那些事

    SentinelResource我们使用到过这个注解，我们需要了解的是其中两个属性：value：资源名称，必填且唯一。@SentinelResource(value="test/get&#...

    超详细MPLS学习指南 手把手带你实现IP与二层网络的无缝融合

    大家晚上好，我是小老虎，今天的文章有点长，但是都是干货，耐心看下去，不会让你失望的哦！随着ASIC技术的发展，路由查找速度已经不是阻碍网络发展的瓶颈。这使得MPLS在提高转发速度方面不再具备明显的优势...

    Cisco 尝试配置MPLS-V.P.N从开始到放弃

    本人第一次接触这个协议，所以打算分两篇进行学习和记录，本文枯燥预警，配置命令在下一篇全为定义，其也是算我毕业设计的一个小挑战。新概念重点备注为什么选择该协议IPSecVPN都属于传统VPN传统VP...

    MFC -- 网络通信编程_mfc编程教程

    要买东西的时候，店家常常说，你要是真心买的，还能给你便宜，你看真心就是不怎么值钱。。。----网易云热评一、创建服务端1、新建一个控制台应用程序，添加源文件server2、添加代码框架#includ...

    35W快充?2TB存储?iPhone14爆料汇总，不要再漫天吹15了

    iPhone14都还没发布，关于iPhone15的消息却已经漫天飞，故加紧整理了关于iPhone14目前已爆出的消息。本文将从机型、刘海、屏幕、存储、芯片、拍照、信号、机身材质、充电口、快充、配色、价...

    SpringCloud Alibaba(四) - Nacos 配置中心

    1、环境搭建1.1依赖<!--nacos注册中心注解@EnableDiscoveryClient--><dependency><groupI...

    Nacos注册中心最全详解(图文全面总结)

    Nacos注册中心是微服务的核心组件，也是大厂经常考察的内容，下面我就重点来详解Nacos注册中心@mikechen本篇已收于mikechen原创超30万字《阿里架构师进阶专题合集》里面。微服务注册中...

    网络技术领域端口号备忘录，受益匪浅 !

    你好，这里是网络技术联盟站，我是瑞哥。网络端口是计算机网络中用于区分不同应用程序和服务的标识符。每个端口号都是一个16位的数字，范围从0到65535。网络端口的主要功能是帮助网络设备（如计算机和服务器...

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