@vci/style
Version:
样式编写辅助库(SCSS)
101 lines • 5.31 kB
HTML
<html lang="zh">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<title>样式测试-可视化</title>
<link href="../dist-dev/style.vci.dev.css" rel="stylesheet">
<body style="color: #333;">
<div class="test">
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<strong>列表</strong>
<ul>
<li>列表元素</li>
<li>列表元素</li>
<li>列表元素</li>
</ul>
<button class="vci-tc-scale" type="button">按钮</button>
<div class="vci-amt-rotate" style="width: 20px;height: 20px;background-color: #5294c3"></div>
<a class="vci-amt-fade" href="#">链接</a>
<p>
<span>段落</span>
<span class="vci-fl">[段落浮动] </span>
<i class="vci-clear-element"></i>
<span>浮动后内容</span>
<span class="vci-to-e" style="display: block;width: 110px;" title="溢出省略号省略号省略号">溢出省略号省略号省略号</span>
</p>
<strong>Flex布局-行方向</strong>
<div class="vci-flex-rml">
<div class="vci-flex-rc" style="width: 200px;height: 40px; margin-right: 4px; border: 1px solid #ccc;">
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-rc</span>
</div>
<div class="vci-flex-rm" style="width: 200px;height: 40px; margin-right: 4px; border: 1px solid #ccc;">
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-rm</span>
</div>
<div class="vci-flex-rcm" style="width: 200px;height: 40px; margin-right: 4px; border: 1px solid #ccc;">
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-rcm</span>
</div>
<div class="vci-flex-rml" style="width: 200px;height: 40px; margin-right: 4px; border: 1px solid #ccc;">
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-rml</span>
</div>
<div class="vci-flex-rmr" style="width: 200px;height: 40px; margin-right: 4px; border: 1px solid #ccc;">
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-rmr</span>
</div>
<div class="vci-flex-rmb" style="width: 320px;height: 40px;margin-right: 4px;border: 1px solid #ccc;">
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-rmb</span>
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-rmb</span>
</div>
</div>
<strong>Flex布局-列方向</strong>
<div class="vci-flex-rml">
<div class="vci-flex-cm" style="width: 200px;height: 80px; margin-right: 4px; border: 1px solid #ccc;">
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-cm</span>
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-cm</span>
</div>
<div class="vci-flex-cc" style="width: 200px;height: 80px; margin-right: 4px; border: 1px solid #ccc;">
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-cc</span>
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-cc</span>
</div>
<div class="vci-flex-ccm" style="width: 200px;height: 80px; margin-right: 4px; border: 1px solid #ccc;">
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-ccm</span>
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-ccm</span>
</div>
<div class="vci-flex-cct" style="width: 200px;height: 80px; margin-right: 4px; border: 1px solid #ccc;">
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-cct</span>
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-cct</span>
</div>
<div class="vci-flex-ccb" style="width: 200px;height: 80px; margin-right: 4px; border: 1px solid #ccc;">
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-ccb</span>
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-ccb</span>
</div>
<div class="vci-flex-ccbt" style="width: 200px;height: 80px; margin-right: 4px; border: 1px solid #ccc;">
<span class="vci-ta-c"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-ccbt</span>
<span class="vci-ta-c vci-after"
style="width: 120px;height: 20px;line-height: 20px;background-color: #ccc;">vci-flex-ccbt</span>
</div>
</div>
</div>
</body>
</html>