使用css在页面画一条竖线

于 2024-02-28 12:37:15 发布
阅读量326 收藏 1
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70605065/article/details/136343183
版权

efd8a32a9b2941bdbb331b5d81a19834.png

 在这个例子中，我们创建了一个名为 vertical-line 的 CSS 类，它使用 border-left 属性来创建一条竖线。你可以通过调整 border-left 的值来改变线的粗细和颜色，通过调整 height 的值来改变线的高度，以及通过调整 top 的值来改变线的垂直位置。然后在 HTML 中，我们使用一个 div 元素并应用这个类来在页面上显示这条线。

铁锤学前端
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
通过 CSS 写一条竖线
狮子座的男孩
05-25 1145
【代码】通过 CSS 写一条竖线。
jQuery攻略.pdf
05-03
286 9.9 对表格排序 288 9.10 小结 289 第10章 使用CSS 290 10.1 区分HTML元素 291 10.2 向内嵌在一个元素中的另一个元素应用样式 292 10.3 缩进段落 293 10.4 将段落的首字母设为大写 294 10.5 去除标题和段落之间...
css：使用div绘制一条竖线
1111111111
11-16 1万+
1、准备一个内容为空的div 2、给div设置宽高，宽度给小一点的值，竖线需要多长，就设置多高 3、只给div设置右边框 最终效果图： 使用div绘制竖线的优点是垂直居中更容易实现，竖线长度宽度都方便设置，（也试过直接用文字输入一条竖线，但是垂直方向总是无法居中） ...
【css】纵向步骤条竖线的实现--css伪类
一位前行者的博客
06-17 3269
近期做H5开发，需要实现一个自定义步骤条，记录一下竖线的实现。css也比较简单主要是flex布局和伪类的样式实现。
CSS系列005——画直线
hanbing1307的博客
03-10 1261
【代码】CSS系列005——画直线。
web前端游戏项目-“五子棋”小游戏.zip
12-12
该游戏的初始界面包括一个五子棋的棋盘和一个“开始”按钮，五子棋的棋盘是由15条横线和15条竖线垂直交叉而成的。在棋盘上，横、竖线交叉形成了225个交叉点为对弈时的落子点。玩家单击棋盘中的交叉点开始游戏，玩家...
微信小程序时间轴实现方法示例
12-29
做起来其实很简单：一个时间轴包括一个圆圈（css实现圆圈或者找一个圆圈图片）+一条线（css实现直线或者找一个直线的图片)+内容 来看我的代码（代码很不规范，请忽略）： wxml <image class='page-image' ...
程序天下:JavaScript实例自学手册
07-08
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...
前端画竖线
girllan的博客
07-02 1305
一条竖线的写法 实现原理： 利用浮动,设置width:1px 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
web前端入门到实战：css左边竖条的实现方法
软件开发-前端开发-IT
09-05 1024
问题描述： 在只使用一个标签的情况下实现左边竖线，通用标签与样式如下： 实现左边竖线 html: <div>实现左边竖线</div> css: web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频） .div1 { width: 200px; he...
如何制作竖线的效果
Charonmomo的博客
07-21 785
描述 在很多网页中, 都会有一个小竖线的效果 (如图) . 实现这个小竖线的效果有很多种方法. 在这里记录一下. 方法 1. 通过::after 在元素后面追加一个宽度为1px的元素 .search-box .search span::after { position: absolute; right: -8px; content: ""; width: 1px; height: 15px; background-color: #ccc; } 2. 设置右
每个内容后面用竖线分隔，最后一块内容后面没有竖线 css
最新发布
L_csdn123的博客
12-25 449
竖线分隔，最后一块内容后面没有竖线 css
前端导航栏标签中间的小竖线 超简单的实现方法~
m0_71926767的博客
04-23 892
把每个小竖线都看成一个盒子,给它一个高度、背景颜色以及左右两边的margin值。这里使用的是小li来制作盒子。如图所示，一共需要13个小li。刚好偶数个小li做为小竖线的盒子，所以把所有偶数的小li选择，统一给它们写样式。标签和标签挤在一起很难看?不急不急~当然使用小竖线给它隔开啦。这样就可以实现了~（效果如第一张图所示）
CSS 画一条横线/竖线
热门推荐
Lengff
10-26 10万+
作为优秀的java程序员,扎实(la ji )前端水平是我工作的基础 , 所以今天记录一下怎么用css画一条横线/竖线出来 , 以此为笔记, 将来不需要去翻阅别人的代码 废话不多说  笔记开始 #CSS 代码 /*中间的过度的横线*/ .link-top { width: 50%; height: 1px; ...
画线 css,CSS画线方法
weixin_30853033的博客
08-03 3826
用标签最基本的：其中 width 规定线条的长度，还可以是百分比；color 表示颜色，size 表示厚度；align 规定线条位置，有left(左对齐)、right(右对齐)、center(中对齐)；noshade 表示是否有立体效果。两头渐变透明： (利用CSS滤镜处理)右边渐变透明：画虚线：画双线：立体效果：纺棰形：钢针效果：也可以利用标签如或者利用CSS里的background属性,更方便...
CSS3 循环跳跃起伏的竖线（类似于语音助手动画）
ChauncyWu的博客
01-25 6386
根据CSS3 写一个类似于语音助手动画的 ，那种上下不停起伏的效果 源码如下 语音助手 @keyframes yuying1{ 0%{ height: 0%; } 20%{ height: 50%; } 50%{ height: 100%; } 80%{ h
js + css 在两点之间绘制直线
06-06
你可以使用 HTML5 的 Canvas 元素，结合 JavaScript 和 CSS 来画直线。下面是一个简单的示例代码： HTML 代码： ```html <!DOCTYPE html> <html> <head> <title>画直线</title> <style> #myCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } </style> </head> <body> <canvas id="myCanvas"></canvas> <script src="script.js"></script> </body> </html> ``` CSS 代码： ```css html, body { height: 100%; margin: 0; padding: 0; } ``` JavaScript 代码： ```javascript const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); // 设置画布尺寸为屏幕宽高 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 设置起点和终点坐标 const startX = 100; const startY = 100; const endX = window.innerWidth - 100; const endY = window.innerHeight - 100; // 绘制直线 ctx.beginPath(); ctx.moveTo(startX, startY); ctx.lineTo(endX, endY); ctx.strokeStyle = "#000000"; ctx.lineWidth = 2; ctx.stroke(); ``` 在这个示例中，我们首先在 HTML 中创建一个 Canvas 元素，并为其定义一个 ID。然后在 CSS 中设置了页面和 Canvas 的尺寸。接着在 JavaScript 中获取这个元素，并获取其 2D 渲染上下文。然后，我们设置起点和终点坐标，并使用 `moveTo()` 方法移动画笔到起点位置，再使用 `lineTo()` 方法画出一条从起点到终点的直线，并使用 `stroke()` 方法进行绘制。最后，我们设置了线条的颜色和宽度。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值