精华内容
下载资源
问答
  • css 横线中间添加文字

    2017-03-16 21:50:00
    demoline01、02选一个用足够了 <style> .demo_line_01 { width: 200px;/*这指的是文字的宽度*/ padding: 0 20px 0; margin: 20px auto; line-height: 1px; border-left: 200px solid #ddd;...
     
    demoline01、02选一个用足够了
        <style>
    .demo_line_01 {
    width: 200px;
    /*这指的是文字的宽度*/
    padding: 0 20px 0;
    margin: 20px auto;
    line-height: 1px;
    border-left: 200px solid #ddd;
    border-right: 200px solid #ddd;
    text-align: center;
    }
     .demo_line_02 {
    width:100%;
    /*这指的是整个行的宽度*/
        margin:0 auto;
    height: 1px;
    border-top: 1px solid #ddd;
    text-align: center;
    }
    .demo_line_02 span {
    position: relative;
    top: -10px;
    background: #666;/*背景可改为白色*/
    padding: 0 20px;
    }
    </
    style>
    </
    head>
    <
    body>
    <
    div class="demo_line_01">分割线 </div>
    <
    div class="demo_line_02"><span>分割线</span></div>
    </
    body>

    转载于:https://www.cnblogs.com/zyjzz/p/6561816.html

    展开全文
  • css: .site_bar{  background-image : linear-gradient(red,red);  background-position : center bottom;  background-size : 0 2px;  background-repeat : no-repeat; //这个属性不能少。  transition : .3s;...
  • css: .forshow{ width: 100 %; height: 40px; padding: 0 10px; display: flex; display: -webkit-box; display: -moz- box; -webkit-box-pack: center; -moz-box-pack: center; -webkit-box-align: ...

    效果图:

    先贴代码

    HTML:

    <div class="forshow middle">
                <div class="flex"></div>
                <div class="img_setH"><img src="shop_orderD_forshow.png">为你推荐</div>
                <div class="flex"></div>
            </div>

    这里的图片路径换你想要的就可以啦

    css:

    .forshow{ width: 100%; height: 40px; padding: 0 10px;
        display: flex; display: -webkit-box; display: -moz-box;
        -webkit-box-pack: center; -moz-box-pack: center; -webkit-box-align: center; -moz-box-align: center;
        -webkit-box-sizing: border-box;  -o-box-sizing: border-box;  -ms-box-sizing: border-box;  box-sizing: border-box;}
    .forshow .img_setH{ padding: 0 10px; font-size: 15px; color: #333333;}
    .forshow .img_setH img{ width: 13px; height: 12.5px; display: inline-block; margin-right: 5px;}
    .forshow .flex{ -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; height: 1px; background: #cccccc;
        -webkit-box-sizing: border-box;  -o-box-sizing: border-box;  -ms-box-sizing: border-box;  box-sizing: border-box;}

    我们用了盒子模型进行布局

     

    转载于:https://www.cnblogs.com/cczlovexw/p/7371685.html

    展开全文
  • css横线中间显示文字,类似文档地图注脚 <div style="width:100%;height:36px;line-height:36px;display:flex;"> <span style="display:inline-block;flex:1;border-top:1px solid #cccccc;margin-top: ...

    css中横线中间显示文字,类似文档地图注脚

    <div style="width:100%;height:36px;line-height:36px;display:flex;">
        <span style="display:inline-block;flex:1;border-top:1px solid #cccccc;margin-top: 18px;"></span>
        <span style="margin-left: 5px;margin-right:5px; color: #aaaaaa;">中间显示文字</span>
        <span style="display:inline-block;flex:1;border-top:1px solid #cccccc;margin-top: 18px;"></span>
    </div>
    
    展开全文
  • <fieldset> <legend>标题</legend> <p>...这是不用定位实现的方式,不过微信小程序不支持这种写法,这种写法在微信小程序中是这样显示的 ...在H5中是正常显示的,在微信小程序中使用还是需要...
    <fieldset>
        <legend>标题</legend>
        <p>内容</p>
    </fieldset>

    这是不用定位实现的方式,不过微信小程序不支持这种写法,这种写法在微信小程序中是这样显示的

    在H5中是正常显示的,在微信小程序中使用还是需要定位实现

    展开全文
  • css实现标题左右横线

    2021-06-13 04:11:57
    最近用到了记录一下 页面 ... css实现标题文字过长截取... css实现网页中文字过长截取... title class应该这样写: .title{ width:300px; white-space:nowrap; overflow:hidden; text-o ... CSS控制标题字符长度的方法
  • ![图片说明](https://img-ask.csdn.net/upload/201709/09/1504952251_492095.png) 请问大家,怎么用CSS实现上图中横线两端逐渐变细变淡的效果?
  • CSS 三条横线等分

    2019-03-27 15:33:00
    .header_qian { width: 1.5rem; height: 1.5rem; background: rgba(250, 250, 250,0.7); border-radius: 50%; display: inline-block; position: relative;} .header_qian i { width: 0....
  • CSS样式画横线的方法

    万次阅读 2018-02-28 11:21:40
    今天在做网页的时候,需要用到CSS横线,虽然比较简单,但也出了一些小问题,拿来做个备忘。 方法一:用DIV,代码如下:(推荐此方法) &lt;div style="width:800px;height:1px;margin:0px auto;padding...
  • 主要介绍了css实现中间文字两边横线效果 ,需要的朋友可以参考下
  • 横线 style="text-decoration:line-through;" 下划线 style="text-decoration:underline;" 上划线 style="text-decoration:over-line;
  • CSS划隔横线的两种方法

    千次阅读 2017-07-09 11:08:12
    css划隔横线的两种方法  方法一:用DIV,代码如下:(推荐此方法)    说明:上面代码中的红色部分overflow:hidden;很重要,如果不加这句的话,在IE6下高度将会被拉的很开。  方法二:用HR,代码
  • css 横线中间的文字

    千次阅读 2019-08-14 11:34:24
    .gaikuang:before{ content: ''; position: absolute; top: 5%; left: 0px; background: #dad6d6; width: 44%; height: 1px; } .gaikuang:after { content: ''; position: abso...
  • CSS绘制箭头

    2020-12-24 19:24:37
    实际需求中,很多时候都会有箭头的情况,只不过一开始总是喜欢找别人写好的,随着需求的增加,很难通过修改来满足需求,所以理解原理自己动手才是万难的根本解决办法。一、绘制三角容器:样式:.container{width: 0;...
  • CSS 画一条横线/竖线

    万次阅读 多人点赞 2018-10-26 17:38:08
    作为优秀的java程序员,扎实(la ji )前端水平是我工作的基础 , 所以今天记录一下怎么用css画一条横线/竖线出来 , 以此为笔记, 将来不需要去翻阅别人的代码 废话不多说 笔记开始 #CSS 代码 /*中间的过度的横线*/...
  • 遇到了一个中间文字,两边横线的布局,效果如下图: 第一种方法:使用了背景色和透明度,细心的人可能会发现,body设置的背景色刚好是‘工商信息’的文字的背景色,同时也用了行内块、透明度以及相对定位来实现 第...
  • 效果图 代码 &amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;...a
  • css实现各种图形真是太赞了,再也不用切图了,直接用css就可以实现。最常用的就是用css实现的小三角了#triangle-up{display:inline-block;width:0;height:0;border-left:30px solid transparent;border-right:30px ...
  • css实现文字左右横线划线

    千次阅读 2019-05-07 13:22:56
    . left - right - center - line { color : # 999 ; line - height : .02 rem ...略看了下,是中间文字设置background #fff遮挡背景横线,若背景为非fff色会达不到预期效果,感觉不合适
  • 最近在做项目的时候,遇到了一个中间文字,两边横线的布局,如下图: 第一种: 代码如下: Title body{background: #f0f0f0} .con{position:relative;height:1.875rem;line-height: 1.875rem;...
  • css一条横线多种颜色

    千次阅读 2019-07-26 22:45:14
    <div style="width: 100%; height: 1px; border-left: 75px solid #ff2224; background: yellow ;"></div>
  • css代码 .goods-title { height: 35px; line-height: 35px; text-align: center; } .goods-title .line { display: inline-block; width: 30px; border-top: 1px solid #ccc ;/*线条粗细线型颜色 虚线为...
  • 我圈调直年情,量的单框来离理这接法清都的为想要用css画一个如下图的箭需朋朋支带不新器功几的事上为做的和时意后头,带边框思路很简单,用一个带坐上下边框的长方形,拼一个灰色的三角形,然后在用一个白色的...
  • 可以按顺序设置如下属性:font-style font-variant font-weight font-size/line-height font-family 使用重复渐变可以实现横线纸张效果 #tt{ height: 200px; width:500px; font: 14px/20px '宋体'; text-indent:...
  • 用纯CSS实现的箭头

    2020-12-24 19:23:08
    CSS即可绘制出各种箭头,无需裁剪图片,甚至没有用到CSS3的东西。对浏览器支持良好。基本原理原理非常简单,通过截取border(边框)的部分“拐角”实现,几行CSS代码即可理解:一个梯形当元素宽、高和边框的宽相近...
  • css 画一条竖线 或横线

    千次阅读 2019-07-16 20:27:44
    横线 <div style="width:100px;border: 1px solid #d0d0d0;"></div> 竖线: <div style="height: 30px;border: 1px solid #d0d0d0;"></div>
  • css样式,中间文字,两边横线

    万次阅读 多人点赞 2017-04-10 18:30:23
    在项目中遇到过中间文字,两边横线的布局,如下图: 两边横线我们可以使用标签的上边框或者下边框,然后对中间的文字使用 ...css .order { height: 60px; line-height: 60px; text-align: center; } .or
  • } 纯css写带小三角对话框 在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after....
  • css字体加横线方法

    万次阅读 2015-05-07 09:28:33
    可以使用style="text-decoration:line-through;" 使得字体。还可以使用下划线style="text-decoration:underline;";上划线style="text-decoration:over-line;

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,482
精华内容 4,992
关键字:

css横线