152 lines
7.1 KiB
HTML
152 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>当前CSS示例</title>
|
||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
||
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
|
||
<style>
|
||
#class1 {
|
||
font-size:0.8em;
|
||
}
|
||
#class1 .fs1 {
|
||
font-size:1.5em;
|
||
}
|
||
.class2{
|
||
font-size:0.6em;
|
||
}
|
||
.class2 .fs2{
|
||
font-size:2em;
|
||
}
|
||
.tw-txt{
|
||
font-size:5em;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="px4 py4">
|
||
<blockquote>css优先级</blockquote>
|
||
<div id="class1" class="class2">
|
||
<div>no fs</div>
|
||
<div class="fs1">fs1 1.5em</div>
|
||
<div class="fs2">fs2 2em</div>
|
||
<div class="fs2 tw-txt">fs2 tw-txt 5em</div>
|
||
<div class="tw-txt">tw-txt 5em</div>
|
||
<div class="txt-lggg">txt-lggg 0.5em</div>
|
||
</div>
|
||
<blockquote>hr横线</blockquote>
|
||
<div class="ciy-hr"></div>
|
||
|
||
<blockquote>行内效果</blockquote>
|
||
<code>code效果</code>
|
||
<kbd>kbd效果</kbd>
|
||
<a class="target">下划线</a>
|
||
|
||
<blockquote>24栅格</blockquote>
|
||
<div class="row">
|
||
<div class="col-12 bg7">12</div>
|
||
<div class="col-6 bg6">6</div>
|
||
<div class="col-4 bg5">4</div>
|
||
<div class="col-2 bg4">2</div>
|
||
</div>
|
||
row col-*(移动端) col-sm-*(PAD) col-md-*(PC) col-lg-*(大屏)<br/>
|
||
hidden-dn-sm/md/lg 小屏被隐藏<br/>
|
||
hidden-up-sm/md/lg 大屏被隐藏<br/>
|
||
|
||
<blockquote>pre代码块</blockquote>
|
||
<pre>#include bits/stdc.h
|
||
int main() {
|
||
return 0;
|
||
}</pre>
|
||
|
||
<blockquote>图标</blockquote>
|
||
首<div class="help"></div>尾<br/>
|
||
首<div class="icon" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTgyNC40MTEzNDkgODk3LjQ0NTY0N2wtNDUzLjcyNDY3IDk5LjI1Mzg2NGEyNDY5LjAzNTQzOSAyNDY5LjAzNTQzOSAwIDAgMS00My4zMzIzNDMtNDAyLjQwODgzMiAyNDc2LjY2Njc4NyAyNDc2LjY2Njc4NyAwIDAgMSAzLjQzODA0NS0xNzQuMDQyOTMybDQ3NC4zNDgzMDggMTQuMTQ2MDI3YzU1LjIyMTg2NCAyLjIzNzk3MyAxMDAuNTkyOTQxIDQ4Ljk3MTI5NCAxMDQuMzQxNDI5IDEwMy42Mjc4NzNhMTg0NS40Mzc5NzMgMTg0NS40Mzc5NzMgMCAwIDAgMjguMTk5Mzg1IDIyMy4zMDYxMzZjMjQuMjk3OTkxIDExNy44NTczMDMtMTEyLjM3MTI1OCAxMzYuMzQ5NTM4LTExMy4yNzAxNTQgMTM2LjExNzg2NHoiIGZpbGw9IiM0QkNCQUUiPjwvcGF0aD48cGF0aCBkPSJNNzQ2LjU1MDI4MSA5MTQuNDczNzAxTDI5MC45NzY4NTEgMTAxNC4xMzUzMTJjLTk0LjA1OTcyOSAyNi4wODE4ODItMTQ1LjA1NTg1NS0zNS40Mjc2Mi0xNTQuNzEyMDM2LTExNi4xMjkwMTNDNzEuODEzMDUgNjEyLjU4ODMwOCA1My4yNzkxMTQgMzUzLjIzMzY2NSAxNTguMTk1MDk2IDEwMi41ODUzMzkgMjE4LjQzNTAyMy0zOS4zODQ2MTUgMzU2LjM2OTIxMy04LjgwMzYyIDczMy44NDA2MzQgNzMuODUzMTA0YTIwNzMuODkxOTEgMjA3My44OTE5MSAwIDAgMC0xMi43MTQyOCA2OTYuMDMyNzI0IDIwNzUuNTU1MzMgMjA3NS41NTUzMyAwIDAgMCAyNS40MjM5MjcgMTQ0LjU4Nzg3M3oiIGZpbGw9IiM1MEUzQzIiPjwvcGF0aD48cGF0aCBkPSJNMjQ4LjYwMzYzOSAxNTkuMTc0MDgxbDMzNS41NjE1NTYgNDYuMzExNjc1YTIyMTEuOTY1MTA0IDIyMTEuOTY1MTA0IDAgMCAwLTEzLjgwNzc4MyAxNDcuNzQ3OTA5bC0zNDIuNDUxNTQ3LTIyLjQzMDY5N2EyNTcxLjA3NDAyNyAyNTcxLjA3NDAyNyAwIDAgMSAyMC42OTc3NzQtMTcxLjYyODg4N3pNNTQwLjUzMTY3NSA1MDYuNjIwNTI1bC0zMjEuODc0MjQ0IDIuNTgwODUxYzAuMzk4NDgtMjMuMzU3Mzk0IDEuMTE2NjctNDYuNzA1NTIgMi4xNDk5MzYtNzAuMDM1MTE0bDMyMC4xMDQyNTQgNi42MjU4ODNhMjI1NS45MTgzMzUgMjI1NS45MTgzMzUgMCAwIDAtMC4zNzk5NDYgNjAuODI4Mzh6TTQzOC4wOTkyNDEgNjM3LjI5ODY3OWwtMjE3Ljk0NTE5NSAxNC40MTk0MDJhMjU4Mi4zNzk3MjkgMjU4Mi4zNzk3MjkgMCAwIDEtMS43MTkwMjMtNzAuMDk5OTgxbDIxNy4wOTcyNjctOC4xNjQyYzAuNTY5OTE5IDIxLjI5MDg2IDEuNDIyNDggNDIuNTcyNDUyIDIuNTY2OTUxIDYzLjg0NDc3OXpNNDk0LjUzOTcxMSA3NTYuOTQ0NTA3bC0yNjUuNDQzMDQxIDMyLjUyMjQyNWEyNTg2LjYxNDczMyAyNTg2LjYxNDczMyAwIDAgMS01LjQ2NzUxMS03MC4wMDI2NzlsMjY0LjgyNjc4Ny0yNC44NDkzNzVjMS43NDIxOSAyMC43OTUwNzcgMy43NzE2NTYgNDEuNTc2MjUzIDYuMDgzNzY1IDYyLjMyOTYyOXoiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD48L3N2Zz4=');"></div>尾
|
||
|
||
|
||
<blockquote>按钮</blockquote>
|
||
<button class="btn">按钮</button>
|
||
<button class="btn sm">sm按钮</button>
|
||
<button class="btn smm">smm按钮</button>
|
||
<button class="btn smmm">smmm按钮</button>
|
||
<button class="btn xs">xs按钮</button>
|
||
<br/>
|
||
<button class="btn">按钮</button>
|
||
<button class="btn lg">lg按钮</button>
|
||
<button class="btn lgg">lgg按钮</button>
|
||
<br/>
|
||
<button class="btn loading">加载中效果</button>
|
||
<button class="btn svg"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M884.5824 866.2528l-22.5792-142.7456c41.472-66.4576 64.5632-145.5616 61.7984-230.2976-7.0656-216.7808-184.832-391.9872-401.664-396.0832-232.1408-4.352-421.2736 184.32-417.5872 416.3072 3.5328 222.72 187.4944 403.4048 410.2144 403.1488a407.33696 407.33696 0 0 0 163.0208-34.048l176.384 16.128c18.3296 1.6896 33.28-14.2848 30.4128-32.4096z" fill="#FF5D50"></path><path d="M704.1536 359.5264c-52.3776-52.3776-137.0624-52.6848-189.8496-1.0752-52.8384-51.6096-137.472-51.3024-189.8496 1.0752-52.736 52.736-52.736 138.24 0 190.976l145.9712 145.9712c24.2688 24.2688 63.5392 24.2688 87.808 0l0.1536-0.1536c0-0.0512 0.0512-0.0512 0.1024-0.0512l145.7152-145.7152c52.6848-52.7872 52.6848-138.2912-0.0512-191.0272z" fill="#FFDF99"></path></svg></button>
|
||
<button class="btn def">def</button>
|
||
<button class="btn dag">dag</button>
|
||
<button class="btn imp">imp succ</button>
|
||
<button class="btn warn">warn</button>
|
||
<br/>
|
||
|
||
<a class="btn btn-menu btn-menu-caret">
|
||
<span class="lang">触发按钮</span>
|
||
<div class="caret"></div>
|
||
<ul class="ciy-popmenu">
|
||
<li>菜单1</li>
|
||
<li>菜单2</li>
|
||
</ul>
|
||
</a>
|
||
|
||
<blockquote>span效果</blockquote>
|
||
span
|
||
<span class="def">def</span>
|
||
<span class="dag">dag</span>
|
||
<span class="imp">imp succ</span>
|
||
<span class="warn">warn</span>
|
||
<span class="man">man</span>
|
||
span
|
||
<span class="cata_dag">cata_dag</span>
|
||
<span class="cata_imp">cata_imp</span>
|
||
<span class="cata_warn">cata_warn</span>
|
||
<span class="cata_man">cata_man</span>
|
||
|
||
<blockquote>fieldset</blockquote>
|
||
<fieldset>
|
||
<legend>legend</legend>
|
||
<div>内容</div>
|
||
</fieldset>
|
||
<fieldset class="box">
|
||
<legend>legend box</legend>
|
||
<div>内容</div>
|
||
</fieldset>
|
||
<fieldset class="tips">
|
||
<legend>legend tips</legend>
|
||
<div>内容</div>
|
||
</fieldset>
|
||
|
||
<blockquote>特定css</blockquote>
|
||
<pre>
|
||
ciy-tree-spread
|
||
table
|
||
search
|
||
ciy-list l0/l1/l2/l3 rt rb lb rbg
|
||
gridline end
|
||
ciy-form text v inline label.imp label.auto char[2-9] inline-minwidth
|
||
form-bottom
|
||
input.tran select.tran textarea.tran
|
||
ciy-badge ciy-badge-dot
|
||
ciy-tabcard
|
||
ciy-caption mk center title right sub
|
||
fieldset/legend box tips
|
||
</pre>
|
||
|
||
<blockquote>原子css</blockquote>
|
||
<pre>
|
||
txt-sm/smm/smmm txt-lg/lgg/lggg txt-left/center/right/just
|
||
txt-wb 加粗 txt-wl 细线 txt-un 下划线
|
||
txt[1-9] bg[1-9] px[1-4] py[1-4] r[1-5]
|
||
cursor-p/d txt-nowrap txt-over
|
||
flex flex-center flex-top
|
||
flex1 flexnone
|
||
hide noselect tran5
|
||
sta abs fix rel sti r0 l0 t0 b0 r1 l1 t1 b1
|
||
</pre>
|
||
<script type="text/javascript" src="/jscss/ciy.js"></script>
|
||
</body>
|
||
</html> |