之前有接到一个需求，需要在网页上输出斜线。项目是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>
分享到：
相关推荐
页面展现画斜线VML入门帮助文档,转载只供学习使用VML入门.chm
在Matlab中，图形的定制化功能非常强大，用户可以通过各种方法对图形进行美化或特殊处理。本文将介绍如何使用自定义函数`hatch`来实现在Matlab图形中填充斜线等图形的功能。这个功能与`fill`命令类似，但不同之处...
但如果斜线是页面设计的核心部分，那么可能需要投入更多时间去研究SVG或者JavaScript解决方案，以确保斜线在各种屏幕尺寸和设备上都能正确显示。 综上所述，HTML中的`<table>`不仅可以用于展示数据，还可以通过巧妙...
这种方法需要使用JavaScript进行编程，绘制一个斜线并覆盖在表格表头的单元格上。其优点是完全由代码控制，可以做到非常精细的效果，包括斜线的颜色和样式都可以灵活调整。然而，同样的问题也是浏览器的兼容性，特别...
在处理Word2021文档表格时，绘制斜线表头是一个能够显著提升数据展示效果的技巧。本文将详细介绍如何在Word2021中绘制斜线表头及其样式，帮助读者高效地组织和呈现表格数据。 首先，我们需要明白斜线表头的作用和...
这段JavaScript代码会在页面加载完成后查找所有表头单元格（`<th>`），如果单元格内有多个文本节点，那么就创建一个带有`.line`样式的`div`元素，用于绘制斜线。通过计算文本节点的位置，我们可以确定斜线的长度和...
绘制圆形并填充斜线，可自定义圆的半径， 定义直线的倾角，角度值（-90°至90°），定义直线的间距
Bresenham算法适用于各种斜线，包括第一象限、第二象限、第四象限以及对角线上的斜线（8/8象限）。通过适当的调整，该算法也可以扩展到其他象限。它的效率和准确性使得Bresenham算法成为在LCD和其他显示设备上画线的...
使用jquery绘制表格斜线，表格头斜线，无需使用图片。
在网页设计中，创建带有斜线分隔的表头是一种常见的需求，这通常用于表示复合信息或者层次结构。本教程将详细介绍如何使用CSS来制作这种效果，并结合Bootstrap框架实现自适应布局。 首先，我们需要理解HTML表格的...
标题中提到的知识点是“MATLAB绘制圆形并填充斜线”，那么接下来将详细介绍如何使用MATLAB软件绘制一个圆形并对其填充斜线的源代码编写过程。 MATLAB是一种广泛应用于工程计算、数据分析、算法开发等领域的高性能...
这样的图形通常用于数据可视化或设计中，以提供视觉上的区分和美感。 首先，我们要了解MATLAB中用于绘图的基本函数。`plot`函数是最常用的绘图命令，但在这里我们更关注`fill`函数，它用于填充二维图形。`fill`函数...
然后，在"布局"选项卡上，单击"绘制斜线表头"。在"表头样式"列表中，选择所需的样式。共有五种样式可供选择，可以使用"预览"框来预览所选的表头从而确定自己所需的样式。 在输入标题框中输入所需的行、列标题。需要...
例如，我们可以设置`::before`为上到下，`::after`为左到右的斜线： ```css .diagonal-cell::before { top: 0; left: 0; transform-origin: bottom right; transform: rotate(45deg); } .diagonal-cell::...
综上所述，“实线斜线拖拽”是一个涉及GUI编程、事件处理、坐标转换、图形渲染等多个领域的技术问题。实现这一功能需要对编程语言、图形库以及可能的逆向工程技巧有深入的理解。如果压缩包中的“misshui”文件提供了...
在计算机科学领域，"走斜线的迷宫"问题是一个充满挑战和趣味的经典算法问题。这一问题不仅与路径寻找密切相关，而且还涉及到数据结构、搜索策略等基础知识。解决此类问题，不仅可以锻炼程序员的逻辑思维能力，还能...
阴影柱状图通过填充颜色和添加斜线，可以增强视觉效果，使数据更加醒目。以下是对如何使用MATLAB绘制阴影柱状图（填充斜线）的详细解释： 1. **创建数据**： 在绘制柱状图之前，首先需要准备数据。数据通常以矩阵...
js 实现 表格的斜线! 值得下载看看!资源免费,大家分享!!
在绘制斜线表头时，我们需要先插入新表格或选中要添加斜线表头的表格，然后在“布局”选项卡上，单击“绘制斜线表头”。在“表头样式”列表中，我们可以选择五种不同的样式，然后输入所需的行、列标题。 需要注意的...
总的来说，MATLAB提供了丰富的图形绘制和处理工具，使得我们可以根据需求自由创作各种图形。通过结合`plot`、`fill`以及颜色索引技巧，可以实现复杂图形的绘制，包括填充有特定图案的圆形。这个示例中的源程序代码将...