论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS布局教程:如何用CSS构建图片、文字混排的产品展示?

文章类别:div+css布局 | 发表日期:2008-10-5 15:32:54



  有朋友在QQ上问我一个关于CSS的问题,一个产品展示页,有产品图片与产品名称,如何用CSS布局来实现,下面谈谈我的观点以及提出我的方法,大家可以讨论,如有不当,请大家在21shipin.com上评论或留言指出来,大家共同进步。

  从事网页设计工作的朋友应该有过很多这样的案例,上面放置企业的产品图片,下面放置产品的名字,点击图片或产品名字可以查看产品的具体资料。当然,这样的形式,在其它网站上也经常出现,例如图片新闻、写真壁纸站等等。我们看效果图片(可点击放大):


  首先我们分析一下,这样的形式每一组是类似的:上部一个图片链接,下部一个文字链接,然后重复。进行适应的排列即可。我们可以将它们看作是一组无序列表的列表项,而一页中的所有产品即是一个无序列表。

  每一个列表项,包含了一张图片并进行链接,文字链接。我们用CSS对图片与文字进行适当的控制,即可实现这样的效果。然后让每一个列表项进行浮动,让它们一行三个,并且在三个列表项水平居中对齐于整个无序列表。

  好了,废话不多说了,上面的思路基本清楚了,我们开始HTML代码的编写:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<ul id="products">
<li>
<a href="#"><img src="21shipin.com.jpg" alt="" /></a>
<span><a href="#">标题的位置</a></span>
</li>
<li>
<a href="#"><img src="21shipin.com.jpg" alt="" /></a>
<span><a href="#">标题的位置</a></span>
</li>
……以下省略
</ul>

  我们建立了一个无序列表,ID为products。每一个列表项包括了一个图片链接,一个文字链接,为了便于CSS进行控制,我们将文字链接放置在span中。

  下面我们开始CSS代码的编写:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
* {
margin:0;
padding:0;
font-size:12px;
color:#000;
text-decoration:none;
}

  CSS整体布局声明:边距与填充均为零,12px的文字大小,黑色的文字,去除文字装饰线(即定义链接文字无下划线)。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#products {
width:582px;
margin:50px auto;
}

  定义无序列表的宽度为582px,关于这个数值的由来我们在下面会有说明,上下边距为50px,左右边距为自动,实现UL的水平居中对齐。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#products li {
width:154px;
height:154px;
float:left;
margin-left:30px;
display:inline;
}

  定义无序列表的列表项的样式,即一组“产品图片”和“文字名称”:宽度为154px,高度为154px,向左浮动,左边距为30px。为了消除双倍边距的bug,我们设置display:inline;。我们一行是三组内容,共有四个边距,154*3 30*4=582。这就是整个无序列表宽度的由来,看下面的示例图片(可点击放大):


div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#products li a {
display:block;
}
#products li a img {
border:1px solid #666;
padding:1px;
}

  设置链接均为块元素。轻易进行控制,而且设为块元素以后,增大了鼠标悬停的区域,提高用户体验。
  设置链接图片的边框为1px的实线,颜色为深灰色。设置填充为1px,让边线与图片之间产生一象素的空隙。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#products li span a {
width:154px;
height:30px;
line-height:24px;
text-align:center;
}

  这些代码是对链接文字的样式定义,宽度和高度是154px、30px。行高为24px,文字居中对齐。我们来看看现在的效果!

  或许你认为我们的工作已经结束了,图片及文字已经按预定的方式上下排列,而且整个页面看上去还不错。但我们需要注重,或许文字并不是固定的,或许是三个字,或许是十五个字,假如文字过多,会产生什么样的后果呢?(可点击放大)


  晕倒!文字将li挤走了,一切都走样了。你会想到可以用ASP脚本来控制读取的文字数量,或许这并不是什么好主意,我们完全可以通过CSS来搞定它,我们的链接是块元素,我们可以设置文字超出宽度154px的时候,自动的隐藏,并且在IE中可以实现省略号的效果,我们在#products li span a增加以下代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;

  我们再来看看效果!现在就不会出现破坏布局的情况了!
  欢迎大家参与讨论,说说你的看法,这样的形式如何制作最合理科学!
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058