![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web前端
文章平均质量分 96
woyuanliulian
这个作者很懒,什么都没留下…
展开
-
案例理解position的属性 relative absolute static fixed sticky inherit
w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点。position:relative和postion:absolute困扰了我快一个星期之久,网上找到的资料鱼龙混杂,刚确定“这样”的理解之后,看另一份资料,发现“这样”理解是错了,就这样不断更正,并记录下来,最终整理出这份,以备参阅。若有错误,请指正。下面的结...原创 2018-06-14 14:14:03 · 653 阅读 · 0 评论 -
CSS的计数器
CSS的计数器:counter-increment与counter-reset 前端兼容 11-19 当前位置:首页 > 前端兼容 > 正文CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素。如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image来实现。在CSS2.1的规范中介绍了一种新技术...转载 2018-07-04 17:19:45 · 269 阅读 · 0 评论 -
关于css中em的值
使用CSS也好久了,但一直都是在使用“px”来设置Web元素的相关属性,未敢使用“em”。主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中要求使用“em”作为单位设置元素,所以从头对“em”学习了一回。稍为有一点理解,今天特意整理了一份博文与大家一起分享,希望对童子们有些许的帮助。这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“e...转载 2018-07-11 22:29:30 · 2587 阅读 · 0 评论 -
html的小结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--attr--原创 2018-07-05 22:34:44 · 118 阅读 · 0 评论 -
关于列表记录(一)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--有序列表--原创 2018-07-12 21:39:56 · 207 阅读 · 0 评论 -
深入浅出vertical-align和line-height
1转载 2018-07-06 14:00:51 · 5676 阅读 · 0 评论 -
详解HTML5中的<aside>元素与<article>元素
<aside>元素HTML<aside>元素表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在。<aside>元素通常显示成侧边栏(sidebar)或一些插入补充内容。通常用来在侧边栏显示一些定义,比如目录、索引、术语表等;也可以用来显示相关的广告宣传,作者的介绍,Web应用,相关链接,当前页内容简介等。<asi...转载 2018-07-19 10:07:28 · 776 阅读 · 0 评论 -
html5小结(二)
<!DOCTYPE html><html lang="en"><STYLE> .content { /*<!--字体样式--> <!--css使用font-family来定义字体类型 使用font属性也可以定义字体类型-->*/ font-family: name; /...原创 2018-07-07 07:23:32 · 475 阅读 · 0 评论 -
css hack
原文:https://www.cnblogs.com/guhui1994/p/5906268.htmlCSS常见兼容性问题总结浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。这里谈到的浏览器,主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等。 但更多的兼容还是考虑IE6/IE7/FF之间的斗争先来谈谈CSS ...转载 2018-07-13 17:04:33 · 156 阅读 · 0 评论 -
css实现下拉菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0 ;原创 2018-07-13 22:01:15 · 166 阅读 · 0 评论 -
css滑动门
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ margin:原创 2018-07-13 22:25:25 · 230 阅读 · 0 评论 -
table小结(一)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> th,td{ border:原创 2018-07-13 23:33:00 · 230 阅读 · 0 评论 -
float
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0原创 2018-07-19 22:13:46 · 243 阅读 · 0 评论 -
输入属性小结(一)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--input-原创 2018-07-14 23:21:42 · 191 阅读 · 0 评论 -
关于Array的一些方法
/*关于数组* 常用几个方法 pop push unshift shift concat / */var arr = new Array(1, 2, 3, 4);arr.push(5, 6);/*像数组末尾添加*/console.log(arr);/*1,2,3,4,5,6*/arr.pop();/*删除末尾一个*/console.log(arr);/*[ 1, ...原创 2018-08-01 21:52:02 · 173 阅读 · 0 评论 -
::before和::after伪元素的用法
::before和::after伪元素的用法一、介绍css3为了区分伪类和伪元素,伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,::after,::selection。::before和::after下特有的content,用于在css渲...转载 2018-07-04 16:06:08 · 165 阅读 · 0 评论 -
html特殊字符的html,js,css写法汇总
⇠ 箭头类符号UNICODE符号UNICODEHTMLJSCSSHTMLJSCSS⇠&#8672\u21E0\21E0⇢&#8674\u21E2\21E2⇡&#8673\u21E1\21E1⇣&#8675\u21E3\21E3↞&#8606\u219E\219E↠&#8608\u21A0\21A0↟&#8607\u219F\219F↡&am...转载 2018-07-04 15:50:05 · 253 阅读 · 0 评论 -
text-shadow &lt;gradient&gt; box-shadow
语法:text-shadow:h-shadow v-shadow blur color;ie9包含以下都不支持该用法h-shadow表示水平阴影的位置,允许负值,该值必需。v-shadow表示垂直阴影的位置,允许负值,该值必需。blur表示阴影的距离,color表示阴影的颜色,这两个值是可选的。注意:如果没有指定阴影颜色,那么将用元素的color属性值来替代;阴影颜色值可以放在前面,实际上它们的位...原创 2018-07-04 17:20:16 · 179 阅读 · 0 评论 -
关于this指向问题
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题。 为什么要学...转载 2018-06-19 11:03:34 · 170 阅读 · 0 评论 -
html5中的拖拽行为
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title></title> <style> #div1{ border:1px green solid;原创 2018-07-01 00:37:48 · 556 阅读 · 0 评论 -
关于H5中oncontextmenu contenteditable 和data- 做个记录
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input ty原创 2018-07-04 17:20:29 · 303 阅读 · 0 评论 -
background 背景
所有背景属性都不能继承在CSS2.1里,background属性的简写方式包含五种属性值 – background-color, background-image, background-repeat, background-attachment, and background-positionCSS3开始,又增加了3个新的属性值注意:反斜杠可以在支持这种写法的浏览器里在position后面接着写...转载 2018-07-01 13:20:24 · 169 阅读 · 0 评论 -
JavaScript中最容易混淆的作用域、提升、闭包知识详解
一、函数作用域1.函数作用域就是作用域在一个“Function”里,属于这个函数的全部变量都可以在整个函数的范围内使用及复用。?123456789function foo(a) {var b = 2;function bar() {// ...}var c = 3;}bar(); // 失败console.log( a, b, c ); // 三个全都失败上面的“foo”函数内的几个标识符,放到函...转载 2018-06-26 14:49:21 · 100 阅读 · 0 评论 -
H5语义化标签
HTML标准是这样写的:The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.Examples of sections ...原创 2018-07-01 23:21:52 · 2936 阅读 · 0 评论 -
Animation CSS3
动画(Animation),是CSS3的亮点.//之一通过animation属性指定@keyframe来完成关键帧动画;@keyframe用法: @keyframes name { 0% { top: 0; }/*0%可用from关键字替代*/ 50% { top: 10px; } 100% { top: 0; }/*100%可用to关键字替代*/}由于是CSS3,所以不出意外的各...转载 2018-06-27 12:27:10 · 433 阅读 · 0 评论 -
关于背景透明,文字或者图片不透明的做法
今天遇到这个问题,然后上网搜索了一大堆资料,总的来说实现这个并不是很难,只是IE比较坑,要各种兼容1、可以写两个层级啊 然后设置zindex就好了 ,这也是个办法 但是如果用到opacity的时候IE8一下就不能识别了2,如果背景这个层级中添加了文字或者别的内容 上面的就不能成功了如上图,这样里面的内容也是透明的 因为如果父级元素设置了opacity,他的子集元素会继承所以将下面代码改下c...原创 2018-07-02 17:19:19 · 798 阅读 · 0 评论 -
关于background的属性
我再webstorm中显示background显示出来的属性有这么多,对于我这个新手,我还是忍不住想看看这些属性background-position: 是定义显示的位置,他的取值包括两个,分别用来定位图片在x,y轴的坐标<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...原创 2018-07-09 23:22:30 · 1664 阅读 · 1 评论 -
盒子模型 补白
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ul{ padding:原创 2018-07-16 21:53:59 · 296 阅读 · 0 评论 -
溢出处理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #cont1 div ,#cont3 div ,原创 2018-07-16 22:15:47 · 561 阅读 · 0 评论 -
outline
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> input:focus ,button:focus原创 2018-07-16 22:24:58 · 8773 阅读 · 0 评论 -
设计渐变的背景之-webkit-gradient
-webkit-gradient 做一个渐变的背景<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /原创 2018-07-10 22:30:27 · 9588 阅读 · 0 评论 -
数组简单排序
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script&a原创 2018-08-01 21:52:51 · 161 阅读 · 0 评论