Skip to content

Commit

Permalink
Merge 51e87ae into 778827a
Browse files Browse the repository at this point in the history
  • Loading branch information
@jennyliang220
jennyliang220 committed Dec 18, 2017
2 parents 778827a + 51e87ae commit 9a990bf
Showing 1 changed file with 64 additions and 50 deletions.
114 changes: 64 additions & 50 deletions sample.html
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,71 @@
<!DOCTYPE html>
<html mip>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>MIP DEMO</title>
<link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css">
<link rel="canonical" href="https://www.baidu.com">
<noscript>
<style mip-officialrelease>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css">
<!--TODO: canonical href需要替换成原页面url-->
<link rel="canonical" href="https://m.baidu.com/demo.html">
<title>MIP页Demo效果</title>
<!--TODO: 替换样式-->
<style mip-custom>
body{ margin:10px;}
.red-text { color: red;}
.middle-text { text-align: center; font-size: 20px}
hr {
margin: 20px 0;
}
a {
border: 1px solid #ddd;
padding: 10px;
display: block;
}
</style>
</noscript>
</head>
<!--noscript 用于JS禁用时页面加载-->
<noscript>
<style mip-officialrelease>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
</head>
<body>
<!--自定义样式-->
<p class="middle-text">增加样式</p>
<p class="red-text">MIP页支持修改css样式</p>
<hr>

<!--跳转链接, 落地页同为MIP-->
<p class="middle-text">mip 跳转链接</p>
<a data-type="mip" data-title="目标页面标题" href="https://www.mipengine.org/doc/00-mip-101.html">跳转到MIP新手指南 (MIP)</a>
<!--跳转链接, 落地页不是MIP-->
<a target="_blank" href="https://github.com/mipengine">跳转到GitHub (非MIP)</a>
<hr>

<body>
<p class="mip-text">这是一个段落，纯文本形式</p>
<div class="mip-img-container">
<mip-img data-carousel="carousel" class="mip-element mip-img" src="//m.baidu.com/static/index/plus/plus_logo.png"></mip-img>
</div>
<div class="mip-img-container">
<mip-img data-carousel="carousel" class="mip-element mip-img" src="//m.baidu.com/static/index/plus/plus_logo.png">
<p class="mip-img-subtitle">带图片标题的类型</p>
<!--图片组件-->
<p class="middle-text">&lt;mip-img&gt; 图片组件</p>
<mip-img layout="fixed" width="200" height="130" src="https://www.mipengine.org/static/img/mip_logo_3b722d7.png">
</mip-img>
</div>
<p class="mip-text">这是另一个段落，纯文本形式</p>
<div class="mip-html">
<p>自定义的文字居中</p>
</div>
<div class="mip-html">
<p>
<span>自定义的红色字体</span>
</p>
</div>
<div class="mip-html">
<p>
<span><strong>自定义的加粗字体</strong></span>
</p>
</div>
<div class="adv">
<mip-embed type="ad-comm" tpl="onlyImg" href="//m.baidu.com/s?word=百度" data-size="1242 180" src="//m.baidu.com/static/search/ala/ad_1.png">
</mip-embed>
</div>
<div class="mip-adbd">
<mip-embed type="ad-baidu" cproid="u2697394"></mip-embed>
</div>
<script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>
<script src="https://mipcache.bdstatic.com/static/v1.0/mip-ad.js"></script>
</body>
<hr>

<!--分享组件，外链mip-share.js-->
<p class="middle-text">&lt;mip-share&gt; 分享组件</p>
<mip-share title="分享：我的第一个MIP页面"></mip-share>
<hr>

<!--百度统计组件，外链mip-stats-baidu.js TODO: 修改token值-->
<p class="middle-text">&lt;mip-stats-baidu&gt; 百度统计组件，代码可见</p>
<mip-stats-baidu token="4e397f684261b9e4ff9d8"></mip-stats-baidu>

<!--mip 运行环境-->
<script src="https://c.mipcdn.com/static/v1/mip.js"></script>
<!--分享组件 代码-->
<script src="https://c.mipcdn.com/static/v1/mip-share/mip-share.js"></script>
<!--百度统计组件 代码-->
<script src="https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script>
</body>
</html>

0 comments on commit 9a990bf

Please sign in to comment.