CSS
文章平均质量分 63
心灵的制造商
喜欢搞些小的研究;爱运动
展开
-
最近学习发现一个background-blend-mode,这是CSS的一个新成员吧!这里分享记录一下
CSS 属性定义该元素的背景图片,以及背景色如何混合。混合模式应该按background-image CSS 属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等,它会被截取至相等的数量。在所有的元素中。在SVG,它适用于容器元素、图形元素和图形引用元素。它也适用于::first-letter和::first-line。原创 2024-05-06 10:08:50 · 203 阅读 · 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 · 367 阅读 · 0 评论 -
rem单位 布局学习布局笔记;
rem(root em)是一个相对单位,类似于em, em是父元素字体大小。不同的是rem 的基准是相对于HTML元素的字体大小原创 2022-04-09 10:35:52 · 224 阅读 · 0 评论 -
使用定位配合translate实现盒子居中显示
使用定位配合translate实现盒子居中显示,居中对盒子内部元素没有任何影响原创 2022-02-24 18:01:27 · 269 阅读 · 0 评论 -
Flex 布局笔记
Flex 布局由容器flex container和项目flex item两部分组成,容器默认存在两根轴:水平的主轴main axis和垂直的交叉轴cross axis,项目默认以主轴排列。 Flex 属性包括容器属性和项目属性两部分,容器上可设置:flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content6 个属性,项目上同样可设置 6 个属性,分别为:order、flex-grow、flex-shrink、fle原创 2022-02-10 09:55:24 · 676 阅读 · 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 · 264 阅读 · 0 评论 -
蹦的一下,又来一个新属性scrollbar-gutter
这是一个 **scrollbar**家族的属性, scrollbar-gutter 可以让滚动条出现的时候内容不晃动。原创 2022-01-14 09:53:00 · 1213 阅读 · 0 评论 -
实现表单两列或一列、三列左右对齐
表单布局原创 2021-12-03 16:47:12 · 2576 阅读 · 0 评论 -
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 · 1459 阅读 · 0 评论 -
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 · 1328 阅读 · 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 · 338 阅读 · 0 评论 -
javascript学习笔记七
DOM 元素 节点原创 2021-07-27 08:58:54 · 153 阅读 · 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 · 207 阅读 · 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 · 576 阅读 · 0 评论 -
CSS visited,hover,active , focus这四个区别
CSS伪类用于向某些选择器添加特殊的效果,在样式表中,各样式排列的顺序很有讲究。:link 与 :visited 在样式文件中的顺序可以随便放置。:focus,: hover,:active这几个,如果你设置的顺序不同,会直接影响样式的显示效果。:focus -> :hover -> :active有些人可能会困惑,为什么必须要按这样的顺序,而不能打乱呢? 其实他们每一个选择器都代表一个含义。:link代表为访问链接的样式,所以只要你是超链接,且未被访问过,则链接都会按照你原创 2020-09-15 14:44:20 · 1747 阅读 · 0 评论 -
CSS解决容器背景不能撑开的问题
在开发中;有时候给容器设置了背景;发现他不会被撑开,而是是显示在第一行的位置,不管里边放多少容器和内容,如下图这种情况:如何让这个容器显示正确的效果呢?第一解决方法就是在背景容器使用overflow:hidden; 其实这个方法也是正确的,但是如果使用这个方法,你会发现搜索输入框如果是下拉的情况是显示不全的,只显示显示一半。第二解决方法就限制个最小高度;min-height,这个方法如果...原创 2020-04-01 15:26:35 · 1258 阅读 · 0 评论 -
基于伪类:target锚点实现的弹出
在不使用JS的情况下;这种方式的弹出窗是非常值得推荐的;废话不多说;直接看代码:HTML<div class="row slideanim"> <div class="col-md-6 gal-img"> <a href="#gal2" class="gal2h"> <span>标题文字</span> </...原创 2020-03-31 15:26:18 · 291 阅读 · 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 · 12756 阅读 · 0 评论 -
Jquery查找父级添加样式
Jquery查找父级添加样式利用jQuery的parents()函数;试用前请先引入核心jQuery.jsHTML结构 首页样式加在的位置 ,navbar navbar...原创 2018-10-15 16:10:57 · 4210 阅读 · 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 · 1445 阅读 · 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 · 4194 阅读 · 0 评论 -
border实现的两侧等高
border实现的两侧等高左右两侧等高实例就是使用HTML的border属性更多分享左右两侧等高在现实开发中,很多时候会遇到左右两侧等高问题;很多时候会想到使用JS或jQuery右侧的高度赋值个左侧的div容器;这两天脑子突然想到一种折腾方法;就开放代码测试了一下,居然成功了;所以写下来记录一下,以供后续查阅。实例就是使用HTML的border属性思路说明:利用border-left+ma...原创 2019-04-28 09:36:34 · 305 阅读 · 0 评论 -
DIV 中的高度是由什么决定的
DIV 中的高度是由什么决定的DIV 中的高度是由什么决定的演示效果HTML代码片段CSS代码片段DIV 中的高度是由什么决定的默认div的高度是0,但是我们在div中放入文字,div的高度就有了。很多人会认为是文字大小font-size决定的。其实要知道这个问题;我们可以通过简单实例就知道了。div的高度实际是通过line-height决定的。演示效果图片: 当然,我们为了让用户更加便...原创 2019-04-29 09:33:54 · 1500 阅读 · 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 · 563 阅读 · 0 评论 -
position定位与overflow影响容器内部提示框显示问题
position定位与overflow影响容器内部提示框显示问题问题描述基础代码如下显示效果图解决问题方法问题描述因为使用了一个滚动条美化插件;该插件使用div容器做滚动条,所以使用了position:relative相当定位与position: absolute绝对定位与overflow:hidden影响容器内部提示框显示问题。基础代码如下<div style="max-heigh...原创 2019-05-15 15:37:18 · 1116 阅读 · 0 评论 -
火狐与IE浏览器之间的一些差别收集
png透明 AlphaImageLoaderfilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL)enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true:默认值。滤镜激活。false:滤镜被禁止。sizing转载 2011-11-26 00:04:51 · 1025 阅读 · 0 评论