@liyuzhong/simplecss
Version:
基于normalize.css的简单css库
123 lines (99 loc) • 4.67 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, viewport=cover">
<meta name="description" content="simplecss，简单的css库">
<title>simplecss-简单的样式库</title>
</head>
<body class="p_15 font_16">
<section>
<h1 class="font_18">simple css库</h1>
<p class="font_16">参考fundation.css设计，基于sass编写的css库，依赖normalize.css、fontAwesome</p>
</section>
<hr>
<section class="p-t_20">
<h2 class="l-h_15">超链接</h2>
<p>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a">HTML</a> <a> 元素（或称锚元素）可以通过它的
<code>href</code> 属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。
</p>
<h2 class="l-h_15">按钮</h2>
<div>
<p><button name="button" class="small">小号按钮</button><br /></p>
<p><button name="button">常规按钮</button><br /></p>
<p><button name="button" class="large">大号按钮large</button><br /></p>
<p><button name="button" class="xlarge w_100">加大号xlarge宽度100%按钮</button></p>
<p><button name="button" class="xlarge w_100 r_4 btn-primary font_16">加大号宽度100%圆角按钮</button></p>
</div>
<code class="code-block">
<button name="button" class="xlarge w_100 r_4 btn-primary font_16">Click me</button>
</code>
<h2 class="l-h_15">标题</h2>
<h1>H1-Beetles</h1>
<h2>H2-External morphology</h2>
<h3>H3-Head</h3>
<h4>H4-Mouthparts</h4>
<h5>H5-Thorax</h5>
<h6>H6-Prothorax</h6>
<br />
<h2 class="l-h_15">表单</h2>
<div class="">
<form>
<fieldset class="s-fieldset">
<div class="grid-x align-middle b-b p_15">
<div class="cell-2">
<label class="l-h_1" for="">姓名</label>
</div>
<div class="cell-10 cell-access">
<div class="access-block">
<input class="s-input" type="text" placeholder="输入姓名" name="" id="">
</div>
</div>
</div>
<div class="grid-x align-top b-b p_15">
<div class="cell-2">
<label for="">地址</label>
</div>
<div class="cell-10">
<div>
<textarea class="s-textarea" name="" id="" rows="3" placeholder="输入详细地址"></textarea>
</div>
</div>
</div>
<div class="grid-x align-top b-b p_15">
<div class="cell">
<label for="">
<i class="fa fa-circle"></i>
国信证券
</label>
<label for="">
<i class="fa fa-dot-circle"></i>
国信证券
</label>
</div>
</div>
<div class="grid-x align-top b-b p_15">
<div class="cell">
<label for="">
<i class="fa fa-check-square active"></i>
国信证券
</label>
<label for="">
<i class="fa fa-check-square"></i>
国信证券
</label>
</div>
</div>
</fieldset>
</form>
</div>
<h2 class="l-h_15">图片</h2>
<p>图片img引用<code>class = "img"</code>后宽度会设置成100%</p>
<figure class="s-figure w_100">
<img class="img" src="https://xip.nu/wp-content/uploads/2017/03/css.png" alt="网络图片" />
</figure>
</section>
</body>
<script src="./dist/index.js"></script>
</html>