forked from doyoe/css-handbook
-
Notifications
You must be signed in to change notification settings - Fork 0
/
@page.htm
142 lines (142 loc) · 4.22 KB
/
@page.htm
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
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@page</title>
<meta name="Description" content="CSS3参考手册之: @page" />
<meta name="Keywords" content="@page" />
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<meta name="robots" content="all" />
<!--[if lte IE 8]>
<script src="../js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="../skin/article.css" />
</head>
<body>
<nav id="guide" class="g-mod">
<div class="from">
<a href="http://css.doyoe.com/" target="_blank">CSS3参考手册</a>
<span>»</span>
<a href="../index.htm" id="category" rel="rules" name="@page">语法与规则列表</a>
<span>»</span>
</div>
<div class="to">
<span class="label">相关内容:</span>
<div class="g-combobox g-transition">
<a href="?" class="g-transition target">
<strong>其它语法与规则参考</strong>
<span>选择其它项<!--[if lte IE 7]><ins>IE7 and earlier, Get to die</ins><![endif]--></span>
</a>
<div class="g-transition list">
<ul>
<!-- 插入快速分类导航 -->
</ul>
</div>
</div>
</div>
</nav>
<header id="hd">
<section id="title" class="g-mod">
<h1 class="tit">@page</h1>
<ul class="info">
<li><strong>版本:CSS2</strong></li>
</ul>
<!-- 插入浏览器信息 -->
</section>
</header>
<section id="bd">
<section id="syntax" class="g-mod g-attr">
<h2 class="tit">语法:</h2>
<div class="cont">
<p><strong>@page</strong> <label> <pseudo-classes>{ sRules }</p>
</div>
</section>
<section id="value" class="g-mod g-attr">
<h2 class="tit">取值:</h2>
<div class="cont">
<dl>
<dt><label>:</dt>
<dd>页面标识符</dd>
<dt><pseudo-class>:</dt>
<dd>打印伪类<a href="../selectors/pseudo-classes/@page-first.htm">:first</a>, <a href="../selectors/pseudo-classes/@page-first.htm">:left</a>, <a href="../selectors/pseudo-classes/@page-first.htm">:right</a></dd>
</dl>
</div>
</section>
<section id="intro" class="g-mod g-attr">
<h2 class="tit">说明:</h2>
<div class="cont">
<strong>设置页面容器的版式,方向,边空等。</strong>
</div>
</section>
<section id="compatible" class="g-mod g-attr">
<h2 class="tit">兼容性:</h2>
<div class="cont">
<ul class="support-type">
<li><span class="support">浅绿</span> = 支持</li>
<li><span class="unsupport">红色</span> = 不支持</li>
<li><span class="partsupport">粉色</span> = 部分支持</li>
</ul>
<table class="g-data">
<thead>
<tr>
<th>IE</th>
<th>Firefox</th>
<th>Chrome</th>
<th>Safari</th>
<th>Opera</th>
<th>iOS Safari</th>
<th>Android Browser</th>
<th>Android Chrome</th>
</tr>
</thead>
<tbody>
<tr>
<td class="unsupport">6.0-7.0</td>
<td class="unsupport">2.0-18.0</td>
<td class="support" rowspan="2">4.0+</td>
<td class="support" rowspan="2">3.1+</td>
<td class="support" rowspan="2">15.0+</td>
<td class="support" rowspan="2">3.2+</td>
<td class="support" rowspan="2">2.1+</td>
<td class="support" rowspan="2">18.0+</td>
</tr>
<tr>
<td class="support">9.0+</td>
<td class="support">19.0+</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="g-mod g-attr" id="example">
<h2 class="tit">示例:</h2>
<div class="cont">
<textarea rows="10" cols="90">
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@page_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
@page:first{margin:300px;}
</style>
</head>
<body>
<div>@page:first{margin:300px;}</div>
</body>
</html>
</textarea>
<p><input type="button" value="运行" class="g-btn g-btn-sure" /></p>
</div>
</section>
</section>
<footer id="ft">
<aside id="rights" class="g-mod">
<!-- 插入浏览器及版权信息 -->
</aside>
</footer>
<script src="../js/jquery.js"></script>
<script src="../js/inner.js"></script>
</body>
</html>