跪求一界面

jiang_jiajia10 2009-10-10 01:30:32
地址如下：
http://hi.easypha-max.net.cn/sns/zu/
需求如下：
1.div+css布局
2.最好用ul的形式作展示。
代码如


<ul class="people-list">



			<li>

				<span class="headpichold">

					<a style="cursor: pointer;" href="http://renren.com/profile.do?portal=homeFootprint&id=245160121" title="查看刘黎LIU 리자的个人主页"><div style="background: transparent url(http://hdn.xnimg.cn/photos/hdn121/20091004/2215/tiny_MM7z_29145b019118.jpg) no-repeat scroll center center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 50px; height: 50px;" class="" title="" id=""></div></a>

				</span>

				<span class="clearfix">



					<a href="http://renren.com/profile.do?portal=homeFootprint&id=245160121">刘黎LIU 리자</a>

				</span>

			</li>



			<li>

				<span class="headpichold">

					<a style="cursor: pointer;" href="http://renren.com/profile.do?portal=homeFootprint&id=277600061" title="查看张继业的个人主页"><div style="background: transparent url(http://head.xiaonei.com/photos/0/0/men_tiny.gif) no-repeat scroll center center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 50px; height: 50px;" class="" title="" id=""></div></a>

				</span>

				<span class="clearfix">



					<a href="http://renren.com/profile.do?portal=homeFootprint&id=277600061">张继业</a>

				</span>

			</li>



			<li>

				<span class="headpichold">

					<a style="cursor: pointer;" href="http://renren.com/profile.do?portal=homeFootprint&id=221980018" title="查看高瑞祥的个人主页"><div style="background: transparent url(http://hdn211.xnimg.cn/photos/hdn211/20090222/13/50/tiny_BWKf_14927o204237.jpg) no-repeat scroll center center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 50px; height: 50px;" class="" title="" id=""></div></a>

				</span>

				<span class="clearfix">



					<a href="http://renren.com/profile.do?portal=homeFootprint&id=221980018">高瑞祥</a>

				</span>

			</li>



			<li>

				<span class="headpichold">

					<a style="cursor: pointer;" href="http://renren.com/profile.do?portal=homeFootprint&id=291813231" title="查看胡家鑫的个人主页"><div style="background: transparent url(http://hdn.xnimg.cn/photos/hdn521/20090918/1035/tiny_enXJ_174n019118.jpg) no-repeat scroll center center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 50px; height: 50px;" class="" title="" id=""></div></a>

				</span>

				<span class="clearfix">



					<a href="http://renren.com/profile.do?portal=homeFootprint&id=291813231">胡家鑫</a>

				</span>

			</li>



			<li>

				<span class="headpichold">

					<a style="cursor: pointer;" href="http://renren.com/profile.do?portal=homeFootprint&id=228139059" title="查看李晓梅的个人主页"><div style="background: transparent url(http://hdn.xnimg.cn/photos/hdn121/20090930/1245/tiny_P0Rx_7779p019118.jpg) no-repeat scroll center center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 50px; height: 50px;" class="" title="" id=""></div></a>

				</span>

				<span class="clearfix">



					<a href="http://renren.com/profile.do?portal=homeFootprint&id=228139059">李晓梅</a>

				</span>

			</li>



			<li>

				<span class="headpichold">

					<a style="cursor: pointer;" href="http://renren.com/profile.do?portal=homeFootprint&id=265738021" title="查看王耀辉的个人主页"><div style="background: transparent url(http://hdn511.xnimg.cn/photos/hdn511/20090822/2235/tiny_1E65_112633a204236.jpg) no-repeat scroll center center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 50px; height: 33px;" class="" title="" id=""></div></a>

				</span>

				<span class="clearfix">



					<a href="http://renren.com/profile.do?portal=homeFootprint&id=265738021">王耀辉</a>

				</span>

			</li>



		</ul>

3.每行5个，超过5个自动换行，样式不会改变。

谢谢！
...全文
197 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
poorqin 2009-10-30
  • 打赏
  • 举报
 回复
up
qq243080253 2009-10-21
  • 打赏
  • 举报
 回复
up
hookee 2009-10-10
  • 打赏
  • 举报
 回复
不考虑两边上的图的话,可以自动换行，否则要加脚本


<style>

body{background:#E31F20;text-align:center;}

#pd{display:block;list-item:none;width:750px;margin:0;padding:0}

#pd li{float:left;background:url(http://hi.easypha-max.net.cn/sns/zu/img/new3.gif) repeat-x;display:inline-block;width:130px;height:167px;margin:0;padding:0 20px 20px 20px;font-size:13px;}

.lb{background:#F9DDDB;width:100px;height:24px;padding-top:5px;text-align:center;color:#900;font-size:12px;}

</style>

<ul id="pd">

	<li>

		<img src="http://hi.easypha-max.net.cn/sns/zu/img/new6.gif"><div class="lb">小麦草素</div>

	</li>

	<li>

		<img src="http://hi.easypha-max.net.cn/sns/zu/img/new6.gif"><div class="lb">小麦草素</div>

	</li>

	<li>

		<img src="http://hi.easypha-max.net.cn/sns/zu/img/new6.gif"><div class="lb">小麦草素</div>

	</li>

	<li>

		<img src="http://hi.easypha-max.net.cn/sns/zu/img/new6.gif"><div class="lb">小麦草素</div>

	</li>

	<li>

		<img src="http://hi.easypha-max.net.cn/sns/zu/img/new6.gif"><div class="lb">小麦草素</div>

	</li>

</ul>
jiang_jiajia10 2009-10-10
  • 打赏
  • 举报
 回复
UP
jiang_jiajia10 2009-10-10
  • 打赏
  • 举报
 回复
jiang_jiajia10 2009-10-10
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 hookee 的回复:]
HTML code<style>
.people-list{display:block;list-item:none;width:375px;margin:0;padding:0}
li{float:left;display:inline;width:75px;padding-bottom:20px;font-size:13px;}
.clearfix{display:block;width:50¡­
[/Quote]
谢谢你，能按照这个思路给我写一个，http://hi.easypha-max.net.cn/sns/zu/ 和这个链接一样的么
hookee 2009-10-10
  • 打赏
  • 举报
 回复 


<style>

.people-list{display:block;list-item:none;width:375px;margin:0;padding:0}

li{float:left;display:inline;width:75px;padding-bottom:20px;font-size:13px;}

.clearfix{display:block;width:50px;text-align:center;}

</style>



<ul class="people-list">

            <li>

                <span class="headpichold">

                    <a style="cursor: pointer;" href="http://renren.com/profile.do?portal=homeFootprint&id=245160121" title="查看刘黎LIU ??的个人主页"><div style="background: transparent url(http://hdn.xnimg.cn/photos/hdn121/20091004/2215/tiny_MM7z_29145b019118.jpg) no-repeat scroll center center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 50px; height: 50px;" class="" title="" id=""></div></a>

                </span>

                <span class="clearfix">

                    <a href="http://renren.com/profile.do?portal=homeFootprint&id=245160121">刘黎LIU ??</a>

                </span>

            </li>

            <li>

                <span class="headpichold">

                    <a style="cursor: pointer;" href="http://renren.com/profile.do?portal=homeFootprint&id=277600061" title="查看张继业的个人主页"><div style="background: transparent url(http://head.xiaonei.com/photos/0/0/men_tiny.gif) no-repeat scroll center center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 50px; height: 50px;" class="" title="" id=""></div></a>

                </span>

                <span class="clearfix">

                    <a href="http://renren.com/profile.do?portal=homeFootprint&id=277600061">张继业</a>

                </span>

            </li>

            <li>

                <span class="headpichold">

                    <a style="cursor: pointer;" href="http://renren.com/profile.do?portal=homeFootprint&id=221980018" title="查看高瑞祥的个人主页"><div style="background: transparent url(http://hdn211.xnimg.cn/photos/hdn211/20090222/13/50/tiny_BWKf_14927o204237.jpg) no-repeat scroll center center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 50px; height: 50px;" class="" title="" id=""></div></a>

                </span>

                <span class="clearfix">

                    <a href="http://renren.com/profile.do?portal=homeFootprint&id=221980018">高瑞祥</a>

                </span>

            </li>

            <li>

                <span class="headpichold">

                    <a style="cursor: pointer;" href="http://renren.com/profile.do?portal=homeFootprint&id=291813231" title="查看胡家鑫的个人主页"><div style="background: transparent url(http://hdn.xnimg.cn/photos/hdn521/20090918/1035/tiny_enXJ_174n019118.jpg) no-repeat scroll center center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 50px; height: 50px;" class="" title="" id=""></div></a>

                </span>

                <span class="clearfix">

                    <a href="http://renren.com/profile.do?portal=homeFootprint&id=291813231">胡家鑫</a>

                </span>

            </li>

            <li>

                <span class="headpichold">

                    <a style="cursor: pointer;" href="http://renren.com/profile.do?portal=homeFootprint&id=228139059" title="查看李晓梅的个人主页"><div style="background: transparent url(http://hdn.xnimg.cn/photos/hdn121/20090930/1245/tiny_P0Rx_7779p019118.jpg) no-repeat scroll center center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 50px; height: 50px;" class="" title="" id=""></div></a>

                </span>

                <span class="clearfix">

                    <a href="http://renren.com/profile.do?portal=homeFootprint&id=228139059">李晓梅</a>

                </span>

            </li>

            <li>

                <span class="headpichold">

                    <a style="cursor: pointer;" href="http://renren.com/profile.do?portal=homeFootprint&id=265738021" title="查看王耀辉的个人主页"><div style="background: transparent url(http://hdn511.xnimg.cn/photos/hdn511/20090822/2235/tiny_1E65_112633a204236.jpg) no-repeat scroll center center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 50px; height: 33px;" class="" title="" id=""></div></a>

                </span>

                <span class="clearfix">

                    <a href="http://renren.com/profile.do?portal=homeFootprint&id=265738021">王耀辉</a>

                </span>

            </li>



        </ul>
jiang_jiajia10 2009-10-10
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 wangmingze09 的回复:]
用javascript来做。写个函数。然后对它进行判断。如果每行大于5个，换行。否则不换行。实践一下。看看是否可行。我的电脑不在家。所以我现在不能实践。
[/Quote]
我想做的是界面你说的我明白，谢谢你
wangmingze09 2009-10-10
  • 打赏
  • 举报
 回复
用javascript来做。写个函数。然后对它进行判断。如果每行大于5个，换行。否则不换行。实践一下。看看是否可行。我的电脑不在家。所以我现在不能实践。
jiang_jiajia10 2009-10-10
  • 打赏
  • 举报
 回复
Android实现九宫格拼图游戏
而是使用指定编译器和语言完成，能够使界面更流畅，用户体验感更好。但是对于一些常见小游戏，使用JAVA语言开发运行，还是不在话下的，那在本篇博客中，我将给大家简单介绍一下，九宫格拼图游戏的开发过程，基本逻辑...
zhihudaily:知乎日报网页版
专业的前端应该看得出, 我的前端水平也就停留在玩玩的阶段, 可以说整个界面都没有什么设计, 如果您有好的设计, 跪求分享~ 另外, 目前后端的数据仍不全, 主要是知乎日报会防爬虫, 所以我很小心的在爬数据(其实就是慢...
java切换到指定程序_java点某个按钮,可以切换到下一个界面 跪求大神
跪求大神帮帮忙！第一个界面：importjava.awt.Color;importjava.awt.Font;importjava.awt.GridLayout;importjava.awt.event.ActionEvent;importjava.awt.event...今晚就要交作业了！！！跪求大神帮帮忙！第一个界面...
java做一个界面链接数据库_用Java做一个简单的界面，连接到数据库（SQL Server），大家有没有具体的例子，跪求解答...
满意答案Alicia1209推荐于 2017.10.08采纳率：53%等级：9已帮助：1616人你可以做一个下拉框，选项有教师和学生，不过这个的话，一般是通过权限来控制的，这样教师和学生登录之后，看到的菜单就不一样了。JDBC连接...
android网络传输问题..跪求大神解答
我写了一段方法是服务端和客户端传输数据用的 ，java程序调用可正常执行，于是我想在安卓界面按下按钮 然后调用这个方法， 输入账号...跪求大神指点迷津...... 以下是debug的错误报告还有我的代码： I/System: c
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章