如何在网页中加入一条竖线

HTML没有直接写竖线的专用标记,使用<hr>来做竖线有局限性,所以竖线只能通过表格table来实现。有2种方法可以写竖线,你可任选一种,例如要高90像素的竖线:
1.代码如:<table height=90 style=border-color:000000;border-left-style:solid;border-width:1px><tr><td valign=top>内容</table>
效果如:

内容

2.代码如:<table height=90 cellspacing cellpadding><tr><td bgcolor=000000 width=1><td width=300 valign=top>内容</table>
效果如:

 内容

说明
方法1和方法2的区别是:方法1是使用样式表给表格定义,只让它的左边线为黑色;方法2是,做出一个单元格,让它宽为1像素,背景色为黑色,方法2的竖线也可用背景图片。方法2的“cellspacing cellpadding”这两句不要省。这两者的使用方法是一样的,把上述的代码复制到你的网页要插入的地方就可以了。
<script src="../../js/ja.js" type="text/javascript"></script>   如果您需要从网页中复制代码到FP或DW中,复制请注意:一定要先从这里复制到记事本,然后再从记事本复制到FP或DW的html模式下,切记切记,否则无效。 <script src="../../js/ac4.js" type="text/javascript"></script>

 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在网页喷绘(Spray Painting),需要借助JavaScript和HTML5的canvas元素。具体实现步骤如下: 1. 在HTML添加canvas元素,设置宽高和ID: ```html <canvas id="myCanvas" width="500" height="500"></canvas> ``` 2. 在JavaScript获取canvas元素,并获取绘图上下文: ```javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ``` 3. 设置绘图属性,如颜色、线条宽度等: ```javascript ctx.fillStyle = "blue"; // 填充颜色 ctx.strokeStyle = "red"; // 线条颜色 ctx.lineWidth = 5; // 线条宽度 ``` 4. 开始绘制: ```javascript ctx.beginPath(); // 开始绘制路径 ctx.moveTo(100, 100); // 移动到起点 ctx.lineTo(200, 200); // 绘制一条直线 ctx.stroke(); // 绘制线条 ``` 在喷绘时,可以使用鼠标事件获取鼠标坐标,然后在canvas上绘制一系列的点或线条,模拟喷漆的效果。具体实现可以参考下面的代码: ```html <!DOCTYPE html> <html> <head> <title>Spray Painting</title> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var paint = false; // 是否在喷绘 var x, y; // 鼠标坐标 function startPainting(e) { paint = true; x = e.offsetX; y = e.offsetY; } function stopPainting() { paint = false; ctx.closePath(); } function paintAt(e) { if (paint) { ctx.beginPath(); ctx.arc(e.offsetX, e.offsetY, 5, 0, 2 * Math.PI); ctx.fill(); ctx.moveTo(x, y); ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); x = e.offsetX; y = e.offsetY; } } canvas.addEventListener("mousedown", startPainting); canvas.addEventListener("mouseup", stopPainting); canvas.addEventListener("mousemove", paintAt); </script> </body> </html> ``` 这个页面,可以使用鼠标在canvas上自由绘制,模拟喷漆的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值