完整 DEMO

收藏468

阅读14027

更新时间2022-04-11

一个完整的例子

<!DOCTYPE html>
<html mip>
    <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://mipcache.bdstatic.com/static/v1/mip.css">
        <!--TODO: canonical href需要替换成原页面url-->
        <link rel="canonical" href="https://m.baidu.com/demo.html">
        <title>Hello World</title>
        <style mip-custom>
            body{margin:10px;}
            .red-text { color: red;}
            .middle-text { text-align: center;}
            .small-pic { max-width: 200px;}
        </style>
    </head>
    <body>
        <!--自定义样式-->
        <p class="red-text">MIP页支持修改css样式</p>
        <p class="middle-text">我是居中的文字</p>
        <hr>
        <!--图片组件-->
        <p class="middle-text"><mip-img> 图片组件</p>
        <div class="small-pic">
            <mip-img src="https://www.mipengine.org/static/img/mip_logo_3b722d7.png">
                <p>图片说明文字</p>
            </mip-img>
        </div>
        <hr>
        <!--分享组件-->
        <p class="middle-text"><mip-share> 分享组件</p>
        <mip-share title="分享:我的第一个MIP页面"></mip-share>
        <hr>
        <!--百度统计组件 TODO: 修改token值-->
        <p class="middle-text"><mip-stats-baidu> 百度统计组件,代码可见</p>
        <mip-stats-baidu token="4e397f684261b9e4ff9d8"></mip-stats-baidu>
        <!--mip 运行环境-->
        <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>
        <!--分享组件 代码-->
        <script src="https://mipcache.bdstatic.com/static/v1/mip-share/mip-share.js"></script>
        <!--百度统计组件 代码-->
        <script src="https://mipcache.bdstatic.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script>
    </body>
</html>


相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

220622次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

619062次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

239149次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

394761次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

230705次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

62万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.5万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

71.3万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.9万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23.1万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

34.1万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号