-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
246 lines (167 loc) · 11.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flashback313</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description">
<meta property="og:type" content="website">
<meta property="og:title" content="Flashback313">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Flashback313">
<meta property="og:description">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Flashback313">
<meta name="twitter:description">
<link rel="alternative" href="/atom.xml" title="Flashback313" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/style.css" type="text/css">
</head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">Flashback313</a>
</h1>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<a class="main-nav-link" href="/">Home</a>
<a class="main-nav-link" href="/archives">Archives</a>
</nav>
<nav id="sub-nav">
<a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
<a id="nav-search-btn" class="nav-icon" title="Search"></a>
</nav>
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" results="0" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-css锯齿" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/07/29/css锯齿/" class="article-date">
<time datetime="2015-07-29T14:52:29.000Z" itemprop="datePublished">2015-07-29</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/07/29/css锯齿/">CSS锯齿</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>今天项目里碰到一个锯齿的样式。<br><img src="/img/css_saw_tooth.jpg" alt="设计图"><br>之前依稀在哪里见过css 写的锯齿，网上查了一下，好像中文资料还挺少的。所以就自己查了手册，自己捣鼓了一下。废话不多说，css 代码如下：</p>
<pre><code><span class="tag">div</span> <span class="rules">{
<span class="rule"><span class="attribute">margin-top</span>:<span class="value"> <span class="number">100px</span></span></span>;
<span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">100px</span></span></span>;
<span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">100px</span></span></span>;
<span class="rule"><span class="attribute">background-color</span>:<span class="value"> red</span></span>;
<span class="rule"><span class="attribute">position</span>:<span class="value"> relative</span></span>;
}</span>
<span class="rule"><span class="attribute">div</span>:<span class="value">before {
content: <span class="string">" "</span></span></span>;
<span class="rule"><span class="attribute">display</span>:<span class="value">block</span></span>;
<span class="rule"><span class="attribute">position</span>:<span class="value"> absolute</span></span>;
<span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">100%</span></span></span>;
<span class="rule"><span class="attribute">top</span>:<span class="value">-<span class="number">10px</span></span></span>;
<span class="rule"><span class="attribute">left</span>:<span class="value"><span class="number">0px</span></span></span>;
<span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">10px</span></span></span>;
<span class="rule"><span class="attribute">background-image</span>:<span class="value"> <span class="function">-webkit-linear-gradient</span>(-<span class="number">135deg</span>, transparent <span class="number">75%</span>, <span class="hexcolor">#fff</span> <span class="number">75%</span>),
<span class="function">-webkit-linear-gradient</span>( -<span class="number">45deg</span>, transparent <span class="number">75%</span>, <span class="hexcolor">#fff</span> <span class="number">75%</span>)</span></span>;
<span class="rule"><span class="attribute">background-repeat</span>:<span class="value"> repeat-x</span></span>;
<span class="rule"><span class="attribute">background-size</span>:<span class="value"><span class="number">10px</span> <span class="number">10px</span>, <span class="number">10px</span> <span class="number">10px</span></span></span>;
}
</code></pre><p>代码分析：<br>1、linear-gradient 线性渐变,语法如下</p>
<pre><code>linear-gradient( [ <angle> | <span class="built_in">to</span> <side-<span class="operator">or</span>-corner> ,]? <color-<span class="built_in">stop</span>> [, <color-<span class="built_in">stop</span>>]+ )
\\<span class="comment">---------------------------------/ \\----------------------------/</span>
Definition <span class="operator">of</span> <span class="operator">the</span> gradient <span class="built_in">line</span> List <span class="operator">of</span> color stops
where <side-<span class="operator">or</span>-corner> = [left | <span class="constant">right</span>] || [top | bottom]
<span class="operator">and</span> <color-<span class="built_in">stop</span>> = <color> [ <percentage> | <<span class="built_in">length</span>> ]
</code></pre><p>常见写法：<br> linear-gradient( 45deg, blue , red);<br> linear-gradient( to left top, blue , red);</p>
<p>2、background-image 和 background-size 当中都出现了 ，逗号。其实这里是 css3 对多背景图片的支持。（对，你没看错，线性渐变是 background-image 样式。）与之相对应的 background-size 也就是在分别控制各自对应的图片。</p>
<p>inspired by <a href="http://codepen.io/BobbyJones/pen/Cesty" target="_blank" rel="external">http://codepen.io/BobbyJones/pen/Cesty</a></p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2015/07/29/css锯齿/" data-id="cicow8n1k0000s7jizwioquvl" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-移动端页面的一点体会（一）" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/06/08/移动端页面的一点体会（一）/" class="article-date">
<time datetime="2015-06-08T14:00:11.000Z" itemprop="datePublished">2015-06-08</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/06/08/移动端页面的一点体会（一）/">移动端页面的一点体会（一）</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>从学习前端开始其实就一直做移动端的页面多一些，写 css3 已经接触 html5 的也有一段时间了。于是乎，想写一点东西，算是自我总结。我希望能写一个系列出来，所以这一篇我先讲当下流行的 onepage 页面。</p>
<p>所谓的 onepage 其实就是单页的上下翻页或者左右翻页。通常我们会使用把单页的内容放入一组 section 或者 div 里。通过 touch 事件的捕捉，然后对这些 section 做 translate3d 动画呈现出来。</p>
<p>我的制作过程和方法：</p>
<p>首先，选择 js 的 <a href="https://github.com/peachananr/onepage-scroll" target="_blank" rel="external">onepage-scroll</a> 框架。原因很简单，文件小，配置接口够用。当然，其实看懂原理以后可以自己写一个更简单，之前因为需求仅是上下翻页所以就自己参考着写了一个。</p>
<p>然后，最蛋疼的切图和绝对定位你的内容，用 rem 做单位吧。哈哈，做过的人应该都知道的，血泪史。（欢迎有更好建议的同学来分享一下）</p>
<p>最后，其实是我最想说的。手机端因为硬件的问题，渲染能力有限。建议写法如下，给当前页面一个 class 每次进来的时候加上，滑走就去除。所有的动画 css 都写到这个 class 下面。这样一来整个页面的速度就会好很多。</p>
<p>另：加强交互的一个写法，进入页面写一个 loading 动画，预先将体积大的图片预先加载完成之后再进入页面。</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2015/06/08/移动端页面的一点体会（一）/" data-id="cicow8n270001s7jij7w9f1ws" class="article-share-link">Share</a>
</footer>
</div>
</article>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">Archives</h3>
<div class="widget">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/07/">July 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/06/">June 2015</a><span class="archive-list-count">1</span></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Recents</h3>
<div class="widget">
<ul>
<li>
<a href="/2015/07/29/css锯齿/">CSS锯齿</a>
</li>
<li>
<a href="/2015/06/08/移动端页面的一点体会（一）/">移动端页面的一点体会（一）</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2015 flashback313<br>
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/archives" class="mobile-nav-link">Archives</a>
</nav>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css">
<script src="/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="/js/script.js" type="text/javascript"></script>
</div>
</body>
</html>