Skip to content

Commit

Permalink
将 style 提前
Browse files Browse the repository at this point in the history
  • Loading branch information
@FrankFang
FrankFang committed May 8, 2017
1 parent 5e3d883 commit c46cf97
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 75 deletions.
32 changes: 16 additions & 16 deletions demos/calendar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,6 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Calendar</title>

<div class="page">
<nav>
<h1 class="date"></h1>
<div class="controls">
<button id="previousMonth">&lt;</button>
<button id="today">今天</button>
<button id="nextMonth">&gt;</button>
</div>
</nav>
<div class="calendar"></div>
</div>
<script src="../lib/dom/index.js"></script>
<script src="view-source.js"></script>
<script src="../lib/date2/index.js"></script>
<script src="../lib/calendar/index.js"></script>
<style>
body{margin:0;}
* {box-sizing: border-box;}
Expand Down Expand Up @@ -48,6 +32,22 @@ <h1 class="date"></h1>
.calendar .days .previousMonth,
.calendar .days .nextMonth{ color: #C3C3C3; }
</style>

<div class="page">
<nav>
<h1 class="date"></h1>
<div class="controls">
<button id="previousMonth">&lt;</button>
<button id="today">今天</button>
<button id="nextMonth">&gt;</button>
</div>
</nav>
<div class="calendar"></div>
</div>
<script src="../lib/dom/index.js"></script>
<script src="view-source.js"></script>
<script src="../lib/date2/index.js"></script>
<script src="../lib/calendar/index.js"></script>
<script>
let calendar = new Calendar({
element: document.querySelector('.calendar'),
Expand Down
18 changes: 9 additions & 9 deletions demos/fullpage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,15 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Fullpage</title>
<style>
body{ margin:0; color: #0F0E0D; }
.page{ height: 100vh; }
section{ height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 20vh; }
section:nth-child(1){ background: #F1AF22; }
section:nth-child(2){ background: #356ADA; }
section:nth-child(3){ background: #D82220; }
section:nth-child(4){ background: #08AA37; }
</style>
<div class="page">
<section>
<div class="circle">1</div>
Expand All @@ -21,15 +30,6 @@
<script src="../lib/dom/index.js"></script>
<script src="view-source.js"></script>
<script src="../lib/fullpage/index.js"></script>
<style>
body{ margin:0; color: #0F0E0D; }
.page{ height: 100vh; }
section{ height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 20vh; }
section:nth-child(1){ background: #F1AF22; }
section:nth-child(2){ background: #356ADA; }
section:nth-child(3){ background: #D82220; }
section:nth-child(4){ background: #08AA37; }
</style>
<script>
new FullPage({
element: document.querySelector('body > .page')
Expand Down
22 changes: 11 additions & 11 deletions demos/image-picker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,6 @@
.card { background: white; width: 20em; height: 80vh; box-shadow: 0 0 5px hsla(0,0%,0%,0.95); border-radius: 2px;
display: flex; justify-content: flex-start; align-items: center; padding-top: 3em; flex-direction: column;}
</style>


<div class="card">
<div class="image-picker">
<img src="https://avatars0.githubusercontent.com/u/839559" width=100 height=100>
</div>
<p>点击图片编辑</p>
</div>
<script src="../lib/dom/index.js"></script>
<script src="view-source.js"></script>
<script src="../lib/image-picker/index.js"></script>
<style>
.image-picker{ width: 100px; height: 100px; border-radius: 50%; overflow: hidden; position: relative; }
.image-picker::after{
Expand All @@ -41,6 +30,17 @@
content:'处理中'; background: hsla(0,0%,0%,0.2);
}
</style>


<div class="card">
<div class="image-picker">
<img src="https://avatars0.githubusercontent.com/u/839559" width=100 height=100>
</div>
<p>点击图片编辑</p>
</div>
<script src="../lib/dom/index.js"></script>
<script src="view-source.js"></script>
<script src="../lib/image-picker/index.js"></script>
<script>
new ImagePicker({
element: document.querySelector('.image-picker'),
Expand Down
36 changes: 18 additions & 18 deletions demos/pager.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,6 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Pager</title>


<div>
<p>
这个分页器会在控制台打印出页数
</p>
<div class="pager"> </div>
</div>
<div>
<p>
这个分页器会改变 url
</p>
<div class="pager"> </div>
</div>
<script src="../lib/dom/index.js"></script>
<script src="view-source.js"></script>
<script src="../lib/bom/index.js"></script>
<script src="../lib/pager/index.js"></script>
<style>
body{ background: #E7E7E7; }
ol{ list-style:none; margin:0;padding:0; }
Expand Down Expand Up @@ -48,6 +30,24 @@
.pager>nav>ol[data-role="pageNumbers"]>li.current{ background: linear-gradient(to bottom, #DADADA 0%, #D0D0D0 100%); margin: .2em; }

</style>


<div>
<p>
这个分页器会在控制台打印出页数
</p>
<div class="pager"> </div>
</div>
<div>
<p>
这个分页器会改变 url
</p>
<div class="pager"> </div>
</div>
<script src="../lib/dom/index.js"></script>
<script src="view-source.js"></script>
<script src="../lib/bom/index.js"></script>
<script src="../lib/pager/index.js"></script>
<script>
let pagers = document.querySelectorAll('.pager')
new Pager({
Expand Down
42 changes: 21 additions & 21 deletions demos/tabs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,27 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Tabs</title>
<style>
body{ background: #E2DED2; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; }
*{ box-sizing: border-box; }
.wrapper{ margin-top: 3em; position: relative; border-radius: 4px; padding: 8px; width: 460px;
background: repeating-linear-gradient( -45deg, #D7D3C7, #D7D3C7 2px, #CECABE 2px, #CECABE 4px); }
.wrapper::before{ content:'';display: block;position: absolute;top: -2px; bottom: -2px; left: -2px; right: -2px;
border: 1px solid #CBC7BC; border-radius: 6px; z-index: -1; }
.tabs{ background: #F2F1EC; }
.tabs ol{ list-style: none; margin: 0; padding: 0; }
.tabs ol:first-child{ display: flex; border: 1px solid #B8B3AE; border-bottom: none; }
.tabs ol:first-child>li{ flex-grow: 1; padding: 20px; text-align: center; text-transform: uppercase;
background: linear-gradient(to bottom, #e5dfd3 0%,#d0c9b8 100%); color: #847E6F; text-shadow: 1px 1px 1px white;
box-shadow: inset 0 0 2px hsla(0,0%,0%,0.15); }
.tabs ol:first-child>li.active{ background: linear-gradient(to bottom, white 0%,#F0EDE6 100%);
color: #222222; box-shadow: none; }
.tabs ol:nth-child(2){ border: 1px solid #B8B3AE; border-top: none; background: #F0EDE6; }
.tabs ol:nth-child(2) > li{ display: none; min-height: 5em; }
.tabs ol:nth-child(2) > li.active{ display: flex; justify-content: center; align-items: center; }
.circle{ width: 80px; height: 80px; border-radius: 50%; background: #DFDCD3;
display: flex; justify-content: center; align-items: center; font-size: 28px; color:#333; margin: 5em 0; }
</style>

<div class="wrapper">
<div class="tabs">
Expand All @@ -28,27 +49,6 @@
<script src="../lib/dom/index.js"></script>
<script src="view-source.js"></script>
<script src="../lib/tabs/index.js"></script>
<style>
body{ background: #E2DED2; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; }
*{ box-sizing: border-box; }
.wrapper{ margin-top: 3em; position: relative; border-radius: 4px; padding: 8px; width: 460px;
background: repeating-linear-gradient( -45deg, #D7D3C7, #D7D3C7 2px, #CECABE 2px, #CECABE 4px); }
.wrapper::before{ content:'';display: block;position: absolute;top: -2px; bottom: -2px; left: -2px; right: -2px;
border: 1px solid #CBC7BC; border-radius: 6px; z-index: -1; }
.tabs{ background: #F2F1EC; }
.tabs ol{ list-style: none; margin: 0; padding: 0; }
.tabs ol:first-child{ display: flex; border: 1px solid #B8B3AE; border-bottom: none; }
.tabs ol:first-child>li{ flex-grow: 1; padding: 20px; text-align: center; text-transform: uppercase;
background: linear-gradient(to bottom, #e5dfd3 0%,#d0c9b8 100%); color: #847E6F; text-shadow: 1px 1px 1px white;
box-shadow: inset 0 0 2px hsla(0,0%,0%,0.15); }
.tabs ol:first-child>li.active{ background: linear-gradient(to bottom, white 0%,#F0EDE6 100%);
color: #222222; box-shadow: none; }
.tabs ol:nth-child(2){ border: 1px solid #B8B3AE; border-top: none; background: #F0EDE6; }
.tabs ol:nth-child(2) > li{ display: none; min-height: 5em; }
.tabs ol:nth-child(2) > li.active{ display: flex; justify-content: center; align-items: center; }
.circle{ width: 80px; height: 80px; border-radius: 50%; background: #DFDCD3;
display: flex; justify-content: center; align-items: center; font-size: 28px; color:#333; margin: 5em 0; }
</style>
<script>
new Tabs({
element: document.querySelectorAll('.tabs')[0]
Expand Down

0 comments on commit c46cf97

Please sign in to comment.