HTML
关注
分享
扫一扫
文章平均质量分 63
心灵的制造商
喜欢搞些小的研究；爱运动
展开
-
最近学习发现一个background-blend-mode，这是CSS的一个新成员吧！这里分享记录一下
CSS 属性定义该元素的背景图片，以及背景色如何混合。混合模式应该按background-image CSS 属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。在所有的元素中。在SVG，它适用于容器元素、图形元素和图形引用元素。它也适用于::first-letter和::first-line。原创 2024-05-06 10:08:50 · 252 阅读 · 0 评论 -
中间显示总数的饼图，
Echart js 中间显示统计数据，示例代码原创 2022-07-12 17:13:34 · 852 阅读 · 0 评论 -
自定义 CSS 重置
reset自定义 CSS 重置这是我使用了很多年的 CSS 重置样式代码这是我使用了很多年的 CSS 重置作为一个开发者，我觉得您应该拥有一份这样的重置。把它带入你的项目，并随着时间的推移，当你学习新事物或发现新技巧时，它会进行调整。1、新建一个css 文件，2、复制代码放到刚新建的css文件中，3、在你的项目中头部link引入。样式代码*, *::before, *::after { box-sizing: border-box;}* { margin: 0;}html, b原创 2022-04-26 16:50:51 · 420 阅读 · 0 评论 -
element UI el-image :src属性使用相对路径时图片无法显示
解决vue element Ui el-image图片不显示问题原创 2022-04-18 10:54:25 · 2878 阅读 · 1 评论 -
rem单位 布局学习布局笔记；
rem(root em)是一个相对单位，类似于em, em是父元素字体大小。不同的是rem 的基准是相对于HTML元素的字体大小原创 2022-04-09 10:35:52 · 247 阅读 · 0 评论 -
使用定位配合translate实现盒子居中显示
使用定位配合translate实现盒子居中显示，居中对盒子内部元素没有任何影响原创 2022-02-24 18:01:27 · 303 阅读 · 0 评论 -
静态UI组件开发实例页面代码收藏
静态UI组件开发实例页面实现的重点技巧就是利用**::first-line**伪元素的文字控色技术<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><titl转载 2022-01-20 09:34:50 · 311 阅读 · 0 评论 -
实现表单两列或一列、三列左右对齐
表单布局原创 2021-12-03 16:47:12 · 2795 阅读 · 0 评论 -
jquery-confirm.js弹出窗调用自定义DIV
一、引入相关脚本<link type="text/css" href="css/jquery-confirm.css"/><script src="js/jquery-confirm.js"></script>二、HTML代码<style type="text/css"> .tbBox{display:none;} .tbBox .tbHead{height:30px;} .tbBox .tbBody{padding:15p原创 2021-11-26 15:06:44 · 1090 阅读 · 0 评论 -
jQ UI 后台管理系统基础UI
jQ UI 后台管理系统基础UIjQ UI 后台管理系统基础UI基础页面![在这里插入图片描述](https://img-blog.csdnimg.cn/44464b1228d740779a3cdfadeca60726.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5b-D54G155qE5Yi26YCg5ZWG,size_20,color_FFFFFF,t_70,g_se,x_16原创 2021-11-25 18:46:22 · 3086 阅读 · 14 评论 -
HTML5性能优化方法，延迟加载
方法一：直接把加载的文件放到文档的底部<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=0"> <title>BCM登录</title><!-- 地原创 2021-11-05 15:07:47 · 1567 阅读 · 0 评论 -
HTML5思维脑图插件推荐
**一、jsMind**jsMind 是一个显示/编辑思维导图的纯 javascript 类库，其基于 html5 的 canvas 进行设计。jsMind 以 BSD 协议开源，在此基础上你可以在你的项目上任意使用。你可以在此浏览适用于 jsMind 的 BSD 许可协议(中英文版本)。官网地址核心代码<div id="jsmind_container"></div><script type="text/javascript" src="../js/jsmin原创 2021-10-20 12:00:27 · 12340 阅读 · 6 评论 -
table表格实现边框圆角无效的解决方法
table表格实现边框圆角无效的解决方法HTML代码样式文件HTML代码效果图如下table表格实现边框圆角无效的解决方法，<table class="table table-bordered"> <thead> <tr> <td class="col-5">成本清单</td> <td class="col-2">FIL</td>原创 2021-09-02 23:10:04 · 1416 阅读 · 0 评论 -
bootstrap 5的offcanvas使用
使用不同的方法掉用显示，废话不多说；直接上代码。<!doctype html><html lang="zh-CN"><head><!-- 必须的 meta 标签 --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- Bootstrap 的 CSS 文件 --><原创 2021-08-10 09:20:55 · 1265 阅读 · 0 评论 -
javascript学习笔记八 - 对象
一、propertyavaScript中的所有事物都是对象：字符串、数值、数组、日期、函数等，JavaScript允许自定义对象。对象是一种特殊的数据。拥有属性和方法。属性是与对象相关的值。对象属性的语法是：objectName.propertyName<script>person = { firstname: "poya", lastname: "dj", age:30, eyecolor: "blue"}document.write(person.firstname +原创 2021-08-02 20:27:35 · 369 阅读 · 0 评论 -
javascript学习笔记三
JavaScript this 关键字面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。1、在方法中，this 表示该方法所属的对象。2、如果单独使用，this 表示全局对象。3、在函数中，this 表示全局对象。4、在函数中，在严格模式下，this 是未定义的(undefined)。5、在事件中，this 表示接收事件的元素。6、类似 call() 和 apply() 方法可以将 this 引用到任何对象原创 2021-07-16 17:13:56 · 160 阅读 · 0 评论 -
javascript学习笔记一
javascript学习笔记JavaScript 数据类型JavaScript 数据类型JavaScript 语句标识符JavaScript 变量的生存期JavaScript 全局变量与局部变量字符串方法JavaScript 数据类型JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 数据类型值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)原创 2021-07-08 17:02:25 · 122 阅读 · 0 评论 -
比较 opacity: 0、visibility: hidden、display: none
比较 opacity: 0、visibility: hidden、display: none一、display: none;DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；事件监听：无法进行 DOM 事件监听；性能：动态改变此属性时会引起重排，性能较差；继承：不会被子元素继承，毕竟子类也不会被渲染；transition：transition 不支持 display。二、visibility: hidden;DOM 结构：元素被隐藏，但是会被渲染不会消失，占原创 2021-06-24 12:28:29 · 230 阅读 · 0 评论 -
background: linear-gradient 实现表格横线及 line-height-step运用
line-height-step运用及背景实现表格横线line-height-step简单介绍实例代码完成后的效果图实现横线核心代码line-height-step简单介绍CSS中的line-height-step属性可以让文字内容占据的行高永远是line-height-step属性值的整数倍。语法：line-height-step: 仔细阅读这篇文章可以访问W3C官网介绍，https://www.w3.org/TR/css-rhythm-1/属性值只能是长度值，初始值是0实例代码废话不多说；原创 2021-03-26 18:07:12 · 625 阅读 · 0 评论 -
两个ul标签中的li互相移动
都是专业人员看的东西；废话不多说，直接上代码；1、使用前请先引入jquery.js插件CSS代码如下：<style type="text/css">.clearfix:before,.clearfix:after {content: " "; display: table; }.clearfix:after {clear: both; }.leftSide{width:300px;padding:10px;}.leftSide .leftTop,.leftSide .le原创 2020-09-17 15:17:43 · 696 阅读 · 0 评论 -
CSS解决容器背景不能撑开的问题
在开发中；有时候给容器设置了背景；发现他不会被撑开，而是是显示在第一行的位置，不管里边放多少容器和内容，如下图这种情况：如何让这个容器显示正确的效果呢？第一解决方法就是在背景容器使用overflow:hidden; 其实这个方法也是正确的，但是如果使用这个方法，你会发现搜索输入框如果是下拉的情况是显示不全的，只显示显示一半。第二解决方法就限制个最小高度；min-height，这个方法如果...原创 2020-04-01 15:26:35 · 1331 阅读 · 0 评论 -
基于伪类:target锚点实现的弹出
在不使用ＪＳ的情况下；这种方式的弹出窗是非常值得推荐的；废话不多说；直接看代码：ＨＴＭＬ<div class="row slideanim"> <div class="col-md-6 gal-img"> <a href="#gal2" class="gal2h"> <span>标题文字</span> </...原创 2020-03-31 15:26:18 · 357 阅读 · 0 评论 -
View For EasyUI 后台模板html
View For EasyUIView For EasyUi是基于EasyUI-1.5x开发的前端UI框架；主题主题皮肤，包含所有EasyUI的全部组件美化， 还有各种插件，各种优化 ，完全使用矢量图标，每一个小图标都是矢量图标，支持无限放大和颜色设置，全新扁平化设计；支持定制各种主题皮肤颜色。标准的EasyUi语法严格按照W3C标准开发完美支持HTML5网页的完整框架UML序列图...原创 2018-05-11 15:12:11 · 12856 阅读 · 0 评论 -
Jquery查找父级添加样式
Jquery查找父级添加样式利用jQuery的parents()函数；试用前请先引入核心jQuery.jsHTML结构 首页样式加在的位置 ，navbar navbar...原创 2018-10-15 16:10:57 · 4269 阅读 · 1 评论 -
jQuery显示动态时间
一、实例效果图二、实例代码说明该实例依赖于jQuery1、试用前引入jQuery.js核心库；2、在body内编写前端html代码；代码如下：实例1<div class="clock"> <div class="time"> <span class="time_hours"></span>原创 2019-01-16 11:38:12 · 1496 阅读 · 3 评论 -
div+css实现凹凸形状
div+css实现凹凸形状实际效果图CSS代码片段HTML代码其他实际效果图CSS代码片段在head区域插入css的 代码片. <style type="text/css">.ao,.tu { display: inline-block; width: 0; font-size: 16px; line-height:23px; margin: 35p...原创 2019-04-03 09:28:44 · 4289 阅读 · 0 评论 -
border实现的两侧等高
border实现的两侧等高左右两侧等高实例就是使用HTML的border属性更多分享左右两侧等高在现实开发中，很多时候会遇到左右两侧等高问题；很多时候会想到使用JS或jQuery右侧的高度赋值个左侧的div容器；这两天脑子突然想到一种折腾方法；就开放代码测试了一下，居然成功了；所以写下来记录一下，以供后续查阅。实例就是使用HTML的border属性思路说明：利用border-left+ma...原创 2019-04-28 09:36:34 · 341 阅读 · 0 评论 -
DIV 中的高度是由什么决定的
DIV 中的高度是由什么决定的DIV 中的高度是由什么决定的演示效果HTML代码片段CSS代码片段DIV 中的高度是由什么决定的默认div的高度是0，但是我们在div中放入文字，div的高度就有了。很多人会认为是文字大小font-size决定的。其实要知道这个问题；我们可以通过简单实例就知道了。div的高度实际是通过line-height决定的。演示效果图片: 当然，我们为了让用户更加便...原创 2019-04-29 09:33:54 · 1569 阅读 · 0 评论 -
基于锚点定位和overflow的选项卡
如果在不考虑使用JS插件或者Query的情况下，基于锚点定位和overflow的选项卡，废话不多说，直接上代码，大家一看就明白CSS代<style type="text/css">.container{margin:30px auto;width:500px;height:250px;}.container .tab_head{ height:40px; bac...原创 2019-05-06 17:24:56 · 597 阅读 · 0 评论 -
position定位与overflow影响容器内部提示框显示问题
position定位与overflow影响容器内部提示框显示问题问题描述基础代码如下显示效果图解决问题方法问题描述因为使用了一个滚动条美化插件；该插件使用div容器做滚动条，所以使用了position：relative相当定位与position: absolute绝对定位与overflow：hidden影响容器内部提示框显示问题。基础代码如下<div style="max-heigh...原创 2019-05-15 15:37:18 · 1149 阅读 · 0 评论 -
常用语义化HTML标签
**常用语义化HTML标签一、标签使用的误区很多开发中在项目开发中，经常标签乱用；本来是写个标题用“<h3>文本标题</h3>”，经常会写成<span>文本标题</span>,其实，其实第一种写法才是WC3推荐的，因为标题就是标题使用H1 至 H5标签才是正确选择。现在的网页布局方式都叫“DIV+CSS”，满屏代码都是“DIV”其实是一个错误的...原创 2019-06-04 11:08:57 · 392 阅读 · 0 评论