Question

我需要画出像这样的图像 http://www.freeimagehosting.net/uploads/b8c3b1a16c.jpg http://www.freeimagehosting.net/uploads/b8c3b1a16c.jpg

喜欢... a +标记位于文本框的中心和末尾。我该怎么做..我试过。但是不能......我应该使用+符号的图像或者我可以用css做...

或者我应该为它写什么css ......

Answer 1

您可以将绝对定位DIV用于“盒子”，并使用两个DIV作为垂直和水平线。某事（未经测试）如：

CSS：

.box { position:relative; }
.box-end { position:absolute; border:1px solid red; background:white; overflow:hidden; z-index:400; }
.box-end-v { width:20px; height:40px; }
.box-end-h { width:40px; height:20px; }
.box-end-top { top:0px; left:30px; }
.box-end-bottom { top:80px; left:30px; }
.box-end-left { top:30px; left:0px; }
.box-end-right { top:30px; left:80px; }
.box-line { position:absolute; background:black; z-index:100; }
.box-line-v { top:20px; left:50px; width:1px; height:60px; }
.box-line-h { top:50px; left:20px; width:60px; height:1px; }

HTML：

<div class="box">
   <div class="box-end box-end-h box-end-top">T</div>
   <div class="box-end box-end-h box-end-bottom">B</div>
   <div class="box-end box-end-v box-end-left">L</div>
   <div class="box-end box-end-v box-end-right">R</div>
   <div class="box-line box-line-v"></div>
   <div class="box-line box-line-h"></div>
</div>

但是，我可以建议吗？ http://raphaeljs.com/

Answer 2

您制作了包含2行2列的table，并使用border-right和border-bottom作为左上角的单元格，border-top和border-left在右下角。不要忘记在每个单元格中添加 。然后在CSS中，您可以定义单元格的大小。

希望我有所帮助。

绘制如图所示的图像

2 个答案: