css中 li一行三列后图片加说明怎么加
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css中 li一行三列后图片加说明怎么加相关的知识，希望对你有一定的参考价值。
下面是源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.aaliwidth:200px; display:inline;
.aaulwidth:600px; float:left;
.aali imgborder:1px #FF0000 solid
-->
</style></head>
<body>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFCC00">
<tr>
<td><ul class="aaul">
<li class="aali"><img src='0908090912196372.gif' width="150" height="120" border="0" /></li>
<li class="aali"><img src='0908090911504419.gif' width="150" height="120" border="0" /></li>
<li class="aali"><img src='0908090911255594.jpg' width="150" height="120" border="0" /></li>
<li class="aali"><img src='0908090910535564.gif' width="150" height="120" border="0" /></li>
<li class="aali"><img src='0908090910157765.gif' width="150" height="120" border="0" /></li>
<li class="aali"><img src='0908090909468816.gif' width="150" height="120" border="0" /></li>
<li class="aali"><img src='0908090909083444.gif' width="150" height="120" border="0" /></li>
<li class="aali"><img src='0908081513172719.gif' width="150" height="120" border="0" /></li>
<li class="aali"><img src='0908081512422236.gif' width="150" height="120" border="0" /></li>
</ul></td>
</tr>
</table>
</body>
</html>
我想加大LI之间的【上下间距】和在图片下面加【文字说明】
要求：
只能用div ul li 来实现图片一行三列排序 不能用表格
图片的大小是固定的，外面div li 不能超过660
下面是现在效果图
解决后加分100
下面的回答差不多就是那个意思了！不过里面的东西是循环生成的！
就是<li>是循环出来的 如果3个图片后在插入一个说的的li那样的循环没法做出来啊！！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.aaliwidth:200px; display:inline; float:left
.aaulwidth:600px; float:left;
.aali imgborder:1px #FF0000 solid
-->
</style></head>
<body>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFCC00">
<tr>
<td>
<ul class="aaul">
<li class="aali"><img src='0908090912196372.gif' width="150" height="120" border="0" /></li>
<li class="aali"><img src='0908090911504419.gif' width="150" height="120" border="0" /></li>
<li class="aali"><img src='0908090911255594.jpg' width="150" height="120" border="0" /></li>
<li class="aali">这是第一张图片</li>
<li class="aali">这是第二张图片</li>
<li class="aali">这是第三张图片</li>
<li class="aali"><img src='0908090910535564.gif' width="150" height="120" border="0" /></li>
<li class="aali"><img src='0908090910157765.gif' width="150" height="120" border="0" /></li>
<li class="aali"><img src='0908090909468816.gif' width="150" height="120" border="0" /></li>
<li class="aali">这是第四张图片</li>
<li class="aali">这是第五张图片</li>
<li class="aali">这是第六张图片</li>
<li class="aali"><img src='0908090909083444.gif' width="150" height="120" border="0" /></li>
<li class="aali"><img src='0908081513172719.gif' width="150" height="120" border="0" /></li>
<li class="aali"><img src='0908081512422236.gif' width="150" height="120" border="0" /></li>
<li class="aali">这是第七张图片</li>
<li class="aali">这是第八张图片</li>
<li class="aali">这是第九张图片</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
导航条槽状分割线用css怎么做
就是这种样式的分割线，css代码怎么写
就可以了
也可以用图片来做，图片做出来的效果比较美观
给每个li 后面加个<SPAN>里面加入图片</span> 在吧span 浮动为左浮动 参考技术A 方法很多，建议使用：
给ul一个背景色,然后设置li外边距margin-right:1px; 参考技术B 其实你仔细看会发现这只是两条边框，视觉上看起来像是槽状分割线，可以给
ul加border-bottom:1px solid #777; 然后给li加上border-bottom:1px solid #fff;本回答被提问者和网友采纳 参考技术C <ul><li>新闻公告</li></ul>
ulmargin-left:-1px/*去掉第一个文字的第一条线*/
liwidth:80px;border-left:1px solid #cf0000; 参考技术D 把那条线切成图片，然后给li用这个图片做背景，不重复no-repeat 靠右right
以上是关于css中 li一行三列后图片加说明怎么加的主要内容，如果未能解决你的问题，请参考以下文章