-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
64 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"><mip-img> 图片组件</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"><mip-share> 分享组件</p> | ||
<mip-share title="分享:我的第一个MIP页面"></mip-share> | ||
<hr> | ||
|
||
<!--百度统计组件,外链mip-stats-baidu.js TODO: 修改token值--> | ||
<p class="middle-text"><mip-stats-baidu> 百度统计组件,代码可见</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> |