pure.css 学习记录

Posted 明天后浪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了pure.css 学习记录相关的知识,希望对你有一定的参考价值。

兼容性记录:

  • IE 8+
  • Latest Stable: Firefox, Chrome, Safari
  • ios 6-8
  • android 4.x
处理兼容性

<!--[if lte IE 8]> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css"> <![endif]--> <!--[if gt IE 8]><!--> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css"> <!--<![endif]-->
处理宽度不同的屏幕的css引用不同
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-*
 

 1.

<div class="pure-g">
    <div class="pure-u-1-3"><p>Thirds</p></div>    // 可以写为 pure-u-2-3  pure-u-1-10  分别代表的意思是 3份中占2份,和 10份中占一份的宽度,是等宽的
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
</div

2.表格

<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 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>

3.按钮
<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>


<a class="pure-button pure-button-disabled" href="#">A Disabled Button</a>
<button class="pure-button pure-button-disabled">A Disabled Button</button>


<a class="pure-button pure-button-active" href="#">An Active Button</a>
<button class="pure-button pure-button-active">An Active Button</button>
还有状态按钮
button-success button-error button-warn 等
4.表格
<table class="pure-table"></table> 是只带外框内部不带边框的table
<table class="pure-table pure-table-bordered"></table>  带外边框和内边框的
<table class="pure-table pure-table-horizontal">只带外框和横框线的
<tr class="pure-table-odd"> 是带有背景色的
5.菜单
<style>
.custom-restricted-width {
    /* To limit the menu width to the content of the menu: */
    display: inline-block;
    /* Or set the width explicitly: */
    /* width: 10em; */
}
</style>
<div class="pure-menu custom-restricted-width">
    <span class="pure-menu-heading">Yahoo Sites</span>

    <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
        <li class="pure-menu-heading">More Sites</li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a></li>
    </ul>
</div>
 
 
 
 
 


以上是关于pure.css 学习记录的主要内容,如果未能解决你的问题,请参考以下文章

scss Bootstrap Pure CSS自定义单选按钮/复选框

css 保持比例的盒子。来自http://www.mademyday.de/css-height-equals-width-with-pure-css.html

html Zmianazawartościtooltipawzależnościojęzykawwersji pure CSS

ElasticSearch学习问题记录——Invalid shift value in prefixCoded bytes (is encoded value really an INT?)(代码片段

python小白学习记录 多线程爬取ts片段

PURE CSS 是不是有任何解决方案来解决这两种纵横比为 16/9 且始终居中的相机布局?