![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html/css
文章平均质量分 87
Lioner-CSU
慢慢变成一个很厉害的人吧!
展开
-
button和input type="button"的区别
<button>具有<input type="button" ... >相同的作用但是在可操控性方面更加强大。HTML 4.01规范的Forms部分指 名表单有以下几种控制类型:buttons, checkboxes, radio buttons, menus, text input, file select, hidden controls, object cont...原创 2019-07-16 11:11:22 · 870 阅读 · 0 评论 -
CSS权重:样式冲突时,哪些选择器的样式会被优先使用
权重决定了哪一条规则会最终被浏览器应用在元素上。 权重的级别划分时包含了所有的css选择器 如果两个选择器作用在同一元素上,则权重高者生效。 权重的级别根据选择器被划分为四个分类:行内样式,id,类与属性,以及元素。行内样式>id>类与属性>元素1、行内:直接在html中规定的元素 <h1 style="color: #fff;">header</h...原创 2019-07-22 11:38:32 · 665 阅读 · 0 评论 -
CSS选择器大全:基本选择器/属性选择器/伪类选择器
CSS3 选择器在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。"CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。)选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素。 1 #id #firstname 选择 id="f...原创 2019-07-22 11:50:39 · 1215 阅读 · 0 评论 -
菜单导航间竖杠竖线间隔符 | 效果的CSS实现
只有少数的间隔符(比如1个)1、<a></a> <span>|<span> <a></a>用span来创造两边的空隙而不使用空格有多个重复的间隔符1、使用<a>的border属性再用first-child把最左边的删掉缺点:如果点击效果和点击范围仅限文字,那么...原创 2019-07-26 10:57:33 · 4823 阅读 · 0 评论 -
用CSS画三角形
div{ width: 0; height: 0; border-left: 4px solid transparent;/*透明*/ border-right: 4px solid transparent; border-bottom: 8px solid #242d3b;}div{ width: 0; h...原创 2019-07-26 16:37:23 · 110 阅读 · 0 评论 -
对img标签使用after和before伪元素失效的原因
img标签的before,after伪类content是插入在元素内容的前后,而不是元素的前后比如":before" 伪元素可以在元素的内容前面插入新内容。下面的例子在每个 <h1> 元素前面插入一幅图片:h1:before { content:url(logo.gif); }在CSS中总有一些你不用不知道,用到才知道的“坑”。比如今天要谈的,把 b...原创 2019-07-26 17:36:57 · 11620 阅读 · 0 评论 -
CSS布局的几种方式 table flex float
目录display / poistion文档流定义脱离文档流DIV高度的确定div里面只有一行内联元素,其高度 = 这一行内联元素的行高div里面还有div,div的高度div的宽度确定内联元素的宽高FLEX布局一、是什么?二、基本概念 三、容器的属性3.1 flex-direction属性3.2 flex-wrap属性3...原创 2019-07-23 09:24:54 · 968 阅读 · 0 评论 -
内联块inline-block块下沉、多余的水平间隙垂直间隙的问题
把导航设置为inline-block以后总是会多出4px的垂直间隙序display有几种属性:inline是内联对象,比如<a/> 、 <span/>标签等,可以“堆在一起”显示,宽高由内容决定,不能设置;block是块对象,比如<div/>、<p/>标签等,要占一整行,但是宽高可以自定义;为了弥补inline和block的不足...原创 2019-08-01 09:21:01 · 878 阅读 · 0 评论 -
CSS3的nth-child() 和nth-of-type()选择器,表格奇偶行变色
奇偶数匹配odd代表奇数,even代表偶数 li:nth-of-type(odd) { background-color: rgb(238, 238, 238); } li:nth-of-type(even) { background-color: white; }倍数写法:nth-child(2n+1), :nth-ch...原创 2019-08-05 11:06:13 · 978 阅读 · 0 评论 -
纯CSS3实现banner图片自动轮播效果方式总结
自动轮播:实现切换图片,图片循环播放;鼠标悬停某张图片, 则暂停切换。方法1、opacity控制透明度实现轮播效果依照需求我们选择用CSS3的animation动画进行实现;transition动画需要触发才能启动,所以我们选择自动触发的animation属性;思路就是:将三个图片进行绝对定位重叠之后,将三个图片的动画放在一条时间轴上,分别在不同时间点控制透明度,在样式代...原创 2019-08-01 17:45:42 · 8076 阅读 · 0 评论 -
你未必知道的49个CSS知识点
https://juejin.im/post/5d3eca78e51d4561cb5dde12#heading-30转载 2019-08-06 16:18:03 · 100 阅读 · 0 评论 -
input file 踩坑 是否允许上传两张一样的图片(chrome)
<input type="file"> 是h5新特性,但是存在浏览器差异,解决兼容性问题的方法如下,火狐和谷歌在input file 的差异:在默认不做更改的情况下火狐在上传同一张图片的情况下: 可以上传两次一样的某张图片谷歌在上传同一张图片的情况下:第二章图片的上传会没有任何反应造成这种差异的原因是:在谷歌onchange事件会在内容改变且失去焦...原创 2019-09-29 11:36:50 · 1032 阅读 · 0 评论 -
CSS动画中的变形(transform)、过渡(transtion)、动画(animation)详解
目录变形transform一、旋转rotate二、移动translate三、缩放scale四、扭曲skew五、矩阵matrix过渡transition一、transition-property:二、transition-duration:三、transition-timing-function:四、transition-delay:Animat...原创 2019-07-30 18:43:20 · 2356 阅读 · 0 评论 -
CSS模拟hover时图片只显示一半的动画解决方案
1、下面的部分用白底div来装,hover时改变div的高2、使用图片剪裁position: absolute;clip: rect(0px,380px,150px,0px); /* 剪裁成矩形尺寸为 rect (top, right, bottom, left)*/.menu4__items:hover .menu4__items__icon{/* height: 1...原创 2019-07-25 14:23:30 · 706 阅读 · 0 评论 -
html css 垂直居中 position定位 和 浏览器缩放部分问题的解决方案
1、align的使用问题<embed></embed>使用align="center"并不能使之居中只能在外面套一层div 并加上属性style="text-align: center;"来使之居中2、position:absolute的使用的问题由于float的频繁使用会导致很多的浏览器的问题,所以一般情况下都不使用float,定位使用positio...原创 2019-07-18 15:46:16 · 2779 阅读 · 0 评论 -
搜索框input 和图标结合 实现的几种思路
一、淘宝外层div作出框效果内层input没框搜索icon用position定位到左边右边直接接一个div放相机icon搜索框是接一个button二、花瓣input自己的框外层form不设置宽高,通过display: inline-block;position: relative;搜索icon用position定位三、百度和...原创 2019-07-24 10:38:51 · 2453 阅读 · 0 评论 -
扩大<a>的响应范围实现菜单框点击效果
核心思路把<a>由内联元素转换成块元素,就能拥有宽高了。设置了宽高以后,再通过line-height来设置文字显示的位置。line-height和height同高就会垂直居中。想要不同的效果可以F12自己调试。1、ul li a 的情况文字使用了<a>标签,原本只有放在了文字上才会出现hover的相应特效,但是我们想实现的效果是类似按钮,鼠标只要出...原创 2019-07-19 15:32:12 · 634 阅读 · 0 评论 -
BEM前端命名规则
1、block不影响自身布局,也就是说不能设置margin和position属性。2、不能在BEM中使用元素选择器和ID选择器。3、elementy只能作为block的一部分使用,不能独立使用。附上官网介绍http://getbem.com/introduction/介绍在较小的宣传册网站上,您如何组织自己的风格通常不是一个大问题。你进去,写一些CSS,甚至可能是一些SA...原创 2019-07-19 15:35:00 · 559 阅读 · 0 评论 -
HTML学习笔记(一)
1、打开VScode→文件→新建→另存为选择保存为html文件快速补全html代码:在代码界面输入!,按TAB键2、<table border="10" cellpadding="10" cellspacing="10"><table border="1" cellpadding="10" cellspacing="10">&l...原创 2019-07-19 15:36:03 · 83 阅读 · 0 评论 -
HTML默认样式重置CSS写法总结
HTML默认样式重置CSS写法总结1、goal/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6,...原创 2019-07-19 16:59:26 · 2560 阅读 · 0 评论 -
鼠标点击效果变成小手的CSS实现
在style中添加cursor:pointer 实现鼠标悬停变成小手样式.cursor语法:cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize | n-resize |e-resize | ne-resize |sw-resize | se-resize | ...原创 2019-07-29 14:45:02 · 9353 阅读 · 0 评论 -
FIREFOX/CHROME点击出现虚线框的问题 a标签点击虚线框 input蓝色外边框 input点击虚线框
1、解决标签a点击出现虚框当a标签获得焦点的时候,a标签的周围就会出现虚框,它不同于border,不占任何宽度,a失去焦点的时候就会消失,就是outline。在遨游,Firefox ,IE的几个版本中就会看到、而Safari、Opera、Google 本身不支持这个效果,就看不到。解决方法: 可以给a标签设置 outline: none;但在IE6、IE7 遨游中都不能实现。只有在...原创 2019-07-24 14:59:15 · 1047 阅读 · 0 评论 -
解决float布局下firefox火狐缩小导致div下沉的问题
FIFEFOX缩放时效果变化CHROME缩放效果判断原因经过多次试验,应该是在firefox中缩放时border的值引起的问题。因为存在border在缩放时,里面的div不能刚好占据足够的位置,由于float的特性就会下沉。即使数值计算刚好也会发生下沉的问题。解决方案1、在item的div中加入 box-sizing: border-box; 这条属性消除b...原创 2019-07-24 15:12:18 · 326 阅读 · 0 评论 -
flex多行布局情况下均匀显示最后一行靠左显示的问题解决方案
问题:最后一行若不满的话无法正常显示flex-wrap: wrap;justify-content: space-between;我们想实现的实际效果应该如下:解决方案1:多写一个div 撑开大小<div class="body__content__bd__items" style="height:0; border:none;"></div&g...原创 2019-07-29 15:01:38 · 3122 阅读 · 0 评论 -
CSS行间距line-height和字间距、字体间距、字符间距详解
行间距line-height行高line-height的值可以为百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸。在文章中,要实现调节设置每行文字字体间距(行距)是使用line-height属性。要使得每行的文字一定的间距距离所以可以通过line-height样式实现。接下来DIVCSS5通过DIV CSS实例实现字体文字上下间距。1...原创 2019-07-25 09:35:02 · 8664 阅读 · 0 评论 -
input file图片压缩踩坑
<!--调用canvas方法--><canvas id="canvas"></canvas><!--压缩后的图片路劲--><img src="" class="preview"><img src="" class="preview"><!--原图压缩--><img class="source" ...原创 2019-09-29 16:03:14 · 780 阅读 · 0 评论