1、 运用HTML相关元素和CSS样式表,实现相册管理器的布局。
4个回答
2011-09-15
展开全部
相册管理,一般是一个小图缩列表,一个大图展示框。大体可以写个布局如下:
<div class="photo_viewer">
<div class="photo_show">
<img src="图片地址" alt="xx" />
</div>
<div class="photo_list">
<ul>
<li><img src="图片地址" alt="" /></li>
<li><img src="图片地址" alt="" /></li>
<li><img src="图片地址" alt="" /></li>
<li><img src="图片地址" alt="" /></li>
</ul>
</div>
</div>
<style type="text/css">
.photo_viewer{overflow:hidden;width:480px;height:480px;}
.photo_show{width:480px;height:320px;}
.photo_show img {width:300px;height:300px;border:1px solid #ddd;}
.photo_list{width:480px;height:150px;overflow:auto;margin-top:10px;}
.photo_list ul{margin:0;padding:0;width:100%;}
.photo_list li{width:25%;float:left;height:120px;}
.photo_list img{width:100px;height:100px;margin:10px;}
</style>
<div class="photo_viewer">
<div class="photo_show">
<img src="图片地址" alt="xx" />
</div>
<div class="photo_list">
<ul>
<li><img src="图片地址" alt="" /></li>
<li><img src="图片地址" alt="" /></li>
<li><img src="图片地址" alt="" /></li>
<li><img src="图片地址" alt="" /></li>
</ul>
</div>
</div>
<style type="text/css">
.photo_viewer{overflow:hidden;width:480px;height:480px;}
.photo_show{width:480px;height:320px;}
.photo_show img {width:300px;height:300px;border:1px solid #ddd;}
.photo_list{width:480px;height:150px;overflow:auto;margin-top:10px;}
.photo_list ul{margin:0;padding:0;width:100%;}
.photo_list li{width:25%;float:left;height:120px;}
.photo_list img{width:100px;height:100px;margin:10px;}
</style>
展开全部
哦
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2011-09-16
展开全部
什么?
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
这要看想做成什么样的,也就是所谓的切图,你找个差不多的网站把他的代码和样式拷过来 ,改下应该就差不多了
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询