使用flex布局,在每一行上,需要固定X个元素,超过的元素做换行处理。 假设如下Html代码: <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div…

2022-09-30 0条评论 11点热度 0人点赞 admin 阅读全文

要在网页上显示类似O2(氧气)、m2(立方米)这样带上下标的。 先上示例代码,再解释: O<span style="vertical-align: sub;">2</span> m<span style="vertical-align: super;">2</span> 在css中,可以使用vertical-align 属性的sub、super或者text-top、text-bottom属性值来显示文字的上标和下标。下面我们就来介绍一下css vertical-ali…

2022-09-23 0条评论 21点热度 0人点赞 admin 阅读全文

在用Html/CSS做一些流程图,需要用到上下的箭头,如图所示: 以下是我用Html/CSS的实现方式,箭头使用的是svg(path)画出来的,箭头的颜色目前是黑色,使用:fill="#000000",包括箭头高度、宽度,颜色等等,可能根据实际情况调整。 HTML代码如下: <html> <style> .my-arrow-wrap { position: relative; height: 40px; border-left: 1px solid #000; margin: 10vh 50…

2022-08-12 0条评论 52点热度 0人点赞 admin 阅读全文

如题的需求:使用input 标签type=file来选择图片文件并显示在div/image标签中的实现。不过文件选择组件不能自定义我要的按钮,我使用了样式给input隐藏起来,然后自己再使用div画了一个按钮(选择照片) html代码如下: <div style="width:96px;height: 128px;border: #A2A2A2 1px solid;text-align: center;background: #FAFAFA;"> <img :src="portraitData" …

2022-07-19 0条评论 49点热度 0人点赞 admin 阅读全文

需要在网页浏览器中调用连接摄像头/音频,并显示在浏览器中 Javascript代码如下: this.getUserMediaToPhoto({ video: { width: 480, height: 320 }, audio: true }, function(stream) { var video = document.getElementById('video'); video.srcObject = stream; }, function(error) { console.log(error); }); /…

2022-07-13 0条评论 66点热度 0人点赞 admin 阅读全文

DIV或者其他标签内的多行文本文字,默认情况下的很多时候,可能对齐方式排版的对齐方式不对,不是很好看(右侧不对齐),如图: 为了让网页美观,希望让文本两段对齐,可以使用来进行对齐 示例的代码如下: .my-div { word-wrap: anywhere; text-align:justify; } 修改后如图就两端对齐了,好看多了:  

2022-07-11 0条评论 61点热度 0人点赞 admin 阅读全文

Html中input输入框,如果设置属性type="number"可以限制用户仅能输入数字(不过限制不能完全自定义,有自定义需求的,请查看:https://blog.terrynow.com/2022/04/20/vuejs-iview-input-allow-digits-or-specified-chars/),但是加上这个属性后,发现输入框右侧有个上下的箭头,可以给输入的数字+1后者-1,但是因为一些特定的要求,产品要求我们去掉或者隐藏这个上下箭头,如图: 可以利用css实现,Html代码如下: <in…

2022-04-24 0条评论 161点热度 0人点赞 admin 阅读全文

需要在网页浏览器中实现调用手机的拨打电话功能(点了链接或者功能按钮后,会弹出手机系统的拨打电话确认提示框,然后就可以直接拨打电话了) 使用Javascript来调用拨打电话: window.open("tel:13912345678", '_self'); 如果是使用网页中的链接来拨打电话,可以使用a链接: <a href="tel:13912345678">点击拨打电话13912345678</a>  

2022-02-08 0条评论 225点热度 0人点赞 admin 阅读全文

之前为了让Html中的文字实现首行缩进,我都是前面用好几个空格(或者&nbsp;)来凑的,这样显得很不优雅,而且具体多少个空格还不一致。 原来css里有专门的属性,可以实现这个功能,那就是 text-indent 说明 用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值,这会产生一种“悬挂缩进”的效果。 默认值: not specified 继承性: yes 版本: CSS1 JavaScript 语法: object.style.textIndent="50px" 可能的…

2021-11-01 0条评论 199点热度 0人点赞 admin 阅读全文

如题,使用css纯代码实现了的适用于手机版的菜单点击效果(带过渡动画),本代码使用hover鼠标划过来模拟点击,可以稍加修改实现点击事件。 效果如图: Html/CSS代码实现如下,vue下点击后实现相同的功能的代码详见:https://blog.terrynow.com/2021/09/05/vue-css-animated-menu-toggle-effect-code-implement/ <!doctype html> <html> <head> <style>…

2021-09-16 0条评论 533点热度 0人点赞 admin 阅读全文
12