百度站长平台MIP demo示例教程

引入css样式

  1. < link type="text/css" rel="stylesheet" href="https://mipcache.bdstatic.com/static/mipmain-v0.0.1.css" >

引入js组件(已包含jq、amd)

  1. <script src="https://mipcache.bdstatic.com/static/mipmain-v0.0.1.js" ></script >

一个完整的例子

  1. <!DOCTYPE html>
  2. <html mip>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  6.     <title>MIP DEMO</title>
  7.     <link rel="stylesheet" href="https://mipcache.bdstatic.com/static/mipmain-v0.0.1.css">
  8.     <!-- 在standard html中添加 -->
  9.     <link rel="miphtml" href="页面h5 url">
  10.     <!-- 在mip html中添加 -->
  11.     <link rel="standardhtml" href="页面h5 url">
  12. </head>
  13. <body>
  14.     <p class="mip-text">这是一个段落,纯文本形式</p>
  15.     <div class="mip-img-container">
  16.         <mip-img data-carousel="carousel" class="mip-element mip-img" src="//m.baidu.com/static/index/plus/plus_logo.png"></mip-img>
  17.     </div>
  18.     <div class="mip-img-container">
  19.         <mip-img data-carousel="carousel" class="mip-element mip-img" src="//m.baidu.com/static/index/plus/plus_logo.png">
  20.             <p class="mip-img-subtitle">带图片标题的类型</p>
  21.         </mip-img>
  22.     </div>
  23.     <p class="mip-text">这是另一个段落,纯文本形式</p>
  24.     <div class="mip-html">
  25.         <p style="text-align:center">自定义的文字居中</p>
  26.     </div>
  27.     <div class="mip-html">
  28.         <p>
  29.             <span style="color:#f00">自定义的红色字体</span>
  30.         </p>
  31.     </div>
  32.     <div class="mip-html">
  33.         <p>
  34.             <span><strong>自定义的加粗字体</strong></span>
  35.         </p>
  36.     </div>
  37. <script src="https://mipcache.bdstatic.com/static/mipmain-v0.0.1.js"></script>
  38. </body>
  39. </html>

其中,p.mip-img-subtitle是可选的,表示图片的信息

插入文本

对应mip规范中的纯文本,和后面的mip-html兼容

  1. <p class="mip-text">我是一段文本</p>

自定义样式

为了满足个性化需求,mip-html的方式承接所有需要自定义的标签 & 样式。封装了常用的文本对齐、文本加粗、背景、字号、有序列表、无序列表、引用、下划线等

  1. <div class="mip-html">
  2.     // 自定义的内容
  3. </div>

注:所有用户的自定义内容都必须在.mip-html
加粗

  1. <strong>加粗字体</strong>

居左、居中
其中,居左不需要做特殊处理,居右需要设置text-align: center

  1. <p style="text-align: center">居中文本</p>

列表


有序

  1. <ol>
  2.     <li>列表1</li>
  3.     <li>列表2</li>
  4. </ol>


无序

  1. <ul>
  2.     <li>列表1</li>
  3.     <li>列表2</li>
  4. </ul>


字体颜色、背景色

和前面的机制一样,都是通过加style来解决

  1. <p style="font-color: #f00">红色文字</p>

下划线(u)

  1. <u>带下划线</u>

引用

  1. <blockquote>引用主体</blockquote>

发布日期:

所属分类: 网站运营 SEO 标签: