MIP组件布局有哪些 MIP组件布局怎么使用
支持的布局种类
| 类别 | 强制 width | 强制 height | 详细说明 |
|---|---|---|---|
| responsive | 是 | 是 | 能够根据width、height的值，算出元素对应的比例，在不同屏幕宽度上做自适应，非常适合图片、视频等需要大小自适应的组件 |
| fixed-height | 否 | 是 | 元素的高度固定,width缺省或者取值为auto，比较适合 mip-carousel |
| fill | 否 | 否 | 元素的大小根据父节点的大小自动撑开 |
| container | 否 | 否 | 元素的大小由他们的子节点大小决定,类似 html 的 div |
| nodisplay | 否 | 否 | 元素不展现，即 display 为 none；这种元素可应用于：他自身展现依赖用户的点击等行为的触发 |
| fixed | 是 | 是 | 元素根据 width 和 height 固定高宽，不随 media 变化 |
使用
MIP 元素添加属性 layout，取值参照上面的种类
<mip-img
layout="responsive"
width="350"
height="263"
popup=""
alt="baidu mip img"
src="http://www.111cn.net//get_pic/upload/image/20161216231233.jpg">
layout 属性缺省规则
| width | height | 其他属性 | 默认布局 |
|---|---|---|---|
| 有 | 有 | 无 | fixed |
| 有 | 有 | 存在sizes 参数 | responsive |
| 无或取值为 auto | 有 | 无 | fixed-height |
| 无 | 无 | 无 | container |
layout 默认值
所有MIP元素都会有layout。由于移动端的设计大部分是块状的，所以默认的layout是container，类似于div。如果有其它的样式需求，如inline、inline-block。可通过样式覆盖的方式修改元素display等
MIP组件有哪些？MIP组件有三种：内置组件、个性化组件以及广告组件，不同的组件有着不同的作用，下面请看详细的介绍。1、内置组件
图片组件（mip-img）
视频组件（mip-video）
mip-pix 组件（mip-pix）
轮播组件（mip-carousel）
iframe 组件（mip-iframe）
2、个性化组件
折叠节点组件（mip-according）
动图组件（mip-anim）
app下载组件（mip-appdl）
音频组件（mip-audio）
百度统计组件（mip-stats-baidu）
筛选组件（mip-filter）
悬浮组件（mip-fixed）
表单组件（mip-form）
系统区分组件（mip-html-os）
页面跳转组件（mip-link）
菜单组件（mip-nav-slidedown）
分享组件（mip-share）
侧边栏组件（mip-sidebar）
天润统计组件（mip-stats-tianrun）
3、广告组件
广告组件（mip-ad）
如需其他组件，如广告组件和统计组件，可以参考组件开发规范开发并提交给我们。
在某些情况下，站点对于同一个html页面，可能存在两种，一个是mip页，一个是原页面。百度会抓取这两个页面，并利用canonical标签将它们联系起来。关联标签
你必须在MIP添加<link rel="canonical">指向原始页面，以保证MIP更好的继承原始页面的权重。
同时，你可以在原始页面中添加<link rel="miphtml">指向MIP，以使得搜索引擎更好的发现你创建的MIP。
使用规则：
- 在MIP页中使用<link rel="canonical”>，指向原页面(m站)，也可以指向原始网页中<link rel="canonical">所指向的pc页。
- 若MIP页没有对应的原页面，则指向MIP页本身url。
- 在原页面(m站)使用<link rel="miphtml">，用来指向MIP页。
在head中添加link标签让百度搜索发现你的页面
两种页面同时存在
在非 MIP 页中添加：
<linkrel="miphtml"href="https://m.baidu.com/mip/demo.html">
在 MIP 页中添加：
<linkrel="canonical"href="https://m.baidu.com/demo.html">
如果只有 MIP 页
同样需要添加，指向自己：
<linkrel="canonical"href="https://m.baidu.com/mip/demo.html">
新建MIP页的文件path建议
原网页与mip页的url的对应关系尽量简单、直接。
原网页出现的文档名或文档id，在MIP页命名时也要出现。
本次为大家带来的是MIP组件开发规范，帮助大家了解组件在开发时需要用到的组建是哪些，以及这些组件的作用等。开发文档
站长开发扩展组件请参照下面链接
扩展组件 开发文档
开发辅助工具库
开发辅助工具和模块
手势：单击，双击，滑动
其它：dom触发js事件
组件类型划分
1、内置组件
定义：为了解决性能、安全性问题必须要使用的组件，代码被集成在mip.js中。如 mip-img、mip-video 等。
2、扩展组件
定义：其它类型的组件，一般情况下组件开发都是扩展组件，使用时需要引入对应的js文件。
相关文章
- 有时为了网站安全和版权问题，会对自己写的php源码进行加密，在php加密技术上最常用的是zend公司的zend guard 加密软件，现在我们来图文讲解一下。 下面就简单说说如何...2016-11-25
- ps软件是现在很多人都会使用到的，HSL面板在ps软件中又有着非常独特的作用。这次文章就给大家介绍下ps怎么使用HSL面板，还不知道使用方法的下面一起来看看。  ...2017-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 许多的朋友对于Plesk控制面板应用不是非常的了解特别是英文版的Plesk控制面板，在这里小编整理了一些关于Plesk控制面板常用的使用方案整理，具体如下。 本文基于Linu...2016-10-10
- 这篇文章主要介绍了C#窗体布局方式详解的相关资料,需要的朋友可以参考下...2020-06-25
使用insertAfter()方法在现有元素后添加一个新元素
复制代码 代码如下: //在现有元素后添加一个新元素 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement){ parent.appendChild(newEl...2014-05-31使用percona-toolkit操作MySQL的实用命令小结
1.pt-archiver 功能介绍： 将mysql数据库中表的记录归档到另外一个表或者文件 用法介绍： pt-archiver [OPTION...] --source DSN --where WHERE 这个工具只是归档旧的数据，不会对线上数据的OLTP查询造成太大影响，你可以将...2015-11-24- 大概有如下步骤 新建项目Bejs 新建文件package.json 新建文件Gruntfile.js 命令行执行grunt任务 一、新建项目Bejs源码放在src下，该目录有两个js文件，selector.js和ajax.js。编译后代码放在dest，这个grunt会...2014-06-07
如何使用php脚本给html中引用的js和css路径打上版本号
在搜索引擎中搜索关键字.htaccess 缓存，你可以搜索到很多关于设置网站文件缓存的教程，通过设置可以将css、js等不太经常更新的文件缓存在浏览器端，这样访客每次访问你的网站的时候，浏览器就可以从浏览器的缓存中获取css、...2015-11-24jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。 在更新的 2.0 版本中，将不再支持 IE 6/7/8。 以后，如果用户需要支持 IE 6/7/8，只能使用 jQuery 1.9。 如果要全面支持 IE，并混合...2014-05-31安装和使用percona-toolkit来辅助操作MySQL的基本教程
一、percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合，用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务，这些任务包括： 检查master和slave数据的一致性 有效地对记录进行归档 查找重复的索...2015-11-24- 一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24
- 目前，JSON已经成为最流行的数据交换格式之一，各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》，探讨它的设计思想。今天，我想总结一下PHP语言对它的支持，这是开发互联网应用程序（特别是编写API）必须了解的知识...2015-10-30
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景，本文主要介绍了Vue动态查询规则生成组件，需要的朋友们下面随着小编来一起学习学习吧...2021-05-27
- 无限级分类在开发中经常使用，例如：部门结构、文章分类。无限级分类的难点在于“输出”和“查询”，例如 将文章分类输出为<ul>列表形式； 查找分类A下面所有分类包含的文章。1.实现原理 几种常见的实现方法，各有利弊。其中...2015-10-23
- C#注释的一些使用方法浅谈，需要的朋友可以参考一下...2020-06-25
- php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25
- 前几天在百度知道里面看到有人问PHP中双冒号::的用法，当时给他的回答比较简洁因为手机打字不大方便！今天突然想起来，所以在这里总结一下我遇到的双冒号::在PHP中使用的情况！双冒号操作符即作用域限定操作符Scope Resoluti...2015-11-08
- mysqli封装了诸如事务等一些高级操作，同时封装了DB操作过程中的很多可用的方法。应用比较多的地方是 mysqli的事务。...2013-10-02