码迷,mamicode.com
首页 > Web开发 > 详细

Pure-CSS 使用帮助

时间:2015-02-05 20:00:15      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:

1. CDN
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
 
2. 设置 Viewport
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
3. 完整 HTML5 模板
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
</head>
 
<body>
    <!--
    网页内容
    -->
</body>
</html>
 
4. 隐藏元素
在元素中加入hidden 属性,效果相当于 display: none !important;
<input type="text" name="_csrf" hidden>
 
5. 图片适应视窗大小
在 IMG 标签中加入类 .pure-img
<img class="pure-img" src="...">
 
6. 网格 Grids
网格对象中包含两种样式类:网格类(pure-g)和单元格类(pure-u 或者 pure-u-*)
单元格的大小由类命指定, 如:pure-u-1-2 表示 50% 宽度, pure-u-1-5 表示 20% 宽度
示例:
<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>
 
7. 响应式网格 Responsive Grids
PureCSS默认没有添加响应式网格框架,需要时请手动添加一下内容到 head 标签中
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<!--<![endif]-->
 
对比普通网格与响应式网格
普通:
<div class="pure-g">
    <div class="pure-u-1-3"> ... </div>
    <div class="pure-u-1-3"> ... </div>
    <div class="pure-u-1-3"> ... </div>
</div>
 
响应式
<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>
 
在大屏幕里,普通 与 响应式 的单元格宽度均是 33.3%,但在小屏幕中 响应式 的单元格宽度将变为 100%
默认的媒体大小定义
KeyCSS Media QueryAppliesClassname
None None Always .pure-u-*
sm @media screen and (min-width: 35.5em) 568px .pure-u-sm-*
md @media screen and (min-width: 48em) 768px .pure-u-md-*
lg @media screen and (min-width: 64em) 1024px .pure-u-lg-*
xl @media screen and (min-width: 80em) 1280px .pure-u-xl-*
注:默认情况下 1em = 16px
 
在表格中应用边框与间距
<style>
    .pure-g > div {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .l-box {
        padding: 1em;
    }
</style>
<div class="pure-g">
    <div class="pure-u-1-2 l-box"> ... </div>
    <div class="pure-u-1-2 l-box"> ... </div>
</div>
 
注:使用 box-sizing 可以防止边框占用像素,扰乱布局
 
为 了更好的兼容性,网格默认对 <html>, <button>, <input>, <select>, 和 <textarea> 使用了 font-family: sans-serif; 如需要修改,可添加如下样式:
<style>
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    /* 自定义字体 */
    font-family: Georgia, Times, "Times New Roman", serif;
}
</style>
 
8. 表单 Form
在 form 标签中添加 .pure-form 类,可生成单行表单(inline)
效果图:
技术分享
代码:
<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>
 
在 form 标签中添加 .pure-form-stacked 类,可生成栈型表单
效果图:
技术分享
代码:
<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>A Stacked Form</legend>
 
        <label for="email">Email</label>
        <input id="email" type="email" placeholder="Email">
 
        <label for="password">Password</label>
        <input id="password" type="password" placeholder="Password">
 
        <label for="state">State</label>
        <select id="state">
            <option>AL</option>
            <option>CA</option>
            <option>IL</option>
        </select>
 
        <label for="remember" class="pure-checkbox">
            <input id="remember" type="checkbox"> Remember me
        </label>
 
        <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </fieldset>
</form>
在 form 标签中添加 .pure-form-aligned 类,可生成排型表单
效果图:
技术分享
代码:
<form class="pure-form pure-form-aligned">
    <fieldset>
        <div class="pure-control-group">
            <label for="name">Username</label>
            <input id="name" type="text" placeholder="Username">
        </div>
 
        <div class="pure-control-group">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password">
        </div>
 
        <div class="pure-control-group">
            <label for="email">Email Address</label>
            <input id="email" type="email" placeholder="Email Address">
        </div>
 
        <div class="pure-control-group">
            <label for="foo">Supercalifragilistic Label</label>
            <input id="foo" type="text" placeholder="Enter something here...">
        </div>
 
        <div class="pure-controls">
            <label for="cb" class="pure-checkbox">
                <input id="cb" type="checkbox"> I‘ve read the terms and conditions
            </label>
 
            <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </div>
    </fieldset>
</form>
 
通过与响应式网格(responsive-grids)结合,可生成多列表单
效果图:
技术分享
代码:
<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>Legend</legend>
 
        <div class="pure-g">
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="first-name">First Name</label>
                <input id="first-name" type="text">
            </div>
 
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="last-name">Last Name</label>
                <input id="last-name" type="text">
            </div>
 
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="email">E-Mail</label>
                <input id="email" type="email" required>
            </div>
 
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="city">City</label>
                <input id="city" type="text">
            </div>
 
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="state">State</label>
                <select id="state" class="pure-input-1-2">
                    <option>AL</option>
                    <option>CA</option>
                    <option>IL</option>
                </select>
            </div>
        </div>
 
        <label for="terms" class="pure-checkbox">
            <input id="terms" type="checkbox"> I‘ve read the terms and conditions
        </label>
 
        <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </fieldset>
</form>
 
通过对 fieldset 增加 .pure-group 类, 可对元素分组
效果图:
技术分享
代码:
<form class="pure-form">
    <fieldset class="pure-group">
        <input type="text" class="pure-input-1-2" placeholder="Username">
        <input type="text" class="pure-input-1-2" placeholder="Password">
        <input type="email" class="pure-input-1-2" placeholder="Email">
    </fieldset>
 
    <fieldset class="pure-group">
        <input type="text" class="pure-input-1-2" placeholder="Another Group">
        <input type="text" class="pure-input-1-2" placeholder="More Stuff">
    </fieldset>
 
    <button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>
控制表单元素大小,可以通过增加 .pure-input-* 类实现,如 pure-input-2-3 代表宽度为 66.6%
 
为输入项增加 required 属性,使其具有必填提示
<input type="email" placeholder="Requires an email" required>
 
为输入项增加 disabled 属性,使其不可用
<input type="text" placeholder="Disabled input here..." disabled>
 
为输入项增加 readonly 属性,使其只读
<input type="text" value="Readonly input here..." readonly>
 
为输入项增加 pure-input-rounded 属性,使其变圆角
<input type="text" class="pure-input-rounded">
 
复选框(checkbox)和单选框(radio),增加 .pure-checkbox 和 .pure-radio,保持其样式整齐
效果图:
技术分享
代码:
<form class="pure-form">
    <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>
 
    <label for="option-three" class="pure-radio">
        <input id="option-three" type="radio" name="optionsRadios" value="option2">
        ..Or this one!
    </label>
</form>

Pure-CSS 使用帮助

标签:

原文地址:http://www.cnblogs.com/booker/p/4275429.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!