页面伪装异步加载中...
返回首页 mail me! 订阅rss Follow me

DIV横向排列平铺。

Div横向平铺

先上图。

所谓横向的平铺就像上面那样的内容模型那样,首先是一个容器,也就是途中的半透明的部分,然后里面的内容用类似矩形的形状进行平铺,内容由PHP脚本的循环进行输出。

其实在之前的外卖网站制作的过程中就考虑的是这样的布局方式,只是当时对这种方式模型理解的不够透彻,所以在布局中存在一定的bug,虽然用其他的办法进行弥补和掩饰,但问题始终是问题,是依然存在的。

这次的布局中,思路比较清晰,所以理解上比之前的布局要透彻一些。

好了 废话不多说,上代码。我贴上图片中间半透明部分的所有源码

<div class="boxlist">
<div class="boxlisttop">
			         {dede:list col='1' row='3' titlelen='20' infolen='100' imgwidth='120' imgheight='80' pagesize='18' typeid='95'}
<div class="smallbox">
<div class="imagebox">[field:imglink/]</div>
<div class="textlink">[field:textlink/]</div>
</div>
{/dede:list}</div>
<div class="boxlistbottom">   {dede:pagelist listitem="info,index,end,pre,next,pageno" listsize="5"/}</div>
<div class="list_copyright">
		            {dede:global.cfg_powerby/} 建议在IE7以上,且在1280*800分辨率下浏览</div>
</div>
/*CSS部分*/
.boxlist{
  position:absolute;
  width:900px;
  height:440px;
  background:url(boxbg.png);
  top:35px;
  left:30px;
  padding:20px 0 20px 0;
}
.boxlisttop{
   height:360px;
 
}
.boxlistbottom{
   padding:10px 0 0 0;
   text-align:center;
}
.smallbox{
	float:left;
 
  width:150px;
  height:120px;
}
 
.imagebox{
   width:120px;
   height:80px;
   margin:0 auto;
   border:1px solid #b3b3b3;
}
.textlink{
  text-align:center;
  padding:7px 0 0 0;
}
 
.list_copyright{
	position:absolute;
	height:20px;
	width:900px;
	bottom:0px;
	left:0px;
	text-align:center;
	color:#fff;
}

ISNULL said,

十月 9, 2009 @ 2:30 上午

using Internet Explorer 7.0 Internet Explorer 7.0 on Windows XP Windows XP

哇喔~~ 不错,看起来很拉风的样子,我引用走拉拉~~~

[回复]

小七 said,

十月 19, 2009 @ 11:08 上午

using 360Safe Explorer 360Safe Explorer on Windows XP Windows XP

半透明的,呵呵,很漂亮啊

[回复]

AnQ said,

十二月 29, 2009 @ 2:05 下午

using Internet Explorer 7.0 Internet Explorer 7.0 on Windows XP Windows XP

这2天正常学习,div+css,刚好看看这个例子

[回复]

开心凡人 said,

十二月 29, 2009 @ 9:53 下午

using Internet Explorer 8.0 (Compatibility Mode) Internet Explorer 8.0 (Compatibility Mode) on Windows 7 Windows 7

2009年的尾迹,再到处逛一逛,呵呵

[回复]

铁猴子 said,

十二月 30, 2009 @ 5:09 下午

using Firefox 3.6b5 Firefox 3.6b5 on Windows XP Windows XP

不错的设计。

另:此博客的字体颜色稍微加深一点吧?!这样浅灰色看着眼睛挺累,呵呵(我近视眼)

[回复]

一兮 回复:

哈“最近迷上灰色风格了。

[回复]

Thomaslii said,

七月 16, 2010 @ 10:30 上午

using Firefox 3.6.6 Firefox 3.6.6 on Windows XP Windows XP

不错,多谢,您辛苦了。留个脚印,表示支持,呵呵!

[回复]

sos said,

一月 21, 2011 @ 11:19 上午

using Internet Explorer 8.0 (Compatibility Mode) Internet Explorer 8.0 (Compatibility Mode) on Windows XP Windows XP

不错的效果实现,LZ辛苦了

[回复]

RSS feed for comments on this post

发表评论

Trackback+Pingback:0

TrackBack URL for this entry
http://blog.liuyixi.com/2009/10/07/divhengxiangpailiepingpu/trackback/
Listed below are links to weblogs that reference
DIV横向排列平铺。 from 一兮 – 生活,工作,点点滴滴