-
Notifications
You must be signed in to change notification settings - Fork 45
/
index.html
160 lines (154 loc) · 11.3 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="shortcut icon" type="image/x-icon" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/common/favicon22c41b.ico">
<title>微信公众号图文消息默认样式</title>
<link rel="stylesheet" href="wx-mp.css">
</head>
<body id="activity-detail" class="zh_CN mm_appmsg" ontouchstart="">
<div id="js_article" class="rich_media">
<div id="js_top_ad_area" class="top_banner"></div>
<div class="rich_media_inner">
<div id="page-content">
<div id="img-content" class="rich_media_area_primary">
<h2 class="rich_media_title" id="activity-name">
微信公众号图文消息默认样式
</h2>
<div class="rich_media_meta_list">
<em id="post-date" class="rich_media_meta rich_media_meta_text">2016-07-21</em>
<em class="rich_media_meta rich_media_meta_text">作者</em>
<a class="rich_media_meta rich_media_meta_link rich_media_meta_nickname" href="javascript:void(0);" id="post-user">公众号名称</a>
</div>
<div class="rich_media_thumb_wrp" id="media">
<img class="rich_media_thumb" id="js_cover" onerror="this.parentNode.removeChild(this)" data-backsrc="http://placehold.it/640x480" data-s="300,640" src="http://placehold.it/640x480">
</div>
<div class="rich_media_content " id="js_content">
<p>这里是正文<strong style="line-height: 1.6;">加粗</strong><em><span style="line-height: 1.6;">斜体</span></em><span style="text-decoration: underline;">下划线</span><span style="color: rgb(255, 41, 65);">文字颜色</span><span style="background-color: rgb(214, 214, 214);">文字背景色</span><span style="display: none; line-height: 0px;">‍</span></p>
<p style="text-indent: 2em;">首行缩进加入一些无聊的内容好让大家看到换行后的效果, 是什么样子的会是什么样子呢, 大家很期待吧.</p>
<p>居左对齐的文本, 这一段文本也可能很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长, 反正就是想让他换行就对了, 怎么还不换行啊.</p>
<p style="text-align: center;">居中对齐的文本, 这一段文本也可能很长很长很长很长很长很长很很长很长很长缓存很长很长, 反正就是想让他换行就对了, 怎么还不换行啊.</p>
<p style="text-align: right;">居右对齐的文本, 这一段文本也可能很长很长很长很长很长很长很长很长很长很长很长很长, 反正就是想让他换行就对了, 怎么还不换行啊.</p>
<p style="text-align: justify;">两端对齐的文本, 这一段文本也可能很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长, 反正就是想让他换行就对了, 怎么还不换行啊.</p>
<p style="margin-top: 20px;">段前距的文本, 这一段文本也可能很长很长很长很长很长很长很长很长很长很长很长很长很长, 反正就是想让他换行就对了, 怎么还不换行啊.</p>
<p style="margin-bottom: 20px;">段后距的文本, 这一段文本也可能很长很长很长很长很长很长很长很长很长很长很长很长很长很长, 反正就是想让他换行就对了, 怎么还不换行啊.</p>
<p style="line-height: 3em;">行间距的文本, 这一段文本也可能很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长, 反正就是想让他换行就对了, 怎么还不换行啊.</p>
<ol class="list-paddingleft-2" style="list-style-type: decimal;">
<li>
<p>有序列表1</p>
</li>
<li>
<p>有序列表2</p>
<ol class="list-paddingleft-2" style="list-style-type: lower-alpha;">
<li>
<p>有序列表2.1</p>
</li>
<ol class="list-paddingleft-2" style="list-style-type: lower-roman;">
<li>
<p>有序列表2.1.1</p>
</li>
<li>
<p>有序列表2.1.2</p>
</li>
<ol class="list-paddingleft-2" style="list-style-type: upper-alpha;">
<li>
<p>有序列表2.1.2.1</p>
</li>
<li>
<p>有序列表2.1.2.2</p>
</li>
<ol class="list-paddingleft-2" style="list-style-type: upper-roman;">
<li>
<p>有序列表2.1.2.2.1</p>
</li>
<li>
<p>有序列表2.1.2.2.2<br></p>
</li>
</ol>
</ol>
</ol>
<li>
<p>有序列表2.2<br></p>
</li>
</ol>
</li>
<li>
<p>有序列表3</p>
<ul class="list-paddingleft-2" style="list-style-type: square;">
<li>
<p>无序列表1</p>
</li>
<ul class="list-paddingleft-2" style="list-style-type: disc;">
<li>
<p>无序列表1.1</p>
</li>
<li>
<p>无序列表1.2</p>
</li>
<ul class="list-paddingleft-2" style="list-style-type: circle;">
<li>
<p>无序列表1.2.1</p>
</li>
<li>
<p>无序列表1.2.2<br></p>
</li>
</ul>
</ul>
<li>
<p>无序列表2</p>
</li>
<li>
<p>无序列表3</p>
</li>
</ul>
</li>
</ol>
<p><br></p>
<p>图片围绕效果(默认)<img data-s="300,640" data-type="png" data-src="http://placehold.it/22x22"
data-ratio="1" data-w="22" src="http://placehold.it/22x22"
style="width: auto !important; visibility: visible !important; height: auto !important;"><br></p>
<p>图片围绕效果(左浮动)<img data-s="300,640" data-type="png" data-src="http://placehold.it/22x22"
style="float: left; width: auto !important; visibility: visible !important; height: auto !important;" data-ratio="1"
data-w="22" src="http://placehold.it/22x22"><br></p>
<p>图片围绕效果(右浮动)<img data-s="300,640" data-type="png" data-src="http://placehold.it/22x22"
style="float: right; width: auto !important; visibility: visible !important; height: auto !important;" data-ratio="1"
data-w="22" src="http://placehold.it/22x22"><br>图片围绕效果(居中)</p>
<p style="text-align:center"><img data-s="300,640" data-type="png" data-src="http://placehold.it/22x22"
data-ratio="1" data-w="22" src="http://placehold.it/22x22"
style="width: auto !important; visibility: visible !important; height: auto !important;"></p>
<p><br></p>
<br><hr><br>
<blockquote>
人生不过是一个行走的影子，一个在舞台上指手划脚的笨拙的怜人，登场片刻，便在无声无息中悄然退去，这是一个愚人所讲的故事，充满了喧哗和骚动，却一无所指。
</blockquote>
<br><hr><br>
<table>
<caption>浏览器</caption>
<thead>
<tr><th>浏览器型号</th><th>版本号</th></tr>
</thead>
<tbody>
<tr><td>IE</td><td>9+</td></tr>
<tr><td>Chrome</td><td>14+</td></tr>
<tr><td>Firefox</td><td>4+</td></tr>
<tr><td>Safari</td><td>5+</td></tr>
<tr><td>Opera</td><td>11+</td></tr>
<tr><td>Mobile Safari</td><td>iOS 6+</td></tr>
</tbody>
</table>
</div>
<div class="rich_media_tool" id="js_toobar3">
<a class="media_tool_meta meta_primary" id="js_view_source" href="https://github.com/ufologist/wechat-mp-article">阅读原文</a>
<a class="media_tool_meta meta_primary" id="js_view_source" href="readability.html">我要更适合阅读的排版</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>