`

关于页面上输出斜线的折中处理

FlexGoogleHTML浏览器Web 
阅读更多

之前有接到一个需求，需要在网页上输出斜线。项目是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>

 

分享到：
| 快速构建js
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics