`
nannan408
  • 浏览: 1784018 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

css如何画竖线

    博客分类:
  • web
 
阅读更多
1.前言。

   html如果直接敲"|"这个东西进页面,会出现对齐问题,所以,画竖线不能用这种,我总结了一下,大致有4种,这里只详细介绍其中两种。

2.画竖线的4种方法。

  (1)最优画法,用display的inline-block;
    a{
      border-left: 1px solid #B7D0E4;
       display: inline-block;
       margin-left: -1px;
       padding: 0px 0px 0px 3px;
     }
   (2)直接border.
     a{
        border-left: 1px solid #D9D9D9;
         margin-left: -1px;
         padding-left: 5px;
       }
    (3)table,这个比较强大,可以画连线。即div和div之间的连线,有兴趣可以研究下。
     (4)hr.

如有其他画法,欢迎补充 : )
     
0
2
分享到:
评论

相关推荐

    css 任意两个点连接成一条线

    css 任意两个点连接成一条线,没有使用到canvas。纯css实现。这个只是一个demo。您可以参考

    纯CSS3模拟跳动的音乐音符效果.zip

    在描述中提到,“几根竖线这样高低跳动”,这可能是通过CSS3的动画(Animations)和变换(Transforms)特性来实现的。CSS3动画允许我们定义一个元素从一种样式逐渐变化到另一种样式的过渡过程,而变换则可以改变元素...

    如何使用CSS3画出一个叮当猫

    鼻子的竖线(nose_line)可以使用细长的矩形实现;嘴巴(mouth)可使用曲线边框(border-radius)创建微笑形状。 3. **胡须**(whiskers):胡须由多个div构成,通过定位(positioning)和旋转(transform: rotate...

    HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)

    1. **间隔竖线**:由于竖线并非顶天立地,作者选择使用伪元素`:before`和`:after`来创建。对于非第一个`li`元素,通过`:not(:first-child):after`选择器添加背景颜色为灰色的竖线,设置其高度和宽度,并使用绝对定位...

    CSS3绘制超炫的上下起伏波动进度加载动画

    在本文中,我们将深入探讨如何使用CSS3来创建一个引人入胜的上下起伏波动的进度加载动画。这个动画利用了CSS3的一些关键特性,包括变换(transform)、颜色透明度控制以及伪元素(pseudo-elements)操作,从而实现了...

    HTML如何在两个div标签中间画一条竖线

    在HTML页面设计中,有时我们...总的来说,无论使用纯CSS还是JavaScript,都可以实现两个div之间竖线的自适应高度。纯CSS方法简洁且无需额外的脚本处理,而JavaScript方法则更灵活,可以根据不同的场景和需求进行选择。

    web 页面画线 asp.net 页面画线

    在ASP.NET中,可以使用服务器端控件如`<asp:Table>`或`<asp:GridView>`配合CSS样式来模拟画线效果。例如,设置表格的边框和间隔来创建线条: ```aspx <td>... <!-- 更多行 --> ``` 或者,利用服务器端代码...

    css3可控旋转音乐播放按钮

    /* 这里绘制暂停图标(如两个垂直的竖线)的CSS代码 */ transform: rotate(180deg); opacity: 0; } .play-button:hover .play-icon { transform: rotate(180deg); } .play-button:hover .pause-icon { ...

    如何使用纯CSS实现悬停时右移的按钮效果.docx

    下面我们将详细讲解如何使用纯CSS实现这样一个悬停时右移的按钮效果。 首先,我们需要构建HTML的基本结构。一个简单的例子是创建一个导航栏,其中包含一个无序列表(`<ul>`),列表项(`<li>`)内嵌一个`<span>`,...

    fake-caret:CSS样式化表单输入插入符(光标)

    `来显示竖线,`animation`属性则用于模拟光标的闪烁。 ```css .custom-caret { position: absolute; color: #000; /* 自定义颜色 */ animation: caret-blink 1s infinite; /* 自定义动画 */ } @keyframes ...

    左右拖动间隔线实现图片交替显示

    这需要用到CSS的clip属性或者现代浏览器支持的clip-path属性,以及CSS的scale属性来实现。 最后,为了优化用户体验,开发者可能还需要考虑到性能问题。例如,通过使用requestAnimationFrame来控制动画的帧率,确保...

    解决SVG画线line-polyline、矩形rect等线条的stroke-width=1px属性,显示结果变宽成为2px的问题,以及文字模糊的问题

    除了使用vector-effect属性,还可以通过CSS或者内联样式来调整rect的呈现,比如使用`transform: scale(0.5)`将整个SVG缩小50%,然后再将SVG的大小调整回去,这样可以实现1px的精确线条,但这种方法可能会影响其他SVG...

    竖行友情链向上移动代码.rar

    4. **优化与控制**:为了使动画更加平滑,我们可以使用CSS3的`transform`属性配合`requestAnimationFrame`来提高性能,同时可以添加停止、暂停和恢复滚动的控制功能。 总的来说,"竖行友情链向上移动代码"是一个...

    Tambola-using-HTML-CSS-JS:Jaldi 5或Tambola是与家人,朋友一起玩的最好的游戏之一。 有一天,一枚硬币丢了,这本书没有用。 所以我决定这样做

    同时,CSS布局技术,如Flexbox或Grid,可以帮助我们更方便地排列游戏界面中的各个部分,确保其在不同设备上都能良好显示。 最后,JavaScript是实现游戏逻辑的关键。它负责处理用户交互,如点击按钮抽取数字,检查...

    js打字机文字动画

    4. **CSS样式控制**:为了增加动画的真实感,可以通过CSS改变光标效果,比如创建一个闪烁的竖线。可以使用`:before`伪元素和`animation`属性实现。 5. **事件处理**:提供一个开始按钮,监听其`click`事件,触发...

    利用after和before实现的一些效果

    ### 使用CSS伪元素`::before`与`::after`实现的实用效果 #### 一、概述 在网页设计中,CSS伪元素`::before`和`::after`被广泛应用于创建各种视觉效果,如图标、装饰图案等。它们能够帮助开发者在不增加额外HTML...

    jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置

    接下来,我们需要创建一个表格,并为每一列的表头(th)添加特殊的CSS类和事件监听器。例如: ```html 列1 列2 列3 <!-- 表格数据行 --> ``` 然后,使用jQuery编写JavaScript代码来实现拖动调整...

    网站进度条效果

    - **线性进度条**:通常表现为一条横线或竖线,随着任务的完成,颜色填充或长度增加。 - **环形进度条**:呈现为圆形,填充部分逐渐增多,适用于展示循环进程。 - **百分比进度条**:显示具体的百分比数值,更...

Global site tag (gtag.js) - Google Analytics