CSS制作Facebook的媒体对象

作者：大漠 日期：2012-03-20 点击：904
media queries

前面在《OOCSS——核心篇》一文中有简单的提到Facebook的媒体对象（有的地方称作为“信息状态块”）的制作。那么今天老话重谈，主要使用不同的几种结构来制作这个媒体对象效果：

我们把上图拆分细化一下，可以划成下图的样子：

根据上图我们就可以轻松的写出需要的HTML结构。

HTML Markup:

		<div class="stbody">
		  <div class="stimg">img part</div>
		  <div class="sttext">text part</div>
		</div>

有了结构，我们就可以来分析样式的写法

CSS Code

		.stbody {
			min-height: 70px;
			margin-bottom: 10px;
			border-bottom: 1px dashed #c00;
		}
		.stimg {
			float: left;
			height: 50px;
			width: 50px;
			border: 1px solid #dedede;
			padding: 5px;
		}
		.sttext {
			overflow: hidden;
			min-width: 50px;
			word-wrap: break-word;
			padding: 5px;
		}

注：如果你的图片是带有链接的，那么可以将div换成a标签。

上面代码呈现的效果如下所示：

当然“div.sttext”里面的元素可以根据自己的要求来写。还有一种情况，我们有时图片在右边怎么办？其实答案不用我说，大家都知道。我这里介绍的方法就是在“div.stimg”标签中加上一个类名“stimgR”，然后并在其身上运用样式：

		.stimg.stimgR {
			float: right;
		}

那么此时效果就出来了：

此处有一个关键之处，如何让“sttext”中的内容不围绕在图片的周围，有关于解决这种现象有几种方法：

1、方法一：

		.sttext {
			oveflow: hidden;
			zoom:1
		}

2、方法二

		.sttext {
			display: table;
			zoom:1
		}

3、方法三

		.sttext {
			display: table-cell;
			zoom:1
		}

有关于这个的详细介绍大家可以参考《如何解决浮动元素周围环绕文字》一文。

为了让你的样式更具完美，在“.sttext”中还要让文本能自动换行：

		.sttext {
			word-wrap: break-word;
		}

有关于文本换行的详细介绍大家不仿参考《CSS3 Word-wrap》一文的介绍。

那么这样一个完美的媒体块的制作就算是完美了。

上面只是一种制作方法，接下来我们在来看另外一种：

HTML Markup

		<div class="sttbody">
		  <a href="aboutme.html" class="sttimg">
		    <img src="myimage.png" alt="img" />
		  </a>
		  <div class="sttext">
		    Something about me
		  </div>
		</div>

CSS Code

		.sttbody {margin: 10px;}
		.sttext {display: table-cell;zoom:1;}
		.sttext > :first-child{margin-top:0;}/*你也可以在这个标签中加上一个类名.nmT {margin-top:0;}*/
		.sttext > :last-child{margin-bottom:0;}/*在这个标签上加上一个类名.nmB {margin-bottom:0}*/
		.sttimg {float:left;margin-right:10px;}/*这两个属性完全可以用类名来代替：.fl{float:left} .mrm {margin-right: 10px}*/
		.sttimg img {display: block;}
		.sttimgR {float:right;margin-left: 10px;}/*这两个属性完全可以用类名来代替：.fr{float:right} .mlm {margin-left: 10px}*/

上面这种方法采用的是模块化思路，当你一个项目多处出现这样的样式风格，我们都可以采用这个模板来制作。前面在《OOCSS——核心篇》一文中专门介绍了这一个东东。

上面是单一的，如果你有多个这样的循环效果，上面的效果也可以帮您完成，不过我更建议使用列表的形式来制作。

HTML Markup

		<ul>
		  <li class="stbody>
		    <div class="stimg"></div>
		    <div class="sttext"></div>
		  </li>
		  [...]
		  <li class="stbody">
		    <div class="stimg"></div>
		    <div class="sttext"></div>
		  </li>
		</ul>

我们只需改变结构，无需换样式就能做出效果：

这些效果做起来都并不难，但有时我们会碰到里面嵌套一层类似效果：

正如上图展示的一样，那么肯定有人在想，要重新来过一个结构，在来过一套样式。如果你是这么想的话，那您就错了，为什么呢？不多说，直接看下文。

首先我在前面的HTML结构上做一下修改：

		<ul>
		  <li class="stbody>
		    <div class="stimg"></div>
		    <div class="sttext">
		      <!-- 父元素内容	-->
		
		      <div class="stbody img_attachment">
		        <div class="stimg">img part</div>
		        <div class="sttext">text part</div>
		      </div>
		
		    </div>
		  </li>
		  [...]
		  <li class="stbody">
		    <div class="stimg"></div>
		    <div class="sttext">
		      <!-- 父元素内容	-->
		
		      <div class="stbody img_attachment">
		        <div class="stimg">img part</div>
		        <div class="sttext">text part</div>
		      </div>
		
		    </div>
		  </li>
		</ul>

我们只是在原先的“div.sttext”内容下面在放了一个这样的结构，并给里面的“stbody”加了一个类名“img_attachment”，我们只稍为加一点点样式就OK了：

		.img_attachment {
			margin-top:14px;
		}
		.img_attachment.stbody {
			border-bottom: none;
			margin-bottom:0;
		}

看看我自己做的效果吧：

那么今天啰嗦扯了一堆，不知道您是否看明白了。虽然此文介绍的制作几种方法都不难，可以说很常见，但能运用得好的我想还是需要一点技巧的，特别的是重用，套用。正如上面介绍的一样。不过今天我最想给大家传达的是一个思路“在平时制作中，把相同的一块提出来，拆分成一个独立的模块。在拆分模块时应保证数量尽可能的少的原则下，做到尽可能的简单，以提高他的重用性。”

那么今天就扯到这了，希望大家喜欢这篇文章的内容，如果您有更好的思路，请在下面的评论中与大家一起分享。

如需转载烦请注明出处：W3CPLUS

返回顶部