用 DIV+css做如下图效果 急!

 我来答
习惯受伤
2011-11-10 · TA获得超过446个赞
知道小有建树答主
回答量:459
采纳率:0%
帮助的人:192万
展开全部
楼上的还说楼主是新手,我看你们也是新手把。呵呵,样式、HTML如下:
(注:纯属手写,未测试)
<style>
#panne{ width:300px; height:400px;}
#panne .title{ width:300px; height:40px; line-height:40px; background:url(../images/title_bg.gif) no-repeat; over-flow:hidden;}
#panne .title span{ display:block; width:40px; float:right; text-align:left;}
#panne .body{ width:300px; height:auto; over-flow:hidden; border:1px solid #cccccc; border-top:none;}
#panne .body .innerbody{ margin:10px; line-height:180%;}
#panne .body .innerbody .imglist,.newslist{ height:1%; over-flow:hidden;}
#panne .body .innerbody .imglist li{ width:95px; float:left; display:inline; text-align:center}
#panne .body .innerbody .newslist{ line-height:180%;}
#panne .body .innerbody .newslist li{}
</style>

HTML如下:
<div id="panne">
<div class="title">
<span><a href="#">进入</a></span>
</div>
<div class="body">
<div class="innerbody">
<ul class="imglist">
<li>
<img src="#" width="80" height="120" />
<p>简介</p>
</li>
<li>
<img src="#" width="80" height="120" />
<p>简介</p>
</li>
<li>
<img src="#" width="80" height="120" />
<p>简介</p>
</li>
</ul>
<ul class="newslist">
<li><a href="#">新闻标题</a></li>
<li><a href="#">新闻标题</a></li>
<li><a href="#">新闻标题</a></li>
<li><a href="#">新闻标题</a></li>
<li><a href="#">新闻标题</a></li>
</ul>
</div>
</div>
</div>
设计广场
2011-11-10 · TA获得超过1749个赞
知道大有可为答主
回答量:1351
采纳率:75%
帮助的人:1327万
展开全部
最简单的方法,是你这个效果在哪个网页上看到的,把它的html+div的代码复制下来,再把指定css文件调下来,就可以非常快地复制它的效果了。看样你是新手
追问
饿,  不是网站上搞的,你帮我弄起来。。?
追答
css 三排并列横代码
另外告诉你不知道你用什么建站,自己编辑框架?推荐直接用现在流行的一些cms做站。

div{
width:200px;
height:600px;
float:left;
margin-left:20px;
background:red;
}

div并列的重点在于float,否则每一个div都会换行。另一点就是设置div宽度,如果宽度不足以放下一个div时,则该div换行。
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式