Home >Web Front-end >HTML Tutorial >jsp如何画这种界面 主要左边的点线不好弄！_html/css_WEB-ITnose
jsp如何画这种界面 主要左边的点线不好弄！_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:27:351147browse
回复讨论(解决方案)
关于竖线的已经参考本论坛一位的效果弄好了，关键左边的点线布局没有好 的思路
<table height=90 style=border-color:000000;border-left-style:solid;border-width:1px><tr><td valign=top>内容</table>
<table height=90 cellspacing cellpadding><tr><td bgcolor=000000 width=1><td width=300 valign=top>内容</table>
具体可参看：http://blog.csdn.net/malelionofwakeup/article/details/1956960
贴代码，希望帮上你！
<style> li{list-style:none;width:100%;height:104px;font-family: 'Microsoft YaHei';} .linePanel {float:left;width:5%;} .line{background-color:rgb(204, 204, 204);width:5px;height:40px;} .point{width:14px;height:14px;border-radius:10px;background-color:rgb(204, 204, 204);margin:5px -4px;} .date{height:67px;} .date .text{font-size:20px;color:rgb(204, 204, 204);margin-left:-50px;width:100px;text-align:center;} .half{height:20px;} .contentPanel{width:95%;height:40px;float:right;} .content{position:relative;background-color:rgb(204, 204, 204);width:90%;height:70px;margin-top:25px;margin-left:10%;border-radius:10px;} .triangle-left{position:absolute;left:-16px;top:20px;width:0px;height: 0;border-top: 8px solid transparent;border-right: 16px solid rgb(204, 204, 204);border-bottom: 8px solid transparent;} .content .text{font-size:16px;color:#fff;padding:5px;font-weight:bold;word-spacing: 2px;}</style><body> <ul> <li> <div class="linePanel"> <div class="line"></div> <div class="point"></div> <div class="line"></div> </div> <div class="contentPanel"> <div class="content"> <div class="triangle-left"></div> <div class="text">20:34 快件离开 武汉中转部已发</div> </div> </div> </li> <li> <div class="linePanel"> <div class="line"></div> <div class="point"></div> <div class="line"></div> </div> <div class="contentPanel"> <div class="content"> <div class="triangle-left"></div> <div class="text">20:31 快件到达武汉中转部 上一站是 温州中转部</div> </div> </div> </li> <li class="date"> <div class="linePanel"> <div class="line half"></div> <div class="text">6-21</div> <div class="line half"></div> </div> </li> <li> <div class="linePanel"> <div class="line"></div> <div class="point"></div> <div class="line"></div> </div> <div class="contentPanel"> <div class="content"> <div class="triangle-left"></div> <div class="text">21:57 快件离开 温州中转部 已发往 武汉中转部</div> </div> </div> </li> <li> <div class="linePanel"> <div class="line"></div> <div class="point"></div> <div class="line"></div> </div> <div class="contentPanel"> <div class="content"> <div class="triangle-left"></div> <div class="text">20:06 快件到达温州中转部 上一站是 上海</div> </div> </div> </li> </ul></body> @maihao110 非常感谢！看来 小看了li的力量了！
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：关于table 中高度问题_html/css_WEB-ITnoseNext article：一个排版，不知道如何做。_html/css_WEB-ITnose