html – 用CSS重现这种布局效果的方法?
发布时间:2020-12-14 18:58:34 所属栏目:资源 来源:网络整理
导读:创建一个具有1个像素图像的7列/ 3行表格,可以扩展以模拟线条,如何使用 HTML和CSS复制这个布局,而不需要使用表格或图像“分隔符”? 我真正喜欢的是线条不相交. !-- layout reproduced --TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="100%" TR A
创建一个具有1个像素图像的7列/ 3行表格,可以扩展以模拟线条,如何使用
HTML和CSS复制这个布局,而不需要使用表格或图像“分隔符”?
我真正喜欢的是线条不相交. <!-- layout reproduced --> <TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="100%"> <TR ALIGN="center"> <TD CLASS="boldedcolor4text">the first</TD> <TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD> <TD CLASS="boldedcolor4text">the second</TD> <TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD> <TD CLASS="boldedcolor4text">the third</TD> <TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD> <TD CLASS="boldedcolor4text">the fourth</TD> </TR> <TR ALIGN="center"> <TD COLSPAN="7"><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="520" HEIGHT="1"></TD> </TR> <TR ALIGN="center"> <TD><A CLASS="image" HREF="><IMG SRC="1.jpg" ALT="" BORDER="0"></A></TD> <TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD> <TD><A CLASS="image" HREF="><IMG SRC="2.jpg" ALT="" BORDER="0"></A></TD> <TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD> <TD><A CLASS="image" HREF="><IMG SRC="3.jpg" ALT="" BORDER="0"></A></TD> <TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD> <TD><A CLASS="image" HREF="><IMG SRC="4.jpg" ALT="" BORDER="0"></A></TD> </TR> </TABLE> 解决方法
你可以试试像:
https://jsfiddle.net/wh48rjvt/
SCSS: $border: 1px solid grey; .table-row { border-bottom: $border; &:last-child { border-bottom: 0; } .table-box { border-right: $border; margin: 0.75rem 0; &:last-child { border-right: 0; } } } HTML: <div class="container"> <div class="table-row row"> <div class="table-box col-xs-3">1</div> <div class="table-box col-xs-3">2</div> <div class="table-box col-xs-3">3</div> <div class="table-box col-xs-3">4</div> </div> <div class="table-row row"> <div class="table-box col-xs-3">5</div> <div class="table-box col-xs-3">6</div> <div class="table-box col-xs-3">7</div> <div class="table-box col-xs-3">8</div> </div> ... </div> 我使用Bootstrap作为网格. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |