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

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

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

介绍

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

    相关推荐

    Optional是个好东西，如果用错了就太可惜了

    原文出处：https://xie.infoq.cn/article/e3d1f0f4f095397c44812a5be我们都知道，在Java8新增了一个类-Optional，主要是用来解决程...

    IDEA建议:不要在字段上使用@Autowire了!

    在使用IDEA写Spring相关的项目的时候，在字段上使用@Autowired注解时，总是会有一个波浪线提示：Fieldinjectionisnotrecommended.纳尼？我天天用，咋...

    Spring源码|Spring实例Bean的方法

    Spring实例Bean的方法，在AbstractAutowireCapableBeanFactory中的protectedBeanWrappercreateBeanInstance(String...

    Spring技巧:深入研究Java 14和SpringBoot

    在本期文章中，我们将介绍Java14中的新特性及其在构建基于SpringBoot的应用程序中的应用。开始，我们需要使用Java的最新版本，也是最棒的版本，Java14，它现在还没有发布。预计将于2...

    Java开发200+个学习知识路线-史上最全(框架篇)

    1.Spring框架深入SpringIOC容器：BeanFactory与ApplicationContextBean生命周期：实例化、属性填充、初始化、销毁依赖注入方式：构造器注入、Setter注...

    年末将至，Java 开发者必须了解的 15 个Java 顶级开源项目

    专注于Java领域优质技术，欢迎关注作者：SnailClimbStar的数量统计于2019-12-29。1.JavaGuideGuide哥大三开始维护的，目前算是纯Java类型项目中Sta...

    字节跨平台框架 Lynx 开源:一个 Web 开发者的原生体验

    最近各大厂都在开源自己的跨平台框架，前脚腾讯刚宣布计划四月开源基于Kotlin的跨平台框架「Kuikly」，后脚字节跳动旧开源了他们的跨平台框架「Lynx」，如果说Kuikly是一个面向...

    我要狠狠的反驳“公司禁止使用Lombok”的观点

    经常在其它各个地方在说公司禁止使用Lombok，我一直不明白为什么不让用，今天看到一篇文章列举了一下“缺点”，这里我只想狠狠地反驳，看到列举的理由我竟无言以对。原文如下：下面，结合我自己使用Lomb...

    SpringBoot Lombok使用详解:从入门到精通(注解最全)

    一、Lombok概述与基础使用1.1Lombok是什么Lombok是一个Java库，它通过注解的方式自动生成Java代码（如getter、setter、toString等），从而减少样板代码的编写，...

    Java 8之后的那些新特性(六):记录类 Record Class

    Java是一门面向对象的语言，而对于面向对象的语言中，一个众所周知的概念就是，对象是包含属性与行为的。比如HR系统中都会有雇员的概念，那雇员会有姓名，ID身份，性别等，这些我们称之为属性；而雇员同时肯...

    为什么大厂要求安卓开发者掌握Kotlin和Jetpack?优雅草卓伊凡

    为什么大厂要求安卓开发者掌握Kotlin和Jetpack？深度解析现代Android开发生态优雅草卓伊凡一、Kotlin：Android开发的现代语言选择1.1Kotlin是什么？Kotlin是由...

    Kotlin这5招太绝了!码农秒变优雅艺术家!

    Kotlin因其简洁性、空安全性和与Java的无缝互操作性而备受喜爱。虽然许多开发者熟悉协程、扩展函数和数据类等特性，但还有一些鲜为人知的特性可以让你的代码从仅仅能用变得真正优雅且异常简洁。让我们来看...

    自行部署一款免费高颜值的IT资产管理系统-咖啡壶chemex

    在运维时，ICT资产太多怎么办，还是用excel表格来管理？效率太低，也不好多人使用。在几个IT资产管理系统中选择比较中，最终在Snipe-IT和chemex间选择了chemex咖啡壶。Snip...

    PHP对接百度语音识别技术（php对接百度语音识别技术实验报告）

    引言在目前的各种应用场景中，语音识别技术已经越来越常用，并且其应用场景正在不断扩大。百度提供的语音识别服务允许用户通过简单的接口调用，将语音内容转换为文本。本文将通过PHP语言集成百度的语音识别服务，...

    知识付费系统功能全解析（知识付费项目怎么样）

    开发知识付费系统需包含核心功能模块，确保内容变现、用户体验及运营管理需求。以下是完整功能架构：一、用户端功能注册登录：手机号/邮箱注册，第三方登录（微信、QQ）内容浏览：分类展示课程、文章、音频等付费...

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