精华内容
下载资源
问答
  • 前端div垂直分割线(bootstrap)
    千次阅读
    2020-03-17 21:47:16

    前端div垂直分割线(bootstrap)

    百度是个好东西也是个坑人的东西
    主要是自个太菜
    写一条,留个纪念

    一个div就可以了
    更多相关内容
  • [CSS]几种实现分割线的方法

    千次阅读 2021-06-11 18:02:01
    HTML结构小小分隔线 单标签实现小小分隔线 巧用色实现小小分隔线 inline-block实现小小分隔线 浮动来实现———————————小小分隔线 字符来实现————————————对应的CSS.demo{width:600px}.line_01...

    HTML结构

    小小分隔线 单标签实现
    小小分隔线 巧用色实现
    小小分隔线 inline-block实现
    小小分隔线 浮动来实现
    ——————————— 小小分隔线 字符来实现————————————

    对应的CSS

    .demo{width:600px}

    .line_01{padding:0 20px 0;margin:20px 0;line-height:1px;border-left:200px solid #ddd;border-right:200px solid #ddd;text-align:center}

    .line_02{height:1px;border-top:1px solid #ddd;text-align:center}

    .line_02 span{position:relative;top:-12px;background:#fff;padding:0 20px}

    .line_03{width:600px}

    .line_03 b{background:#ddd;margin-top:4px;display:inline-block;width:180px;height:1px;_overflow:hidden;vertical-align:middle}

    .line_03 span{display:inline-block;width:220px;vertical-align:middle;text-align:center}

    .line_04{width:600px}

    .line_04{overflow:hidden;_zoom:1}

    .line_04 b{background:#ddd;margin-top:12px;float:left;width:26%;height:1px;_overflow:hidden}

    .line_04 span{padding:0 10px;width:32%;float:left;text-align:center}

    .line_05{letter-spacing:-1px;color:#ddd}

    .line_05 span{letter-spacing:0;color:#222;margin:0 20px}

    展开全文
  • 在项目、网页中经常会遇到在两个区域之间增加一条“线”来到达分割的效果,我在这里提供两种思路方法,以解决不同的实际问题。...这种方式很简单,也和实用,解决一般的分割线需求是没问题的,但如果...

    在项目、网页中经常会遇到在两个区域之间增加一条“线”来到达分割的效果,我在这里提供两种思路方法,以解决不同的实际问题。

    1 直接使用htmld 的<hr>标签,会显示一条线出来

    <p>hr 标签定义水平线:</p>
    <hr />
    <p>这是段落。</p>

    这种方式很简单,也和实用,解决一般的分割线需求是没问题的,但如果对这条“分割线”有特殊要求,就需要用第二种方法了。

    2 加入需求是这样的:我要求用细细的海浪线作为分割线,那么第一种方式就很难在实现了,这个时候,我们可以把我们需要的特殊的“分割线”当做“img图片”引到HTML里面:

    <div id="u2577" class="ax_default line">
            <img id="u2577_img" class="img " src="images/合同列表-正在执行/u2577.png">
    </div>
    

    这样,不管分割线要求有多特殊,都可以实现了。

    如果觉得有用请点赞或评论,谢谢!

    展开全文
  • css之分割线特效

    2022-05-15 21:12:28
    温馨小提示,下面的盒子用的都是... ... <div class="parent1"> <div class="div1">斜分割线</div> <div class="div2">SETTINGS</div> <div class="div3">HTML</div> <.

    温馨小提示,下面的盒子用的都是Grid布局,如果想要其他布局可以点击这里 CSS Grid Generator

    盒子html

    <div class="parent1">
            <div class="div1">斜分割线</div>
            <div class="div2">SETTINGS</div>
            <div class="div3">HTML</div>
            <div class="div4">CSS</div>
            <div class="div5">1</div>
            <div class="div6">2</div>
        </div>
    

    盒子css

            .parent1 {
                z-index: 1;
                width: 400px;
                height: 200px;
                border-radius: 4px;
                background-color: rgba(255, 255, 255, 0.7);
                display: grid;
                grid-template-columns: repeat(11, 1fr);
                grid-template-rows: repeat(6, 1fr);
                grid-column-gap: 0;
                grid-row-gap: 0;
                box-shadow: 0 2px 1px -1px rgb(0 0 0/20%), 0 1px 1px 0 rgb(0 0 0/14%), 0 1px 3px 0 rgb(0 0 0/12%);
            }
    
            .div1, .div2, .div3,.div4 {
                display: flex;
                justify-content: center;
                align-items: center;
            }
    
            .div1 { grid-area: 1 / 5 / 2 / 8; }
            .div2 { grid-area: 2 / 1 / 3 / 4; }
            .div3 { grid-area: 2 / 5 / 3 / 8; }
            .div4 { grid-area: 2 / 9 / 3 / 12; }
            .div5 { grid-area: 4 / 3 / 5 / 10; }
            .div6 { grid-area: 6 / 3 / 7 / 10; }
    

    斜分割线

    • html

      <section>
          <div class="parent1">
              <div class="div1">斜分割线</div>
              <div class="div2">SETTINGS</div>
              <div class="div3">HTML</div>
              <div class="div4">CSS</div>
              <div class="div5">1</div>
              <div class="div6">2</div>
          </div>
          <div class="skewed"></div>
      </section>
      
    • css

          .slash{
              position: relative;
              margin: 0 2%;
              box-sizing: border-box;
              width: 40%;
              height: 300px;
              display: flex;
              justify-content: center;
              align-items: center;
          }
          .skewed {
              position: absolute;
              inset: 0;
              width: 100%;
              height: 100%;
              background: #2c3e50;
              z-index: 0;
              transform: skewY(10deg);
              transform-origin: top right;
          }
      

     

     

    锯齿分割线

    • html
      <section class="spikes">
          <div class="parent1">
              <div class="div1">锯齿分割线</div>
              <div class="div2">SETTINGS</div>
              <div class="div3">HTML</div>
              <div class="div4">CSS</div>
              <div class="div5">1</div>
              <div class="div6">2</div>
          </div>
      </section>
      
    • css
       .spikes {
                  position: relative;
                  background: #2c3e50;
                  height: 300px;
                  margin: 0 2%;
                  width: 40%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
              }
      
              .spikes::after {
                  content: '';
                  position: absolute;
                  right: 0;
                  left: -0%;
                  top: 100%;
                  z-index: 10;
                  display: block;
                  height: 20px;
                  background-size: 20px 100%;
                  background-image: linear-gradient(135deg, #2c3e50 25%, transparent 25%), linear-gradient(225deg, #2c3e50 25%, transparent 25%);
                  background-position: 0 0;
              }
      

     

     

    半圆分割线

    • html
      <section class="semicircle">
          <div class="parent1">
              <div class="div1">半圆分割线</div>
              <div class="div2">SETTINGS</div>
              <div class="div3">HTML</div>
              <div class="div4">CSS</div>
              <div class="div5">1</div>
              <div class="div6">2</div>
          </div>
      </section>
      
    • css
              .semicircle {
                  margin: 10% 2%;
                  position: relative;
                  background: #2c3e50;
                  height: 300px;
                  width: 40%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
              }
      
              .semicircle::before {
                  position: absolute;
                  content: '';
                  left: 50%;
                  z-index: 10;
                  width: 100px;
                  height: 100px;
                  border-radius: 50%;
                  background: inherit;
                  transform: translateX(-50%) translateY(50%);
                  bottom: 0;
              }
      

     

     

    波浪线分割线

    • html
      <section class="container">
          <div class="parent1">
              <div class="div1">波浪线分割线</div>
              <div class="div2">SETTINGS</div>
              <div class="div3">HTML</div>
              <div class="div4">CSS</div>
              <div class="div5">1</div>
              <div class="div6">2</div>
          </div>
          <div class="wave"></div>
      </section>
      
    • css
      .container {
                  margin: 10% 2%;
                  position: relative;
                  background: #2c3e50;
                  height: 300px;
                  width: 40%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
              }
      
              .wave {
                  position: absolute;
                  height: 70px;
                  width: 100%;
                  background: #2c3e50;
                  bottom: 0;
              }
      
              .wave::before, .wave::after {
                  content: "";
                  display: block;
                  position: absolute;
                  border-radius: 100% 50%;
              }
      
              .wave::before {
                  width: 55%;
                  height: 109%;
                  background-color: #fff;
                  right: -1.5%;
                  top: 60%;
              }
              .wave::after {
                  width: 55%;
                  height: 100%;
                  background-color: #2c3e50;
                  left: -1.5%;
                  top: 40%;
              }
      

     

     

    弯曲分割线

    • html
      <section class="curved">
          <div class="parent1">
              <div class="div1">弯曲分割线</div>
              <div class="div2">SETTINGS</div>
              <div class="div3">HTML</div>
              <div class="div4">CSS</div>
              <div class="div5">1</div>
              <div class="div6">2</div>
          </div>
      </section>
      
    • css
      .curved {
                  position: relative;
                  width: 40%;
                  height: 300px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin: 10% 2%;
                  background: #2c3e50;
                  border-bottom-left-radius: 50% 20%;
                  border-bottom-right-radius: 50% 20%;
              }
      

     

     

    三角形分割线

    • html
      <section class="triangle">
          <div class="parent1">
              <div class="div1">三角形分割线</div>
              <div class="div2">SETTINGS</div>
              <div class="div3">HTML</div>
              <div class="div4">CSS</div>
              <div class="div5">1</div>
              <div class="div6">2</div>
          </div>
      </section>
      
    • css
       .triangle {
                  margin: 10% 2%;
                  position: relative;
                  background: #2c3e50;
                  height: 300px;
                  width: 40%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
              }
      
              .triangle::before {
                  content: '';
                  position: absolute;
                  bottom: 0;
                  width: 0;
                  height: 0;
                  border-style: solid;
                  border-width: 60px 60px 0 60px;
                  border-color: #2c3e50 transparent transparent transparent;
                  left: 50%;
                  transform: translateX(-50%) translateY(100%);
              }

     

     

    展开全文
  • 1、需求 拖动分割条可以改变div宽度 2、实现 ... <div ref="boxContent" class="h100p flex-a-center-j-space-between"> ...div ref="firstContent" class="h100p ...-- 分割线 --> <div ref="dividerLeft" cl
  • html几种美丽的分割线

    万次阅读 多人点赞 2018-01-05 11:00:18
    华丽的分割线(逃)     ◆*.◆*.◆*.◆*.◆*.◆*.◆*.◆*.◆*.◆*. ★,,♫◦★,,♫◦★,,♫◦★,,♫◦★,,♫◦★,,♫◦★,,♫◦★,,♫◦ __♥_♠_ ♦---♦ _♠_♥__"" __♥_♠_ ♦---♦...
  • 我不知道如何在它们之间插入一条垂直线(如下图所示:http://screencast.com/t/0bRNOmjeE,因为我的sub-10声誉,所以SO不会让我嵌入)具有以下属性:1)我可以控制或看起来合理的任何一侧的填充/边距(即,与其他div不太...
  • 用什么标签可以把一个div分割成竖着两个,有右面上下两个?如果可以,请详细讲解!!!如图所示!![图片](https://img-ask.csdn.net/upload/201610/20/1476952919_803987.jpg)
  • 上下左右分割div,并且可以自由拖动,实现页面上下左右分栏
  • 最近开始研究前端,会不定期更新一些小块代码,写下...1.单个标签实现分隔线: <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .line_...
  • 这是一款实用的、效果炫酷的html5和css3制作不规则的网页背景分割线网页模板。EXAMPLE 1下面来看一下第一个demo的制作流程。html结构:实用一个section来包裹所有的内容,其中放置一个class为se-slope的divdiv中...
  • 深入理解es6和es6标准入门哪本好Dubbo的分布式系统架构实战需要哪些步骤完成... 建站教程网-为学习HTML,DIV+CSS教程,网站开发制作与建设提供动力HTML教程建站教程网-xhtml教程提供最在html网页中插入垂直分割线我知...
  • Bootstrap分割线和普通分割线

    万次阅读 2018-05-23 23:54:44
    div class="divider"&gt;&lt;/div&gt; &lt;!--两头渐变透明--&gt; &lt;hr style="filter: alpha(opacity=100,finishopacity=0,style=3)" width="80%" ...
  • css 实现分割线

    2021-10-26 18:28:18
    div 下<div class="line title " onclick = "showks(dat,this)">查看更多</div> .title{ position: relative; text-align: center; overflow: hidden; font-size: 16px; color: #999;height: 20px;line...
  • 在抛弃table布局页面之后大家突然发现,原来这还不够,随意地使用或者<div>来进行布局实际上和table布局一样的糟糕。 Jorux的例子(如下): 我是老大 | 我是不好意思说 | 老三 | 老四在这里 | 老幺 Jorux指出,在...
  • css怎么设置分割线

    2021-08-04 07:36:48
    css设置分割线的方法:首先创建一个HTML实例文件;然后在body中创建三个div;最后给第二个div设置样式为“padding-top:3px;width:40%;border-top:1px solid #666666;”即可。本文操作环境:windows7系统、HTML5&...
  • <div id=”demo”> <ul> 写个内容其实好困难啊。。。</li> 写个内容其实好困难啊。。。</li> 写个内容其实好困难啊。。。</li> 写个内容其实好困难啊。。。</li> 写个内容其实好困难啊。。。</li> </ul> </d
  • 页面布局——分割线中间带文字

    千次阅读 2019-03-26 14:25:07
    .box可设置height、line-height .text可设置margin 上下居中可使用vertical-align:middle;或justify-content:center; 左右居中可使用text-align:center; 自适应宽度可使用width+float或...div class="box"> ...
  • css 实现漂亮的分割线

    千次阅读 2021-03-18 15:07:35
    div class="test"></div> .test { width: 100%; height: 10rpx; background-color: #fff; background-image: linear-gradient(0deg, rgba($color: #ff6a00, $alpha:.5) 50%, transparent 50%),...
  • layui辅助元素,分割线

    千次阅读 2021-01-05 23:55:22
    layui辅助元素,分割线用法大全 转载:点击前往=>http://www.shagua.wiki/project/3?p=106
  • 用伪元素做分割线

    2020-07-05 10:13:07
    div id="header"> ----------设置给定的高度,宽度100% <div class="header">--------------设置给定高度、宽度,设置居中 <div class="header_left">------------float:left;设置宽度,高度...
  • 分割线</title> <body> <div> <span>设备:</span> <span>1</span> </div> <div class="order"> <span style="white-space:pre"> </span><...
  • <div style="background:linear-gradient(to left,#FFFFFF,#067859,#FFFFFF);height:1px;"></div> 使用background属性中的渐变参数,...#FFFFFF,高度为1px,便可得到一条渐变过渡的分割线。 效果 ...
  • HTML中画分割线

    千次阅读 2018-12-17 10:26:38
    使用hr标签实现画一条线 html代码: &lt;html&gt; &lt;body&gt; &lt;p&gt;hr 标签定义水平线:&lt;/p&gt; &lt;hr /&gt; &lt;p&gt;这是段落。&lt;/p&...
  • css实现分割线

    千次阅读 2020-03-08 12:32:04
    <div class="line1">分割线</div> .line1{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd; text-align...
  • vue中分割线的实现

    万次阅读 2019-08-02 15:02:32
    项目中,需要实现分割线的效果,如图: 奈何 element 中的分割线用起来报错,无奈只好自己写,很简单,先说下原理: 给一个高为1像素的盒子,盒子宽度根据要求设定,再设置盒子颜色,排列方式为相对定位,盒子里...
  • Vue 三种带文字分割线实现方式

    千次阅读 2020-10-22 11:12:59
    div class="not_has_more"> 常用品牌 </div> .not_has_more { margin: 40px 0; line-height: 50px; text-align: center; position: relative; height: 33px; font-size: 24px; font-family: .
  • 分割线css

    2022-02-16 11:07:25
    div id="lineRight"></div> #lineRight::after { content: ""; width: 1px; height: 100%; position: absolute; top: 0%; left: 50%; margin: auto; background: #F0F0F0; }
  • showDividerHorizontal + dividerDrawableHorizontal : 设置水平分割线 showDividerHorizontal showDividerHorizontal 控制显示水平方向的分割线,值为none | beginning | middle | end其中的一个或者多个。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,699
精华内容 9,079
关键字:

div分割线