当前位置: 首页 > 工具软件 > Pure.css > 使用案例 >

pure.css入门

邢同
2023-12-01

引入

先添加viewportmeta元素,保证移动端宽度与缩放;基于normalize.css:<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/base-min.css">

  1. CDN:<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">
  2. 下载:‘pure.css’ github

栅格系统

  1. .pure-g创建行,.pure-u-*-*创建列;
  2. 示例:pure-u-1-2宽度1/2,即50%;pure-u-1-4宽度1/4,即25%;
  3. 默认支持:5列和24列;扩展自定义列重新生成栅格
  4. 媒体查询需单独引入:grids-responsive.css,分sm/md/lg/xl四种响应:.pure-u-sm/md/lg/xl-*-*;从最小格式向上响应,.pure-u-*最小,逐级向上响应;
// 引入响应式媒体查询
<!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
<!--<![endif]-->
  1. 默认font-family:sans-sarif
  2. 设置‘列’的padding和border:两种方法
    • 内部包一层div后设置;
    • 设置box-sizing:border-box;,即可直接对‘列’设置;
    //pure默认content-box,修改后老浏览器不支持border-box
    .pure-g > div{
    	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
     }
    

基础

  • 隐藏hidden属性/.hidden类:{display:none !important;}
  • 响应式图片:.pure-img
  • 表单:
    - form.pure-form单行表单,
    - form.pure-form .pure-form-stacked堆叠式,
    - form.pure-form .pure-form-aligneddiv.pure-control-group左右label/input对齐式表单(小屏响应堆叠)
    - fieldset.pure-group表单控件分组,即按钮/控件组,(内部只可以有控件元素)
  • 表单控件input
    - input.pure-input-*-*栅格系统类似,设置大小,嵌套栅格包裹.pure-input-1亦可
    - 必填:required属性,获焦后红色边框
    - 禁用:disabled属性
    - 只读:readonly属性
    - 圆角:.pure-input-rounded
  • 表单控件input:checkbox/radio
    - 复选框:label.pure-checkbox包裹复选框,整理排列样式
    - 单选:label.pure-radio包裹单选框,整理排列样式
  • 按钮a/button
    - 默认:a/button.pure-button
    - 禁用:.pure-button.pure-button-disabled
    - 激活:.pure-button.pure-button-active
    - 样式:.pure-button.pure-button-primary蓝色,其他的样式自定义class添加
    - 添加图标:自定义使用框架,如FontAwesome
  • 表格table
    - 默认:table.pure-table,添加padding,border,突出表头,竖边框
    - 有边框:.pure-table.pure-table-bordered,横竖边框
    - 水平边框:.pure-table.pure-table-horizontal,水平边框
    - 斑马纹:table.pure-table.pure-table-striped,隔行添加tr.pure-table-odd,结合CSS3伪类使用:nth-child(odd)

菜单

  • 纵向菜单:默认是垂直的,div.pure-menu>(span.pure-menu-heading+ul.pure-menu-list>li.pure-menu-item>a.pure-menu-link)
  • 横向菜单:添加div.pure-menu.pure-menu-horizontal>...
  • 选中:li.pure-menu-item.pure-menu-selected
  • 禁用:li.pure-menu-item.pure-menu-disabled,不继承:hover样式
  • dropdown子菜单:li.pure-menu-item.pure-menu-has-children.pure-menu-allow-hover>(a.pure-menu-link+ul.pure-menu-children>li.pure-menu-item>a.pure-menu-link),可嵌套
  • 可滚动菜单:div.pure-menu.pure-menu-scrollable>...,不支持dropdown

所有的模块分为响应式和非响应式两种,并有单独模块包,扩展自定义Pure+Bootstrap+JavaScript

 类似资料: