HTML+CSS3
文章平均质量分 62
做一个有知识的流氓
平时读书少,人丑又胆小。
人懒惰久了,稍微努力一点点,就以为这就是拼命了。
展开
-
DOM事件探秘(一)DOM事件模型
DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。DOM同时支持两种事件模型:冒泡型事件和捕获型时间事件冒泡:即事件最开始由最具体的元素(文档中嵌套最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档)。比如 事件流原创 2017-05-24 09:06:10 · 413 阅读 · 0 评论 -
CSS3实现文字流光渐变特效
先上个效果图下面先上代码HTML部分 Title 日暮苍山远,天寒白屋贫。柴门闻犬吠,风雪夜归人。CSS部分 .masked h4{ display: block; width: 600px; height: 100px;原创 2017-11-06 10:26:34 · 12825 阅读 · 1 评论 -
CSS3伪类:first-child 的学习中引发问题
最近学伪类,学到一个伪类:first-child 选择属于其父元素的首个子元素,或者也可以说是表示一组兄弟标签中的第一个元素。其实使用起来挺简单的,也好理解。这文章要说的也不是这个伪类,而是在用这个伪类时发生的一个小问题HTMLLink1Link2link3CSSol > li:first-child{color: red;}/*将ol 的第一个 li 颜色设置为红色*原创 2017-09-30 10:47:04 · 773 阅读 · 0 评论 -
HTML,img,video无法铺满屏幕解决方法,同视频做网页背景无法全屏的解决方法
我在这里用视频做为网页背景,给视频设了100%宽高,在firebug也显示video的宽高和页面是一样的,但是效果却没出来,视频没有铺满屏幕。下面是我的代码(原代码,错误的) *{margin: 0;padding: 0} html,body{width: 100%;height: 100%} video{ width: 100%;height: 100原创 2017-12-26 22:27:46 · 27927 阅读 · 7 评论 -
ajax登录第一次没有post成功,第二次post成功了
当我第一次点击登录的时候,从控制台看到没有post请求,但后台却打印出了账号和密码,同一个页面不刷新,我第二次点登录的时候,控制台就有post请求了,而且账号验证的代码也能正常运行我这个情况比较奇葩,后来仔细检查代码,发现是我的前端登录页面,form 标签 的action属性还在,当我点击登录的时候数据会先走form标签的action路径,所以post提交失败...原创 2018-01-04 19:34:00 · 4050 阅读 · 1 评论 -
webstorm设置sass自动编译,及参数配置
网上有很很多webstorm配置sass的教程,不过我觉得这篇最好转载自:http://blog.csdn.net/wytbr666/article/details/77477182安装Ruby:https://rubyinstaller.org/downloads/ 安装成功后,用命令进行检查,成功会显示版本信息ruby -vgem -v12安装sass在命令行输入:gem install ...转载 2018-03-11 11:21:42 · 11086 阅读 · 0 评论 -
WebPagetest报错:Failed recaptcha validation. Please go back and try submitting your test again.解决
Failed recaptcha validation. Please go back and try submitting your test again.报错已经写的清楚了,让你重试,但我重试了好几遍,还是这个错,然后就试科学上网(翻墙),就OK了...原创 2018-05-07 17:59:44 · 9601 阅读 · 0 评论 -
网页Loding效果的实现
想要实现loading效果,实现得了解两个文档属性1、document.onreadystatechange //页面加载状态改变2、 document.readyState //该属性描述了文档的加载状态。这两个属性的具体信息在这里就不赘述了,文档里有详细的解说。下面直接上网页loading的实例1、gif图显示loding效果<!DOCTYPE html><htm...原创 2018-07-03 10:12:11 · 4020 阅读 · 0 评论 -
JS文件上传以及进度条实现
JS文件上传,依靠<input type="file">这个标签可以完成文件上传的操作,这里就不细说,这里主要说一下进度条的实现。想要实现进度条我们需要了解一个对象 XMLHttpRequest ProgressEvent接口这个接口有3个属性,都是只读的。ProgressEvent.lengthComputable 表示当前的工作是否是可测量的,如果为fal...原创 2018-09-05 10:56:52 · 15681 阅读 · 4 评论 -
纯CSS实现背景图片切换(CSS3伪类实现背景图片切换)
跟着慕课网的教程学习了一下伪类 ,然后试着练习了一下用CSS伪类来实现背景图片切换。先上一下效果图,当我点击圆圈里的缩略图的时候,背景图片就会变为与缩略图一样的图片。要用到的伪类及其作用有:1、nth-of-type()给每个文字块设置不同颜色。2、::after 添加圆形缩略图的div3、nth-of-type()配合::after添加缩略图4、 ::befor 给圆形缩原创 2017-09-30 15:55:14 · 29143 阅读 · 0 评论 -
bootstrap导航条例子
有人说前端发展太快,框架太多,各有所需,各有所长。看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个。发展再快,框架再多。还是得回到原点,不就是Html+Css+JavaScript吗,使用任何牛逼的框架之前你也得把这些东西玩熟练了。bootstrap上大一的时候学html的时候就听老师说过,接触也快一年多了,所以这里准备写一篇关于bootstrap如何自转载 2017-09-01 17:32:36 · 3653 阅读 · 0 评论 -
margin 0 auto什么作用与语法重点介绍教程
css margin:0 auto什么作用与语法重点介绍教程一、CSS margin认识 - TOPmargin设置对象外边距,如果我们给DIV设置一条边框线(border)样式后,在DW软件里即可看出margin设置值其实是在边框外距离,此样式设置对象(DIV)之间间距的样式。详细介绍见:margin教程二、margin:0 auto作用语法 - TOP转载 2017-05-21 14:06:18 · 6148 阅读 · 0 评论 -
块级元素、内联元素、可变元素
block(块)元素的特点:①总是在新行上开始;②高度,行高以及外边距和内边距都可控制;③宽度缺省是它的容器的100%,除非设定一个宽度。④它可以容纳内联元素和其他块元素inline元素的特点:①和其他元素都在一行上;②高,行高及外边距和内边距不可改变;③宽度就是它的文字或图片的宽度,不可改变④内联元素只能容纳文本或者其他内联元素(中文叫法有多种原创 2017-05-21 14:42:39 · 1005 阅读 · 0 评论 -
css绝对定位、相对定位和文档流的那些事
文档流,就是普通流,就像你以前用表格布局基本只涉及到文档流,如绝对定位的元素不占文档流,它会忽略文档流的存在而浮在已有东西的上面。如相对定位它占文档流 ,所以定位不好它会覆盖已有的东西。浮动的东西也不占的,只是文档流会围绕浮动的东西。————————————————————————下面是转载部分—————————————————————————前言 接触html、和css原创 2017-05-21 14:51:47 · 1943 阅读 · 0 评论 -
简单的CSS网页布局
一列布局小案例body{margin:0;padding:0}.main{width:700px;height:200px;background:#F06;margin:0 auto}.top{height:100px;background:blue;}.footer{width:700px;height:100px;background:#0F3;margin:0 auto}原创 2017-05-21 15:38:14 · 406 阅读 · 0 评论 -
HTML文章页面,识别不了换行问题的解决
今天做一个文章展示页面,当我将填充文章copy上去的时候,发现页面并没有识别文字的换行,而是将文字都挤在同一行我尝试用标签,但效果并不好百度过后才知道,CSS中由“white-space” 属性设置如何处理元素内的空白包括:但是保留换行符、是否合并空白符、是否自动换行、值描述normal默认。空白会被浏览器忽略。p原创 2017-09-23 10:12:55 · 25175 阅读 · 5 评论 -
HTML表单数据传输
转载自:http://blog.csdn.net/qq_18661257/article/details/50616054对于HTML表单的数据传输,有着基本的HTML基础的人就应该知道他总共有两种提交方式GET和POST,GET提交方式是一种显示的提交方式,它使用GET方式提交数据的时候,浏览器会对URL进行URL encode编码,但是他的最终传送数据会显示在浏览器的地址栏,同转载 2017-08-31 18:03:20 · 2065 阅读 · 0 评论 -
CSS3D之实现动态字
思路:用::befor伪元素生成用于3D翻转的字体实现起来挺简单的:新建5个div,每个div分别对应5个字体 用::befor生成用于翻转的字体,并用absolute,以及z-index控制生成字体的位置 当元素被:hover时,就进行3D翻转实现起来挺简单的,下面直接上源码: <div id="warp"> <div data-d...原创 2018-11-07 21:32:48 · 1016 阅读 · 0 评论