章节
问答
课签
笔记
评论
占位
占位

媒体对象--默认媒体对象

媒体对象一般是成组出现,而一组媒体对象常常包括以下几个部分:

  ☑   媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容

  ☑  媒体对像的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片

  ☑  媒体对象的主体:常使用“media-body”表示,就是媒体对像中的主体内容,可以是任何元素,常常是图片侧边内容

  ☑  媒体对象的标题:常使用“media-heading”表示,就是用来描述对象的一个标题,此部分可选

如下图所示:

除了上面四个部分之外,在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。

在具体使用中如下所示:

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="http://img1.sycdn.imooc.com//52e1d29d000161fe06000338-300-170.jpg" alt="...">
    </a>
    <div class="media-body">
        <h4 class="media-heading">系列:十天精通CSS3</h4>
        <div>全方位深刻详解CSS3模块知识,经典案例分析,代码同步调试,让网页穿上绚丽装备!</div>
    </div>
</div>

运行效果如下:

原理分析:

媒体对象样式相对来说比较简单,只是设置他们之间的间距,如下所示:

/*bootstrap.css文件第4792行~4815行*/
.media,
.media-body {
  overflow: hidden;
  zoom: 1;
}
.media,
.media .media {
  margin-top: 15px;
}
.media:first-child {
  margin-top: 0;
}
.media-object {
  display: block;
}
.media-heading {
  margin: 0 0 5px;
}
.media > .pull-left {
  margin-right: 10px;
}
.media > .pull-right {
  margin-left: 10px;
}

任务

我来试试:把上面的代码做一下修改,改成“媒体对象(图片)”浮动右侧的效果。

效果图如下:

?不会了怎么办

参考代代码:

<div class="media">
    <a class="pull-right" href="#">
        <img class="media-object" src="http://img1.sycdn.imooc.com//52e1d29d000161fe06000338-300-170.jpg" alt="...">
      </a>
      <div class="media-body">
        <h4 class="media-heading">系列:十天精通CSS3</h4>
        <div>全方位深刻详解CSS3模块知识,经典案例分析,代码同步调试,让网页穿上绚丽装备!</div>
      </div>
</div>
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?