之前有接到一个需求,需要在网页上输出斜线。项目是web项目,没用flex,google一把 找到一个n年前用div输出点花图的介绍,实际测试后发现,一旦迭代层数较多,则会让浏览器崩溃。后来改用图片。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div style="border:1px solid blue;width:720px;">
<div style="position:relative;float:left;">
<img src="箭头/first_s.gif" style="position:absolute;left:130px;top:20px;"/>
<img src="箭头/second_s.gif" style="position:absolute;left:130px;top:20px;"/>
<img src="箭头/third_s.gif" style="position:absolute;left:130px;top:20px;"/>
<span style="width:70px;margin:10px 0px 0px 50px;float:left;">AAAAA<img src="48X48/user.png" width="30px;" height="30px;" /></span>
<span style="width:70px;margin:10px 0px 0px 100px;"> <img src="48X48/user.png" width="30px;" height="30px;"/>BBBB</span>
<span style="width:70px;margin:60px 0px 0px 230px;display:block;"> <img src="48X48/user.png" width="30px;" height="30px;"/>CCCC</span>
<span style="width:70px;margin:60px 0px 0px 230px;display:block;"> <img src="48X48/user.png" width="30px;" height="30px;"/>DDDD</span>
</div>
<div style="position:relative;float:left;">
<img src="箭头/first_s.gif" style="position:absolute;left:130px;top:20px;"/>
<img src="箭头/second_s.gif" style="position:absolute;left:130px;top:20px;"/>
<img src="箭头/third_s.gif" style="position:absolute;left:130px;top:20px;"/>
<span style="width:70px;margin:10px 0px 0px 50px;float:left;">AAAAA<img src="48X48/user.png" width="30px;" height="30px;" /></span>
<span style="width:70px;margin:10px 0px 0px 100px;"> <img src="48X48/user.png" width="30px;" height="30px;"/>BBBB</span>
<span style="width:70px;margin:60px 0px 0px 230px;display:block;"> <img src="48X48/user.png" width="30px;" height="30px;"/>CCCC</span>
<span style="width:70px;margin:60px 0px 0px 230px;display:block;"> <img src="48X48/user.png" width="30px;" height="30px;"/>DDDD</span>
</div>
<div style="position:relative;float:left;">
<img src="箭头/first_s.gif" style="position:absolute;left:130px;top:20px;"/>
<img src="箭头/second_s.gif" style="position:absolute;left:130px;top:20px;"/>
<img src="箭头/third_s.gif" style="position:absolute;left:130px;top:20px;"/>
<span style="width:70px;margin:10px 0px 0px 50px;float:left;">AAAAA<img src="48X48/user.png" width="30px;" height="30px;" /></span>
<span style="width:70px;margin:10px 0px 0px 100px;"> <img src="48X48/user.png" width="30px;" height="30px;"/>BBBB</span>
<span style="width:70px;margin:60px 0px 0px 230px;display:block;"> <img src="48X48/user.png" width="30px;" height="30px;"/>CCCC</span>
<span style="width:70px;margin:60px 0px 0px 230px;display:block;"> <img src="48X48/user.png" width="30px;" height="30px;"/>DDDD</span>
</div>
<div style="position:relative;float:left;">
<img src="箭头/first_s.gif" style="position:absolute;left:130px;top:20px;"/>
<img src="箭头/second_s.gif" style="position:absolute;left:130px;top:20px;"/>
<img src="箭头/third_s.gif" style="position:absolute;left:130px;top:20px;"/>
<span style="width:70px;margin:10px 0px 0px 50px;float:left;">AAAAA<img src="48X48/user.png" width="30px;" height="30px;" /></span>
<span style="width:70px;margin:10px 0px 0px 100px;"> <img src="48X48/user.png" width="30px;" height="30px;"/>BBBB</span>
<span style="width:70px;margin:60px 0px 0px 230px;display:block;"> <img src="48X48/user.png" width="30px;" height="30px;"/>CCCC</span>
<span style="width:70px;margin:60px 0px 0px 230px;display:block;"> <img src="48X48/user.png" width="30px;" height="30px;"/>DDDD</span>
</div>
</div>
</BODY>
</HTML>