Pure Css简单小结

来源：互联网发布：淘宝宝贝发布时间编辑：程序博客网时间：2024/05/21 07:06

   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         //有滚动条的水平的菜单

1 0