如何用JS判断CSS语句后，并添加CSS属性
我页面上有若干个有规律的<tbody>我想让他们每隔5个中间添加一条HR线并且加一点边距源码<html><body><tbody><tr><td>aaaaaa</td><...
我页面上有若干个 有规律的<tbody> 我想让他们每隔 5个 中间 添加一条HR 线并且加一点边距
源码
<html>
<body>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
</body>
</html>
达到类似于这种效果就好了 请高手指教！ 展开
源码
<html>
<body>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
<tbody><tr><td>aaaaaa</td></tr></tbody>
</body>
</html>
达到类似于这种效果就好了 请高手指教！ 展开
3个回答
展开全部
实际上 你若看了 图中源码的话 就不会问这样的问题了 因为按你说的效果是可以实现的
但是会增加网站体积 需要JS 来实现这个效果是不划算的
图中实际原理是
原理
<ul style="width:200px; border-bottom:1px dotted #999; padding:10px; margin-top:10px;">
<li style="line-height:30px; font-weight:bold; color:#09F;">1内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">2内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">3内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">4内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">5内容内容内容内容内容内容</li>
</ul>
<ul style="width:200px; border-bottom:1px dotted #999; padding:10px; margin-top:10px;">
<li style="line-height:30px; font-weight:bold; color:#09F;">1内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">2内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">3内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">4内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">5内容内容内容内容内容内容</li>
</ul>
<ul style="width:200px; border-bottom:1px dotted #999; padding:10px; margin-top:10px;">
<li style="line-height:30px; font-weight:bold; color:#09F;">1内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">2内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">3内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">4内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">5内容内容内容内容内容内容</li>
</ul>
<ul style="width:200px; border-bottom:1px dotted #999; padding:10px; margin-top:10px;">
<li style="line-height:30px; font-weight:bold; color:#09F;">1内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">2内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">3内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">4内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">5内容内容内容内容内容内容</li>
</ul>
<ul style="width:200px; border-bottom:1px dotted #999; padding:10px; margin-top:10px;">
<li style="line-height:30px; font-weight:bold; color:#09F;">1内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">2内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">3内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">4内容内容内容内容内容内容</li>
<li style="line-height:30px; font-weight:bold; color:#09F;">5内容内容内容内容内容内容</li>
</ul>
方案一
<php>
循环
<ul style="width:200px; border-bottom:1px dotted #999; padding:10px; margin-top:10px;">
子循环
<li ｛如果 i=1 or id=6 or i=11 ... 看你需要来进行判断每个UL 第一个li 如果是第一个就加粗｝style="line-height:30px; font-weight:bold; color:#09F;"｛else｝style="line-height:30px; font-weight:bold; color:#09F;"｛end｝>1内容内容内容内容内容内容</li>
子循环结束
</ul>
循环结束
<php>
方案二
<php>
循环
｛如果 i=1 or id=6 or i=11 ... 看你需要来进行判断UL 需不需要显示｝
<ul style="width:200px; border-bottom:1px dotted #999; padding:10px; margin-top:10px;">｛end｝
<li ｛如果 i=1 or id=6 or i=11 ... 看你需要来进行判断每个UL 第一个li 如果是第一个就加粗｝style="line-height:30px; font-weight:bold; color:#09F;"｛else｝style="line-height:30px; font-weight:bold; color:#09F;"｛end｝>1内容内容内容内容内容内容</li>
｛如果 i=5 or id=10 or i=115 ... 看你需要来进行判断 /UL 需不需要显示｝</ul>｛end｝
循环结束
<php>
因为不知道你用什么语言来写 所以我大概的写个样子 你看懂这个流程就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1、设置hr的宽度，要比最外层的短，然后让hr居中 -- 怎么居中就不写了
2、页面数据如果是循环出来的，就加个判断，5行显示并且加入hr。
3、把hr设置成虚线并设置上下边距
参考代码
<hr style=“width:100px;margin-top:10px;margin-bottom:10px;border:1px dotted #ccc”>
2、页面数据如果是循环出来的，就加个判断，5行显示并且加入hr。
3、把hr设置成虚线并设置上下边距
参考代码
<hr style=“width:100px;margin-top:10px;margin-bottom:10px;border:1px dotted #ccc”>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我说下思路啊 不知道对你有没有帮助
要是网站的这样显示 可以用一个table 设成五行 每行的内容由后台动态添加 然后在设个DIV 设好那条线的样式
最后都由后台动态生成。。。
要是网站的这样显示 可以用一个table 设成五行 每行的内容由后台动态添加 然后在设个DIV 设好那条线的样式
最后都由后台动态生成。。。
追问
谢谢，你的思路确实正确， 我现在是已有内容， 需要根据内容进行判断，如果改后台的话会更加罗嗦
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
