Pure Css简单小结

Grids：5/24
       <div class="pure-g">                               //行
           <div class="pure-u-1-3"><p>Thirds</p></div>       //列
           <div class="pure-u-1-3"><p>Thirds</p></div>
           <div class="pure-u-1-3"><p>Thirds</p></div>
       </div>

Forms：
       Default Form               //表单按钮都在一行
       Stacked Form               //表单按钮成一列左对齐
       Aligned Form               //左右居中对齐
       Multi-Column Form (with Pure Grids)   //利用Grids将表单分块
       Grouped Inputs               //分组合并
       Input Sizing               //设置输入框的大小
           <form class="pure-form">
                <input class="pure-input-1" type="text" placeholder=".pure-input-1"><br>
                  <input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br>
               <input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br>
                <input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br>
               <input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br>
            </form>
       Required Inputs            //加判定（邮箱、手机号）
           <form class="pure-form">
                   <input type="email" placeholder="Requires an email" required>
           </form>
       Disabled Inputs                //不能有输入的输入框
           <input type="text" placeholder="Disabled input here..." disabled>
       Read-Only Inputs                //只能读的输入框
           <input type="text" value="Readonly input here..." readonly>
       Rounded Inputs                    //圆形的输入框
           <input type="text" class="pure-input-rounded">
       Checkboxes and Radios           //复选框
           <label for="option-one" class="pure-checkbox">   //正方形的
                      <input id="option-one" type="checkbox" value="">
                       Here's option one.
            </label>

<label for="option-two" class="pure-radio">   //圆形的
                      <input id="option-two" type="radio" name="optionsRadios" value="option1" checked>
                        Here's a radio button. You can choose this one..
            </label>
   Button：
       Default Buttons                   //默认button
           <a class="pure-button" href="#">A Pure Button</a>
           <button class="pure-button">A Pure Button</button>
       Disabled Buttons               //不能用的button
           <a class="pure-button pure-button-disabled" href="#">A Disabled Button</a>
           <button class="pure-button pure-button-disabled">A Disabled Button</button>
       Active Buttons                    //活跃的button 点过之后就没有鼠标放上的特效了
           <a class="pure-button pure-button-active" href="#">An Active Button</a>
           <button class="pure-button pure-button-active">An Active Button</button>
       Primary Buttons                //初始的button 蓝色的
           <a class="pure-button pure-button-primary" href="#">A Primary Button</a>
           <button class="pure-button pure-button-primary">A Primary Button</button>
       Customizing Buttons            //自定义button

<button class="button-success pure-button">Success Button</button>
           //给.button-succes加样式字体颜色（color:white），边框是否圆角（border-radius:4px），背景颜色( background: rgb(28, 184, 65); /*green*/)，文本阴影（text-shadow:0 1px 1px rgba(0, 0, 0, 0.2)）;
       Buttons with different sizes   //按钮大小 button-xsmall button-small pure-button button-large button-xlarge
          <button class="button-small pure-button">Small Button</button>
          .button-small {font-size: 85%;}
   Table：
       Default Table                  //只有外框线和竖线
       Bordered Table                 //所有线都有
       Table with Horizontal Borders   //只有外框线和水平线
       Striped Table                    //条纹表
   Menus：
       Vertical Menu                    //竖的菜单
       Horizontal Menu                 //水平的菜单
       Selected and Disabled Item     //选中和不能点击的菜单
       Dropdown                       //有下拉框的菜单
       Vertical Menu with Submenu        //带子分类的竖直的菜单
       Scrollable Horizontal Menu        //有滚动条的水平的菜单
       Scrollable Vertical Menu         //有滚动条的水平的菜单

Pure Css简单小结相关推荐

使用jQuery和Pure.CSS创建一个可编辑的表格
使用开源组件真的可以容易又快速地为网站和app构建强大的前端元素.在本教程中,我会告诉你如何使用PureCSS和jQuery轻松地创建可编辑的表格. 如果想看教程演示的话,请点击这里查看. 开始你要 ...
CSS 波浪效果动画波浪起伏水波动画 Pure CSS Wave 手把手教你用CSS做出波浪动画
文章目录前言设计思路图例完整代码细节&问题 1. 双伪元素 2.CSS并集选择器 2.position 前言最近在学习前端知识,在做背景的时候想弄一个椭圆的弧形,想到以前网上看 ...
后端基础入门技术栈简单小结（非常简单）
后端基础入门技术栈简单小结(非常简单) 本文章同步更新于: 简书:https://www.jianshu.com/p/c8c6f10850e2 CSDN:https://blog.csdn.net/Z ...
HTML+CSS简单实例（一）
HTML+CSS简单实例(一) 本实例参考https://blog.csdn.net/u010871058/article/details/78511848 目的:实现简单欧莱雅网站. 代码内容: & ...
网站开发之DIV+CSS简单布局网站入门篇（五）
这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页,通常将网站划分为顶部(Logo.导航条).中部(页面主要内容.左右栏目).底部(制作方介绍.超链接).这是非常基础的一篇引入性文章,采用案 ...
html边框有箭头,css简单实现带箭头的边框
css简单实现带箭头的边框普通边框 .border { width: 100px; height: 50px; border: 1px solid red; } 实现由四个三角形组成的正方形 .tr ...
css定位小结 1216
css定位小结 1216 定位的分类 static relative absolute fixed static 标准的默认的默认的定位,没有偏移效果除了它外的所有其它定位,都会具有偏移的能力 ...
html背景只向x轴扩散,有趣的css—简单的下雨效果2.0版
有趣的css-简单的下雨效果2.0版推荐原创 Fatman_2021-05-18 13:37:36©著作权文章标签 css 阅读数 1119 ©著作权归作者所有:来自51CTO博客作者Fatma ...
[SCSS] Pure CSS for multiline truncation with ellipsis
1. Pure CSS 2. Responsive 3. No need to recalculate on resize or font's load event 4. Cross browser ...

Pure Css简单小结

Pure Css简单小结相关推荐

最新文章

热门文章