关于页面上输出斜线的折中处理
之前有接到一个需求，需要在网页上输出斜线。项目是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>
?
