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

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

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

介绍

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

    相关推荐

    MySQL慢查询优化:从explain到索引，DBA手把手教你提升10倍性能

    数据库性能是应用系统的生命线，而慢查询就像隐藏在系统中的定时炸弹。某电商平台曾因一条未优化的SQL导致订单系统响应时间从200ms飙升至8秒，最终引发用户投诉和订单流失。今天我们就来系统学习MySQL...

    一文读懂SQL五大操作类别(DDL/DML/DQL/DCL/TCL)的基础语法

    在SQL中，DDL、DML、DQL、DCL、TCL是按操作类型划分的五大核心语言类别，缩写及简介如下：DDL（DataDefinitionLanguage，数据定义语言）：用于定义和管理数据库结构...

    闲来无事，学学Mysql增、删，改，查

    Mysql增、删，改，查1“增”——添加数据1.1为表中所有字段添加数据1.1.1INSERT语句中指定所有字段名语法：INSERTINTO表名（字段名1，字段名2，…）VALUES（值1...

    数据库:MySQL 高性能优化规范建议

    数据库命令规范所有数据库对象名称必须使用小写字母并用下划线分割所有数据库对象名称禁止使用MySQL保留关键字（如果表名中包含关键字查询时，需要将其用单引号括起来）数据库对象的命名要能做到见名识意，...

    下载工具合集_下载工具手机版

    迅雷，在国内的下载地位还是很难撼动的，所需要用到的地方还挺多。缺点就是不开会员，软件会限速。EagleGet，全能下载管理器，支持HTTP(S)FTPMMSRTSP协议，也可以使用浏览器扩展检测...

    mediamtx v1.15.2 更新详解:功能优化与问题修复

    mediamtxv1.15.2已于2025年10月14日发布，本次更新在功能、性能优化以及问题修复方面带来了多项改进，同时也更新了部分依赖库并提升了安全性。以下为本次更新的详细内容：...

    声学成像仪:泄露监测 “雷达” 方案开启精准防控

    声学成像仪背景将声像图与阵列上配装的摄像实所拍的视频图像以透明的方式叠合在一起，就形成了可直观分析被测物产生状态。这种利用声学、电子学和信息处理等技术，变换成人眼可见的图像的技术可以帮助人们直观地认识...

    最稳存储方案:两种方法将摄像头接入威联通Qu405，录像不再丢失

    今年我家至少被4位邻居敲门，就是为了查监控！！！原因是小区内部监控很早就停止维护了，半夜老有小黄毛掰车门偷东西，还有闲的没事划车的，车主损失不小，我家很早就配备监控了，人来亮灯有一定威慑力，不过监控设...

    离岗检测算法_离岗检查内容

    一、研发背景如今社会许多岗位是严禁随意脱离岗位的，如塔台、保安室、监狱狱警监控室等等，因为此类行为可能会引起重大事故，而此类岗位监督管理又有一定困难，因此促生了智能视频识别系统的出现。二、产品概述及工...

    消防安全通道占用检测报警系统_消防安全通道占用检测报警系统的作用

    一、产品概述科缔欧消防安全通道占用检测报警系统，是创新行业智能监督管理方式、完善监管部门动态监控及预警预报体系的信息化手段，是实现平台远程监控由“人为监控”向“智能监控”转变的必要手段。产品致力于设...

    外出住酒店、民宿如何使用手机检测隐藏的监控摄像头

    最近，一个家庭在他们的民宿收到了一个大惊喜：客厅里有一个伪装成烟雾探测器的隐藏摄像头，监视着他们的一举一动。隐藏摄像头的存在如果您住在酒店或民宿，隐藏摄像头不应再是您的担忧。对于民宿，房东应报告所有可...

    基于Tilera众核平台的流媒体流量发生系统的设计

    曾帅，高宗彬，赵国锋（重庆邮电大学通信与信息工程学院，重庆400065）摘要：设计了一种基于Tilera众核平台高强度的流媒体流量发生系统架构，其主要包括：系统界面管理模块、服务承载模块和流媒体...

    使用ffmpeg将rtsp流转流实现h5端播放

    1.主要实现rtsp转tcp协议视频流播放ffmpeg下载安装（公认业界视频处理大佬）a、官网地址：www.ffmpeg.org/b、gitHub：github.com/FFmpeg/FFmp…c、推...

    将摄像头视频流从Rtsp协议转为websocket协议

    写在前面很多通过摄像头拿到的视频流格式都是Rtsp协议的，比如：海康威视摄像头。在现代的浏览器中，已经不支持直接播放Rtsp视频流，而且，海康威视提供的本身的webSdk3.3.0视频插件有很多...

    华芸科技推出安全监控中心2.1 Beta测试版

    全球独家支持hdmi在线实时监看摄像机画面，具单一、循环或同时监看四频道视频影像，可透过华芸专用红外线遥控器、airemote或是键盘鼠标进行操作，提供摄像机频道增购服务，满足用户弹性扩增频道需...

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