现代 CSS

CSS制作Facebook的媒体对象

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

前面在《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

jordans for sale china

返回顶部