精华内容
下载资源
问答
  • 文字添加横线h5实现
    千次阅读
    2018-09-30 15:51:39

    一行文字添加横线:格式如          横线             

     

    <p><font class="lineThrough">&nbsp;&nbsp;&nbsp;&nbsp;</font>

    &nbsp;申请对象&nbsp;

    <font class="lineThrough">&nbsp;&nbsp;&nbsp;&nbsp;</font></p>

     

    lineThrough css:

    text-decoration: line-through;

    更多相关内容
  • 这里总结了五种关于文字两边添加横线的方法。欢迎补充!最近的项目的设计经常用到文字两边添加横线的方法,这样看上去简洁明了,当然实现的方法也五花八门.暂且不说哪种方法好,邓爷爷说过不管黑猫白猫抓到老鼠就是...

    这里总结了五种关于文字两边添加横线的方法。

    欢迎补充!

    最近的项目的设计经常用到文字两边添加横线的方法,这样看上去简洁明了,当然实现的方法也五花八门.

    暂且不说哪种方法好,邓爷爷说过不管黑猫白猫抓到老鼠就是好猫.

    详细说明

    在现代浏览器中浏览,全部可以正常显示.

    *第一种情况:

    是用的标签类名最为多的一个,而实际上会用到这样去写的很少,而且随着伪类的出现,实现起来更加方便,但这个的兼容性好啊...

    优: 兼容性强

    弊: 繁琐

    *第二种情况:

    实际上使用:before 跟 :after 伪类写成的,左右比例可以自由调节.但头痛的是IE7一下用不了T T

    优: 灵活性高

    弊: 兼容性弱

    *第三种情况:

    这是两个特别冷门的标签 fieldset legend 在W3C里面解释说

    fieldset:组合表单中的相关元素

    legend为 fieldset 元素定义标题(caption).

    据我了解:这两货是HTML4的产物,而在H5之后添加了3个新的属性. 所以这两货兼容性也不差 [说错的地方希望指正] 但是在例子当中, 它们对text-align:center特别不友好, 所以我在IE8- FF Safari Chrome 单独做了hack

    优: 兼容性好啊 贤心的layer说明文档页面就有用这个

    弊: ---

    第四种情况:

    ...这个可以不说明,就是请求的时候要多一张图片,建议图片做长一些.压缩一下. 我这里用了10001的尺寸,原图957B,压缩之后107B

    优: 自己衡量

    弊: ----

    *第五种情况:

    其实也是使用伪类去写的,只不过相比第二种少了一个伪类

    优: 自己衡量

    弊: IE7下看不到横线了

    *第六种情况:

    使用:before :after写的 优: 自适应性很好

    弊: 兼容性不好,用到flex transform css3写法

    如果需要字数限制,可以在a标签加上

    .sixth .sixth_main a {

    padding: 0 15px;

    flex-basis: 50%; //大小根据字数而定

    text-align: center;

    }

    总结一下:

    一般情况下,wap端我会使用第二或者第五中 (第六种)兼容性很好,感谢评论区@[深海哥哥]到的(https://www.jianshu.com/u/5e65e759535c)的提示

    注意第一、五种情况,文字都是有用白色为背景色的,如果遇到底色为纯色的情况下还可以继续用,但是如果是图片为背景的话,要么切图对准,要么就换种方法吧,少折腾

    展开全文
  • html中横线使用

    万次阅读 多人点赞 2018-09-21 17:46:03
    第一种: &lt;hr style=" height:2px;border:none;border-top:2px dotted #185598;" /&gt; 园点虚线 height:2px;...是设置横线的样式 dotted 虚线 #185598 颜色 第二种: &lt;hr...
    第一种:
    <hr style=" height:2px;border:none;border-top:2px dotted #185598;" />   园点虚线
    height:2px;是hr的高度
    border:none;是没有边框
    border-top:2px dotted #185598;是设置横线的样式
    dotted  虚线  #185598  颜色
     第二种:
    <hr style="height:1px;border:none;border-top:1px dashed #0066CC;" />    块虚线
    第三种:
    <hr style="height:1px;border:none;border-top:1px solid #555555;" />  实线,一条直线
    第四种:
    <hr style="height:3px;border:none;border-top:3px double red;" /> 两条紧密实线,
    第五种:
    <hr style="height:5px;border:none;border-top:5px ridge green;" /> 两种颜色
    第六种:
    <hr style="height:10px;border:none;border-top:10px groove skyblue;" />  两种颜色
    border-top:10px groove skyblue;    groove  上颜色        skyblue   下颜色
    
    .style-one {/*内嵌水平线*/
    width:80%;
    margin:0 auto;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
    .style-two {/*透明渐变水平线*/
    width:80%;
    margin:0 auto;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    }
    .style-three{/*渐变*/
    width:80%;
    margin:0 auto;
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
    }
    

     

     

    展开全文
  • HTML5 Canvas基本概念讲解html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生。html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox、Chrome、Opera...

    HTML5 Canvas基本概念讲解html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生。html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox、Chrome、Opera、Safari、IE9+)都已经开始支持html5了。除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛。html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊。

    html5,说其是「新兴」的,其实也不算新了。毕竟,html5早在2008年其第一份正式草案就已经对外公布。从2008年算起,到现在也算是有些年头了。不过,到目前为止,对于大多数开发人员而言,仍然是「雷声大,雨点小」——听说html5的多,实际使用html5的却很少。

    众所周知,html5中增加了许多新特性。在html5的众多特性中,Canvas应该算是最引人注目的新特性之一。我们使用html5的Canvas对象可以直接在浏览器的网页上绘制图形。这意味着浏览器可以脱离Flash等第三方插件,直接在网页上显示图形或动画。

    现在,我们就来为html5初学者介绍如何使用html5 Canvas绘制基本的图形。

    首先,我们需要准备如下html基础代码:

    XML/HTML Code复制内容到剪贴板

    html>

    HTML5 Canvas入门示例

    上述代码是一个html5页面的基本代码模板。其中,第一行代码是一个文档类型标签指令,这也是html5页面的标准文档类型指令,用于告诉浏览器「这是一个html5页面,请按照html5的网页标准来解析显示该页面」。第4行代码用于告诉浏览器「这个html5页面的字符编码为UTF-8」,这也是html5网页设置字符编码的标准写法。这与以往的html字符编码指令有所不同。

    XML/HTML Code复制内容到剪贴板

    现在,我们就在包含上述代码的html文件中进行Canvas绘制图形的实例讲解。首先,我们在上述html代码的body部分添加如下canvas标签。

    XML/HTML Code复制内容到剪贴板

    html>

    HTML5 Canvas入门示例

    您的浏览器不支持canvas标签。

    此时,我们使用支持html5的浏览器打开该页面,将会看到如下内容:

    在html5中,canvas标签本身并没有任何行为,仅仅只是在页面上占用指定大小的页面空白空间。canvas标签就相当于一块空白的画布,还需要我们自己使用JavaScript提供的canvas API编写相应的代码从而在这块画布上绘制出我们想要的图形。

    备注:canvas标签体内的文字内容将会在不支持html5的浏览器中显示。如上述html代码所示,如果你的浏览器不支持html5的canvas标签,那么将会在canvas标签处显示文字「您的浏览器不支持canvas标签」。

    作为「画家」的我们,首先需要熟悉我们手中的画笔,也就是JavaScript中的Canvas对象及其相关内容。

    在html5中,一个canvas标签就对应一个Canvas对象,我们在JavaScript可以使用document.getElementById()等常规函数来获取该对象。值得注意的是,在JavaScript中,我们并不是直接操作Canvas对象,而是通过Canvas对象来获取对应的图形绘制上下文对象CanvasRenderingContext2D,然后我们再利用CanvasRenderingContext2D对象自带的许多绘制图形的函数来绘图。

    这就好像是每一张画布都对应一支画笔,要想在画布上绘画,我们就先要拿到对应的画笔,然后使用这支画笔在画布上绘图。CanvasRenderingContext2D对象就相当于这支画笔。现在,我们就先来尝试在JavaScript中拿到这支画笔。

    XML/HTML Code复制内容到剪贴板

    html>

    HTML5 Canvas绘制线条入门示例

    您的浏览器不支持canvas标签。

    //获取Canvas对象(画布)

    varcanvas=document.getElementById("myCanvas");

    //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误

    if(canvas.getContext){

    //获取对应的CanvasRenderingContext2D对象(画笔)

    varctx=canvas.getContext("2d");

    }

    如上述代码所示,我们可以使用Canvas对象的getContext()方法来获取CanvasRenderingContext2D对象。比较细心的读者应该注意到了:getContext()方法需要传入一个字符串——2d,获取到的CanvasRenderingContext2D对象的名称中也带有2D。这是因为,目前html5只支持2D绘图,但是在未来的html5中也可能支持3D或其他形式的绘图。届时,我们可能就需要使用getContext("3d")来获取CanvasRenderingContext3D对象并绘制3D图形了。

    使用html5 canvas绘制线条(直线、折线等)使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下:属性或方法

    基本描述

    strokeStyle

    用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象

    globalAlpha

    定义绘制内容的透明度,取值在0.0(完全透明)和1.0(完全不透明)之间,默认值为1.0。

    lineWidth

    定义绘制线条的宽度。默认值是1.0,并且这个属性必须大于0.0。较宽的线条在路径上居中,每边各有线条宽的一半。

    lineCap

    指定线条两端的线帽如何绘制。合法的值是 "butt"、"round"和"square"。默认值是"butt"。

    beginPath()

    开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径。

    moveTo(int x, int y)

    移动画笔到指定的坐标点(x,y),该点就是新的子路径的起始点

    lineTo(int x, int y)

    使用直线连接当前端点和指定的坐标点(x,y)

    stroke(int x, int y)

    沿着绘制路径的坐标点顺序绘制直线

    closePath()

    如果当前的绘制路径是打开的,则关闭掉该绘制路径。此外,调用该方法时,它会尝试用直线连接当前端点与起始端点来关闭路径,但如果图形已经关闭(比如先调用了stroke())或者只有一个点,它会什么都不做。

    在Canvas的图形绘制过程中,几乎都是先按照一定顺序先定下几个坐标点,也就是所谓的绘制路径,然后再根据我们的需要将这些坐标点用指定的方式连接起来,就形成了我们所需要的图形。当我们了解了CanvasRenderingContext2D对象的上述API后,那么绘制线条就显得非常简单了。

    使用canvas绘制基本的直线

    现在,我们就使用canvas来绘制最基本的直线。

    JavaScript Code复制内容到剪贴板

    html>

    HTML5 Canvas绘制线条入门示例

    您的浏览器不支持canvas标签。

    //获取Canvas对象(画布)

    varcanvas = document.getElementById("myCanvas");

    //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误

    if(canvas.getContext){

    //获取对应的CanvasRenderingContext2D对象(画笔)

    varctx = canvas.getContext("2d");

    //注意,Canvas的坐标系是:Canvas画布的左上角为原点(0,0),向右为横坐标,向下为纵坐标,单位是像素(px)。

    //开始一个新的绘制路径

    ctx.beginPath();

    //定义直线的起点坐标为(10,10)

    ctx.moveTo(10, 10);

    //定义直线的终点坐标为(50,10)

    ctx.lineTo(50, 10);

    //沿着坐标点顺序的路径绘制直线

    ctx.stroke();

    //关闭当前的绘制路径

    ctx.closePath();

    }

    显示效果如下:

    使用canvas绘制带颜色的直线

    大家都知道,在现实世界中,画笔也是多种多样的,并且具有各种不同的颜色。同样的,Canvas的画笔CanvasRenderingContext2D对象也同样可以具有你所需要的各种颜色。在上面的代码示例中,我们没有指定颜色的话,Canvas的画笔就默认为最常见的黑色。

    现在我们再次使用Canvas的画笔绘制一条蓝色的直线(基于页面简洁考虑,下面只给出关键的JavaScript代码,请同时参考上面完整的代码示例)。

    XML/HTML Code复制内容到剪贴板

    html>

    HTML5 Canvas绘制线条入门示例

    您的浏览器不支持canvas标签。

    //获取Canvas对象(画布)

    varcanvas=document.getElementById("myCanvas");

    //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误

    if(canvas.getContext){

    //获取对应的CanvasRenderingContext2D对象(画笔)

    varctx=canvas.getContext("2d");

    //开始一个新的绘制路径

    ctx.beginPath();

    //定义直线的起点坐标为(10,10)

    ctx.moveTo(10, 10);

    //定义直线的终点坐标为(50,10)

    ctx.lineTo(50, 10);

    //沿着坐标点顺序的路径绘制直线

    ctx.stroke();

    //关闭当前的绘制路径

    ctx.closePath();

    //绘制一条带颜色的直线

    ctx.moveTo(10, 30);

    ctx.lineTo(50, 30);

    //支持css颜色值的各种表现形式,例如:"blue"、"#0000ff"、"#00f"、"rgb(0,0,255)"、"rgba(0,0,255,1)"

    //颜色等各种设置,必须在最终的绘制函数stroke()之前调用

    ctx.strokeStyle="blue";

    ctx.stroke();

    //关闭当前的绘制路径

    ctx.closePath();

    }

    对应的显示效果如下图:

    使用canvas绘制基本的折线

    当我们掌握了Canvas绘制直线之后,绘制折线等其他形式的线条就简单多了。我们只需要多绘制几个路径中间点,并依次将它们连接起来即可。

    JavaScript Code复制内容到剪贴板

    //获取Canvas对象(画布)

    varcanvas = document.getElementById("myCanvas");

    //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误

    if(canvas.getContext){

    //获取对应的CanvasRenderingContext2D对象(画笔)

    varctx = canvas.getContext("2d");

    //开始一个新的绘制路径

    ctx.beginPath();

    //设置线条颜色为蓝色

    ctx.strokeStyle ="blue";

    //设置路径起点坐标

    ctx.moveTo(20, 50);

    //定义中间点坐标1

    ctx.lineTo(60, 50);

    //定义中间点坐标2

    ctx.lineTo(60, 90);

    //定义中间点坐标3(这是最后一个中间点,也就是终点)

    ctx.lineTo(100, 90);

    //按照绘制路径顺序连接各个坐标点

    ctx.stroke();

    //关闭绘制路径

    ctx.closePath();

    }

    对应的显示效果如下图:

    掌握上述内容后,相信大家对使用Canvas绘制线条有一些基本的了解了吧。由于对线条的宽度、透明度等控制只是设置单个属性即可,请参考上面的相关API,这里就不再赘述了。

    强烈注意:在绘制图形路径时,一定要先调用beginPath()。beginPath()方法将会清空内存中之前的绘制路径信息。如果不这样做,对于绘制单个图形可能没什么影响,但是在绘制多个图形时(例如上面示例的两条直线),将会导致路径绘制或者颜色填充等操作出现任何意料之外的结果。

    此外,对于closePath()方法,初学者一定要稍加注意,尤其是上面API表格中closePath()方法描述中的红色文字。在上面绘制折线的代码示例中,我们先调用了stroke(),再调用了closePath()。其实在调用stroke()方法时,折线就已经绘制好了,当前的绘制路径也就被关闭掉了,所以再调用closePath()方法时,它就不会使用直线连接当前端点和起始端点(也就是说,这里的closePath()是可有可无的,不过为了保持良好的习惯,还是建议写上)。如果我们交换一下stroke()和closePath()的调用顺序,则情况完全不一样了。由于closePath()先调用,此时绘制路径并没有关闭,那么closePath()将会用直线连接当前端点和起始端点。

    交换stroke()和closePath()调用顺序后的示例代码如下:

    交换调用顺序后,对应的显示效果如下:

    展开全文
  • h5图形验证码

    2020-11-12 15:47:54
    drawPic(); /**生成一个随机色**/ function randomColor(min, max) { var r = randomNum(min, max); var g = randomNum(min, max); var b = randomNum(min, max); return "rgb(" + r + "," + g + ",...
  • 效果图Title.container{width: 1000px;margin: 10px auto;border: 1px solid red;}h3.title {color: #F2AE11;font-size: 1.3em;margin-bottom: 3em;text-align: center;font-weight: 500;line-height: 1.1;...
  • 那么接下来我们认识一下html横线标签hr。一:html横线标签hr属性 标签主要是在html中创建水平线,hr是单标签,是没有结束标签的,而且所有的浏览器都是支持 标签,在html中,水平特点是100%的宽度,独立使用一行,...
  • 标签,添加水平横线

    千次阅读 2018-02-11 09:50:19
    在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。如下图所示:语法:html4.01版本 &lt;hr&gt;xhtml1.0版本 &lt;hr /&gt;注意:1. &lt;hr /&gt;标签和&lt;...
  • 如图所示下面是我做的,但是宽度不好控制,设备宽度不一样显示也不一样,有好的解决方案嘛用户须知.state{color: #666;font-size: 14px;}.line{width: 35%;height: 1px;background-color: #dedede;...
  • html 横线的代码

    万次阅读 2018-09-12 14:04:00
    第一种: &lt;hr style=" height:2px;border:none;border-top:2px dotted #185598;" /&gt; 园点虚线 ...是设置横线的样式 dotted 虚线 #185598 颜色  第二种: &lt;hr ...
  • html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong,...
  • css 样式,怎样控制下划线长度

    千次阅读 2020-12-19 11:50:36
    外婆家私房菜:账户管理#title{margin:0px;width:100%;height:45px;background-color:#d9d9d9;}#text{margin......width: 100%;height: 45px;background-color: #d9d9d9;}#text {margin: 0px;line-...
  • h5移动时间控件

    2016-11-03 20:31:43
    h5移动时间控件
  • html中hr怎么设置粗细

    千次阅读 2021-06-09 16:10:25
    在html中,可以使用css border属性来设置hr水平线的粗细、颜色等样式,只需要给hr标签添加“border: 宽度值 样式值 颜色值;”样式即可,例“hr{border: 5px solid red;}”。本教程操作环境:windows7系统、CSS3&...
  • border 实现竖线

    2021-06-13 16:32:28
    list*,body{font-family: "微软雅黑";font-size: 10px;color: #4F4F4F;}.container{position: relative;padding-left: 15px;padding-right: 15px;margin-left: auto;margin-right: auto;}.blue{color: #01A2FF;...
  • 下面我们就来一起看看具体的内容。createLinearGradient()createLinearGradient()的参数如下。createLinearGradient(渐变开始位置的X坐标,渐变开始位置的Y坐标,渐变结束位置的X坐标,渐变结束位置的Y坐标)我们来看...
  • 有时候要用word做一个表格或者一份协议书,都需要画下划线,打印出来后,上面可以填写内容如何给表格里面加一条横线呢?下面就来告诉你怎么做。在word表格中加一条横线的几种方法介绍:Word给表格里面加一条横线的...
  • CSS,中间文字 两边横线 CSS样式写法

    千次阅读 2020-12-30 11:37:28
    在项目中遇到过中间文字,两边横线的布局,如下图:两边横线我们可以使用标签的上边框或者下边框,然后对中间的文字使用vertical-align 属性来控制。产品清单css.order{height:60px;line-height:60px;text-align:...
  • 本文实例为大家分享了H5+C3+JS实现五子棋游戏的具体代码,供大家参考,具体内容如下 新增全局变量 [removed] //所有赢法总和 var count = 0; //容纳所有赢法的三维数组 var allWin = []; for(var i =0; i <...
  • html css 设置表格单元格横线

    千次阅读 2021-06-08 16:28:43
    html代码质控参数样本样本标准对照对照XX≥20%不适用不适用CSS代码/*模拟对角线*/.line {background: #234390 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9...
  • h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题
  • 解决: 按钮样式里增加如下代码,如果尝试不起作用时,找父级上加 /*兼容iosx + */ box-sizing: content-box; padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/ padding-bottom: env...
  • css中可利用:before、:after和content属性来在文字两边加上横线;语法“E:before,E:after{content:"";flex:1 1;border-bottom:2px solid;}”,E为包含文字的元素。本教程操作环境:Windows7系统、css3版本、Dell G3...
  • 前端源码 企业微信H5_网页jssdk调用,ticket签名config及示例 一、验证域名归属校验 1. 阅读文档 验证域名归属校验 2. 配置公网域名 由于企业微信文档说需要公网域名,因此,这里演示采用内网穿透来做,前端项目...
  • iOS特性方法(推荐),小程序也可用 padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/ padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/ <...ti
  • HTML:hr横线改变颜色

    千次阅读 2021-02-13 22:49:31
    .produce .produce-content hr { background-color: #e3e3e3; height: 1px; border: none; }
  • 做移动端H5的同学,在你的前端开发生涯中,是否遇到过这种问题? 浮在手机屏幕底部的功能区,在你的安卓和苹果的大部分机型上展示极其完美: 这种 可是在iPhone上却是这种?!? 遇到这样的情况,不要着急,...
  • html把文本框外观格式设为只显示底部的横线input[type='text']{background:none;border:none;border-bottom:1px solid #ddd;}//所有input框类型为text的.inp{background:none;border:none;border-bottom:1px solid #...
  • H5页面适配IPhoneX等机型底部横条

    千次阅读 2020-05-16 10:26:57
    1.添加meta头: <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover">...
  • H5 API

    2020-11-15 12:49:52
    //横线 pen.lineTo(20,140);//竖线 pen.strokeStyle="skyblue";//线的颜色 pen.lineTo(20,20);//斜线 pen.strokeStyle="black";//线的颜色 pen.lineWidth=1;//线的粗细 pen.fillStyle = "yellow"; //填充角度要小于...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,355
精华内容 942
关键字:

h5的横线