![](https://img-blog.csdnimg.cn/20200615220706782.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
html页面
文章平均质量分 64
html页面
我是李大福
一个小小的前端工程师
展开
-
grid 布局案例之grid-template-areas和grid-column的使用
分别使用grid-template-areas和grid-column两种方法进行同样效果布局。原创 2024-04-12 12:15:00 · 847 阅读 · 0 评论 -
一些炫酷的按钮特效
一些炫酷的按钮原创 2024-04-13 08:30:00 · 909 阅读 · 0 评论 -
使用flex布局写6种骰子
不使用position定位,完全靠flex进行分配位置。原创 2024-04-09 12:00:03 · 1047 阅读 · 0 评论 -
数据请求常见的 ContentType 属性值
浏览器的原生 form 表单,如果,那么最终就会以 application/x-www-form-urlencoded 方式提交数据。该种方式提交的数据放在 body 里面,数据按照 key1=val1&key2=val2 的方式进行编码,key 和 val 都进行了 URL转码。转载 2023-01-10 21:42:46 · 122 阅读 · 0 评论 -
element-ui 的el-cascader多选在IE中样式不正常
注意:ie缓冲比较严重,修改样式后,一定要ctrl+shift+del 进行缓冲清理,没准清理完缓冲你的样式就起作用了<style> @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .el-cascader__tags > span { flex: aut...原创 2020-03-19 00:49:33 · 1555 阅读 · 0 评论 -
响应式网站最常用代码
响应式网站实现有两种方式,1.直接使用媒体查询依据宽度不同引入不同的样式表;2.引入的样式表使用媒体查询进行区分原创 2019-04-02 20:28:21 · 3673 阅读 · 0 评论 -
flex制作的常用布局
flex制作的常用布局两端宽度定值,中间自适应<div class="module"> <div class="module_l"> <div> left1 </div> <div> left2 </div> </div> <div class="module_c">原创 2022-03-27 22:14:03 · 225 阅读 · 0 评论 -
freemarker 指令控制新闻列表标题样式
freemarker 指令控制新闻列表标题样式原创 2022-03-12 12:08:35 · 309 阅读 · 0 评论 -
css绘制三角形 triangle
css3绘制三角形原创 2022-01-29 09:49:00 · 257 阅读 · 0 评论 -
css text-overflow: ellipsis; 单行不裁切的原因及解决办法
css 单行不裁切的原因及解决办法overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: flex;带display: flex;这样写不裁切,需要改成display: block;块级元素才可以裁切原创 2022-01-09 23:37:52 · 372 阅读 · 0 评论 -
很不错的UE交互
很不错的UE交互效果图demo<template><div> <div class="bg"> <h2>很不错的UE交互</h2> <ul class="list"> <li class="list_i"> <a href="###" class="list_a" target="_blank">原创 2021-11-27 22:44:35 · 314 阅读 · 0 评论 -
如何实现表单label 两端对齐
表单label 两端对齐文章目录表单label 两端对齐需求概述效果图demo代码需求概述有的强迫症的客户总是要求要两端对齐,首先想到的是text-align:justify ,但是宣告失败!!所以只能采用其他方式效果图demo代码<template><div> <div class="row"> <div class="line"> <span class="label">原创 2021-09-15 23:19:11 · 1526 阅读 · 0 评论 -
如何让自己制作的按钮文字不被选中?
如何让自己制作的按钮文字不被选中?文章目录如何让自己制作的按钮文字不被选中?概述核心代码我们不希望看到文字被选中的效果完整demo概述我们在自己写按钮的时候,不希望在点击按钮的时候,出现文字被选中的效果。只需要添加下面的代码就可以了。核心代码-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;我们不希望看到文字被选中的效果完整demo <span cl原创 2021-09-06 22:40:19 · 483 阅读 · 0 评论 -
div模拟表格,可以依据列数不同进行调节
模拟表格需求分析html的table有时候不能完全满足需求,就需要我们自己用div模拟绘制一个,于是就有了这个案例demo。目前实现的是两列效果,如果需要三列,将$w-i:50%; 改为 $w-i:33.3333%; ;将最后一列的补白<li v-if="list&&list.length%2==1" class="tableHa_list_i"><span class="tableHa_list_i_l"></span><span class原创 2021-09-06 22:39:10 · 640 阅读 · 0 评论 -
html+css不换行的解决办法
html+css不换行的解决方法文章目录html+css不换行的解决方法问题描述需求效果图解决方案总结完整demo代码问题描述**需求:**一级菜单较短,不用换行,二级菜单比较长需要换行。但是一级添加了强制不换行white-space: nowrap;导致二级也不换行。需求效果图解决方案在二级上添加换行处理代码white-space: normal;总结white-space 是继承属性,千万要记住,别被坑了,好多同行和我一样误认为它是非继承属性,被它坑惨了。附,详细说明链接:http原创 2021-07-27 21:51:33 · 1304 阅读 · 0 评论 -
flex 半优雅实现列表浮动流式布局 justify-content: space-between;(太繁琐,不建议这样用)
float布局会出现经典的卡点问题,而flex可以完美避开这个坑。半优雅实现列表的浮动流式布局。列数最好别超过3列原创 2021-01-06 18:47:49 · 320 阅读 · 0 评论 -
flex 实现列表浮动流式布局
flex 实现列表浮动流式布局文章目录flex 实现列表浮动流式布局概述效果图代码概述小方块是 50*50px,上下左右间距是 10pxmargin-left:10px 实现间距,并清除每行第一个元素的 margin-left效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=原创 2021-01-06 18:45:52 · 342 阅读 · 0 评论 -
vscode 使用正则进行匹配批量查找搜索替换清除html内容
通过采用正则这种符号来替换或去除页面文档或代码中相似或相近的内容原创 2021-01-06 18:43:17 · 2648 阅读 · 1 评论 -
修改radio的选中颜色为红色
修改radio选中颜色为红色<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>修改radio的选中颜色为红色</title> <meta name="description" content=转载 2020-11-29 09:11:20 · 9166 阅读 · 8 评论 -
去除html 中 table标签里面多余的class height width style等内容
去除html table里面多余的内容需求概述工作中,客户会发来excel表格,让放到网站上进行显示。将表格粘贴到在线版的html编辑器 在线编辑html链接 生成代码后,代码里会有很多冗余的代码,为了与系统原来样式保持一致,必须去掉这些多余的代码去除操作采用带有正则匹配的工具,如vscode,webstorm等第一步去除 class height width style附上正则:(class="[\s\S]*?")|(height="[\s\S]*?")|(width="[\s\S]*?"原创 2020-11-21 12:56:25 · 1043 阅读 · 0 评论 -
vue 跑马灯顶部显示轮播效果
目录vue 跑马灯顶部显示轮播效果gif动画展示实现原理demo代码vue 跑马灯顶部显示轮播效果gif动画展示实现原理使用定时器setInterval对元素的left进行间隔操作,逐渐减小,实现从右到左的移动。mouseover时对定时器停止,mouseout时重新启动定时器。由于移动元素需要加点击事件,所以使用了v-html指令,如不需要,请换成v-textdemo代码<!DOCTYPE html><html lang="en"><head>原创 2020-05-22 23:54:45 · 820 阅读 · 0 评论 -
前端技术沉淀
视频插件Plyr 是一个简单的可定制的 HTML5 媒体播放器,使用原生 JavaScript 没有其他依赖。支持 YouTube 和 Vimeo 。原创 2019-04-18 11:34:08 · 741 阅读 · 0 评论 -
css3 backgroud 的缩写形式
css3 backgroud的缩小形式 background: #d3d4d5 url(bg.png) 100% 0 / 50% 80% no-repeat;注意:/ 不能丢,/前面表示background-position; /后面表示background-size<!DOCTYPE html><html lang="en"><head> ...原创 2020-05-02 11:15:19 · 377 阅读 · 0 评论 -
html转pdf需要注意的边框不显示的兼容性问题
样式处理好多选择器都不支持,最好都写到行内表格边框问题只能像下面这样分开各个方向写,不能像平时那样直接写border: 1px solid #e8eaec; border-top: 1px solid #e8eaec; border-right: 1px solid #e8eaec; border-bottom: 1px solid #e8eaec; border-left: 1px...原创 2020-03-23 11:50:44 · 3420 阅读 · 0 评论 -
图片长宽比不同时,依然居中显示
<style>.exhibitorDetail__product__item_imgs { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-p...原创 2020-03-06 10:44:35 · 156 阅读 · 0 评论 -
table表格依据数据内容相同时进行合并行单元格
table表格依据数据进行合并单元格table表格依据数据内容相同时进行合并行单元格合并前与合并后实际效果比较原理核心代码写代码犯错的位置table表格依据数据内容相同时进行合并行单元格合并前与合并后实际效果比较原理先循环列再循环行,对第一行和第二行进行内容比较,如果内容相同,就隐藏第二行,并将计数器sum+1。继续比较第二行与第三行,依次类推,本列循环完毕,给本列第一行添加rowsp...原创 2019-12-30 00:00:56 · 3472 阅读 · 1 评论 -
兼容性处理之低版本ie的处理
<!--[if IE 9]> <meta http-equiv="X-UA-Compatible" content="IE=8"><![endif]--><!-- HTML5 shiv 和 Respond.js 是为了让 IE8 支持 HTML5 新增的元素和媒体查询(media queries)功能 --> <!-- 警告:通...原创 2019-08-13 15:50:22 · 148 阅读 · 0 评论 -
前端js截取指定长度个数字符 v2.0.0
2.0版本比1.0版本使用时更简洁,无需在设置媒体类型,直接设置数量就可以了<p class="sliceStr" data-pc-len="12" data-wap-len="8">这里是文章测试标题,含标点一共二十个字。</p><p class="sliceStr" data-wap-len="8">这里是文章测试标题,含标点一共二十个字。</p...原创 2019-04-19 13:07:02 · 5856 阅读 · 4 评论 -
前端小组件 - 各种阴影
#顶部导航的阴影.head{ box-shadow: 0 0 5px #888; border-bottom: 1px solid #ebebeb;}原创 2019-04-23 13:54:09 · 466 阅读 · 1 评论 -
最简单的倒计时
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <script crossorigin="anonymous" integrity="sha384-6ePHh72Rl3hKio4HiJ841psfsRJveeS+aLoaEf3BWfS+gTF0XdAqku2ka...转载 2019-04-17 11:45:42 · 366 阅读 · 0 评论 -
html页面常用的个一些基本配置
作为前端工程师,总会经常写这些基本配置。诸如,编码格式、渲染方式、兼容性等原创 2019-04-03 13:52:59 · 1010 阅读 · 0 评论