请问怎样操作div+css模板做图片文字列表商品静态页？例如下图，大神请帮帮忙越详细越好，另:如有

html-css026

请问怎样操作div+css模板做图片文字列表商品静态页？例如下图，大神请帮帮忙越详细越好，另:如有,第1张

这个其实很简单，一个UL ，然后每个 产品展示图 放在一个li 里面，然后css 里面 所有 li 左浮动就可以了，记得给ul 要用CSS 设置宽高，或者 overflow：hidden 不然后面的块盒子 容易错位，塌陷

<html>

<head>

<style type="text/css">

*{margin:0padding:0font-size:12pxtext-align:center}

.list{margin:50px autowidth:300px}

.item {clear:both}

.item dt{float:leftwidth:110pxtext-align:left}

.item dt a img{border:2px #ddd solidwidth:96pxheight:96px}

.item dt a:hover img{border:2px red solid}

.item dd {float:leftwidth:190pxline-height:20pxtext-align:left}

</style>

</head>

<body>

<div class="list">

<dl class="item">

<dt><a href=""><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a></dt>

<dd>鼠标移到图片上，图片四周的边框线变颜色鼠标移到图片上，图片四周的边框线变颜色鼠标移到图片上，图片四周的边框线变颜色图片四周的边框线变颜色</dd>

</dl>

<dl class="item">

<dt><a href=""><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a></dt>

<dd>鼠标移到图片上，图片四周的边框线变颜色</dd>

</dl>

</div>

</body>

</html>

目前只能用float。

一般情况下最佳选择是三个都用float:left，或者第三个用相反方向的，float:right。

至于ul,li列表方式。可以想象成li就是 div,用法一致。

需要注意的是嵌套使用ul,li时，父级的ul,li应用了float属性后，子级将继承该属性，一般需要在子级应用clear:both反之子级应用后会对下一个父级产生影响。这些需要自己反复测试，情况很多，代码也比较多。