![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Html/CSS
霸道流氓气质
每一个优秀的人,都有一段沉默的时光,(项目合作请留言)是那段时光,不抱怨不诉苦,最后渡过了这段感动自己的日子。
展开
-
CSS中怎样调整字体之间的间隔
场景<h3 class="title">用户登录</h3>页面中该标签的字体直接的间隔,没调整之前。要调整用户登录这四个字之间的间隔。letter-spacing:10px;通过设置该属性.title { margin: 0px auto 30px auto; text-align: center; letter-spacing:10px; color: #64b9ee;}设置之后...原创 2022-03-22 13:46:05 · 2179 阅读 · 0 评论 -
CSS中设置el-form的背景图片,并通过background-size设置尺寸
场景登录框el-form设置其背景图片<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">可以直接通过background-image: url("../assets/images/login-bg.jpg");来设置,但是设置之后发现即使设置了el-form的宽度与背景图片宽度一致,也无法实现背景图片正好显示。需要设置背景图片的尺寸。.原创 2022-03-22 14:32:51 · 1881 阅读 · 0 评论 -
CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距
场景Flex是Flexible Box的缩写,意为”弹性布局”。怎样使用弹性布局实现页面上下两个元素上下左右垂直居中排列。实现如下类似布局最外层是是一个div,div里面是上面一个照片,下面一个表单,这两个元素居中排列。注:博客:霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现1、外层div设置样式.login { display: flex; f...原创 2022-03-23 13:37:24 · 30575 阅读 · 0 评论 -
HTML5中使用SpeechSynthesisAPI实现语音合成
场景在网页端实现将指定的文字进行语音合成并进行播报。使用HTML5的Speech Synthesis API就能实现简单的语音合成效果。注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现新建一个Html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-.原创 2020-11-25 15:35:46 · 1428 阅读 · 1 评论 -
html中设置td中内容的垂直位置
场景td有一个属性valign,可以规定单元格内容的垂直排列方式。有top、middle、bottom、baseline这四个值。实现比如设置垂直位置居上位置:<td valign="top"></td>...原创 2019-07-31 09:58:02 · 2920 阅读 · 0 评论 -
Input框设置只能输入中文
场景设置input框只能输入中文。效果实现<input name="nation" type="text" id="nation" class="required jDelete plug_guoji w_40 h_36em line_h_36em c_gray_777 bor_rad_05em bor_gray_ddd border bg_white" va...原创 2019-07-18 15:01:31 · 7074 阅读 · 0 评论 -
Input中onbeforepaste的作用
场景示例代码:<input type="text" id="chineseLastName" name="chineseLastName" maxlength="16"class="required w_20 fl h_36em line_h_36em c_gray_777 bor_rad_05em bor_gray_ddd border bg_white" value="...原创 2019-07-18 14:52:56 · 906 阅读 · 1 评论 -
Input框设置只能输入英文
场景设置input框只能输入英文。效果实现<input type="text" id="chineseLastName" name="chineseLastName" maxlength="16" class="required w_20 fl h_36em line_h_36em c_gray_777 bor_rad_05em bor_gray_ddd bord...原创 2019-07-18 14:44:38 · 10892 阅读 · 0 评论 -
CSS中设置所有td的内边距
场景业务需求设置表格中td的内边距。如果直接使用html,需要在每个html中引入css样式。如果需要实现抽取公共页面,引用公共css文件,参照:Thymeleaf中设置每个页面引入公共css样式:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/94010967实现css文件代码.table &g...原创 2019-07-02 10:12:38 · 7954 阅读 · 0 评论 -
selecte设置不可用使用disabled属性注意
场景在新增时select可以下拉选择,在编辑时select不可以下拉选择。所以需要控制其属性,这里通过thymeleaf模板来实现。注意:使其禁用时:disabled="disabled"使其启用时:disabled="false"实现<select class="form-control" name="businessInitiator" id="bus...原创 2019-06-20 17:01:44 · 1360 阅读 · 0 评论 -
select设置默认文字,不出现在下拉框中
场景在实现新增和编辑时,初次进入页面需要显示默认文字,监听下拉框的改变的事件实现联动,所以在新增时必须要让其选择。实现<select class="form-control" name="businessInitiator" > <option id="yuanliaoInit...原创 2019-06-20 09:59:00 · 6105 阅读 · 1 评论 -
textarea怎样隐藏滚动条
场景textarea设置隐藏滚动条。实现设置横向滚动条:<textarea id=txtComments style="overflow-x:hidden"></textarea>设置竖向滚动条:<textarea id=txtComments style="overflow-y:hidden"></textarea>...原创 2019-05-23 09:14:48 · 3741 阅读 · 0 评论 -
SpringBoot中使用thymeleaf模板时select下拉框怎样查询数据库赋值
场景实现效果数据库中码表设计实现thymeleaf页面代码当前页面为:receiveOrder/wmsReceiveOrder.html<div class="col-sm-2"> <div class="form-group"> ...原创 2019-03-21 16:25:47 · 7367 阅读 · 4 评论 -
Html轻松使用拖拽实现垃圾桶,代码带注释,包你能看懂
效果参考教程:W3school:http://www.w3school.com.cn/html5/html_5_draganddrop.asp菜鸟教程:http://www.runoob.com/jsref/event-ondragend.html关键知识点:在拖动目标上触发事件 (源元素):ondragstart - 用户开始拖动元素时触发ondrag - 元...原创 2019-01-13 16:29:52 · 2243 阅读 · 0 评论 -
Input为number类型maxlength不好使,用js轻松解决
场景<input type="text" maxlength="5" /> //可以<input type="number" maxlength="5" /> //没有效果如果为number怎样控制输入长度解决<input type="number" oninput="if(value.leng原创 2019-01-11 11:08:53 · 2197 阅读 · 0 评论