HTML+CSS开发模块(布局)API之一

效果图：

代码：

<style>
/*全局级*/
a{color:red;text-decoration:none;}a:hover{color:red;text-decoration:none;}
img{display:inline-block;border:none;}
/*模块级*/
.mt_box1{position:relative;width:300px;height:auto;border:1px solid #ccc;overflow:hidden;}
.mt_box1 .tit{position:relative;width:300px;height:20px;font-size:16px;}
.mt_box1 .tit-detail{position:relative;width:300px;height:auto;margin:-5px 0px 0px;line-height:24px;font-size:12px;}
.mt_box1 .tit-detail-img{display:inline;float:left;position:relative;margin:0 10px 0 0;padding:5px 0 0;}
</style>
<div class="mt_box1">
	<h3 class="tit">
		<a href="#" target="_blank" title="#">从ORacle到MySQL，全额宝云实践分享</a>
	</h3>
	<p class="tit-detail">
		<a href="#" target="_blank" title="#">
			<img class="tit-detail-img" src="http://images.csdn.net/20131108/527c2fb1073ce.jpg" alt="#" with="80" height="60"/></a><img class="tit-detail-img" src="http://images.csdn.net/20131108/527c2fb1073ce.jpg" alt="#" with="20" height="15"/><a href="#" target="_blank" title="#">囿于安全性、合规性和风险等方面的挑战，即使海外，金融业也从未真正将业务迁往公有云。无可奈何之下，余额宝“背水一战”，却发现胜利的果实是如此甜美.
		</a>
	</p>
</div>

 

 

         /*
		布局绝对四个角定位
	*/
	.jask-layout-jd,.jask-layout-jd .tit-detail,.jask-layout-jd .lt,.jask-layout-jd .rt,.jask-layout-jd .rb,.jask-layout-jd .lb{position:relative;display:inline-block;overflow:hidden;}
	.jask-layout-jd .lt,.jask-layout-jd .rt,.jask-layout-jd .rb,.jask-layout-jd .lb{position:absolute;z-index:9999;}
	.jask-layout-jd .lt{left:0;top:0;}
	.jask-layout-jd .rt{right:0;top:0;}
	.jask-layout-jd .rb{right:0;bottom:0;}
	.jask-layout-jd .lb{left:0;bottom:0;}
	
	.yj1,.yj2,.yj3,.yj4{width:9px;height:8px;}
	/*圆角效果一*/
	.yj1{background-image:url(images/radius1/lt.png);}
	.yj2{background-image:url(images/radius1/rt.png);}
	.yj3{background-image:url(images/radius1/rb.png);}
	.yj4{background-image:url(images/radius1/lb.png);}
	/*拉姆齐效果二*/
	.yjt1,.yjt2,.yjt3,.yjt4{width:9px;height:8px;}
	.yjt1{background-image:url(images/radius2/lt.png);}
	.yjt2{background-image:url(images/radius2/rt.png);}
	.yjt3{background-image:url(images/radius2/rb.png);}
	.yjt4{background-image:url(images/radius2/lb.png);}

<div class="jask-layout-jd">
     <div class="lt yj1"></div>
     <div class="rt yj2"></div>
     <div class="rb yj3"></div>

     <div class="lb yj4"></div>

</div>