html、css、js
文章平均质量分 79
对页面制作的小技巧以及基础进行分享
Jdoit CW
一个要做全栈的前端小陈
Just move on---陈稳
展开
-
【原生js】好玩的瀑布流
内容原生的瀑布流思路分析以及具体实现屡屡思路①:何为瀑布流:②:需求:图片不变形、展示区域不留白③:需求分析:图片都遵循等宽不等高的样式注意:第一排图片可不做处理(让css 操作其样式),从第二排开始,每张图片都需要遍历追加,追加的位置是每一次高度最低的位置(凹陷处。示例实现js 代码块(保姆级注释)window.addEventListener('load', () => { var boxWidth = document.querySelector('.box')原创 2020-09-20 15:11:53 · 11196 阅读 · 2 评论 -
你必须拿捏的h5+c3特性
内容什么是HTML5HTML5新增标签HTML5新增表单元素属性CSS3结构选择器CSS3结构伪类选择器CSS3伪元素CSS3-2D转换(translate)CSS3-2D转换(rotate、scale)2D转换的案例CSS3-动画的使用CSS3-动画的属性动画的案例一:什么是 HTML5HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念:是一个新版本的 HTML 语言,定原创 2020-06-12 19:21:11 · 12686 阅读 · 0 评论 -
网页中精灵图的妙用
精灵图的妙用相信很多小伙伴儿,对精灵(雪碧)图并不陌生。精灵图大多为小图标的形式(经美工处理)。说来话长,这图在网页上大面积应用时是真的很烦(代码冗余度很高),那么这篇文章就用js实现精灵图的快速渲染。上个图looklook页面效果(淘宝原图)背景图片(此图为淘宝服务扩展模块精灵图)平时的css对背景进行定位(代码冗余度过高)<!DOCTYPE html><html lang="en"><head> <meta charse原创 2020-05-25 11:24:26 · 3712 阅读 · 0 评论 -
CSS盒模型
盒子模型盒子模型是什么CSS盒子模型就是在CSS技术所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框,可以形象地将其看作是一个盒子。通过定义一系列与盒子相关的属性,可极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。CSS盒子模型由内容区、填充、边框和空白边四部分组成。内容区是盒子模型的中心,呈现盒子的主要信息...原创 2020-04-15 14:56:35 · 537 阅读 · 0 评论 -
BFC的自我介绍
BFC大家好我叫BFC,是KFC的兄弟(哈哈哈开始吧)什么是BFC1.BFC(Block formatting context),直译为"块级格式化上下文";2.BFC是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level box如何布局,并且与这个区域外部毫不相干。元素的显示模式display(提到BFC能联想到)1.分为 块级元素 ...原创 2020-04-14 20:21:30 · 461 阅读 · 0 评论 -
css为何要清除浮动及清除浮动的方法
一:css为何要清除浮动1.很多情况下,如果我们使用了float特效,出现margin,padding设置不能正确显示,浮动会导致父级子级之间设置了padding,导致了属性不能正常传达,导致margin不能正常显示,所以我们要清除浮动。2.导致背景不能显示,如果对父级设置了背景属性,导致父级不能撑开,会影响到背景图片不能正常打开。3.边框不能撑开,由于子级使用了浮动效果,并且已经产生了浮动...原创 2020-04-10 20:49:23 · 305 阅读 · 0 评论 -
静态网页制作小技巧(logo及字体图标)
一:logo的制作:1.waht?? logo,logo乃一个网站的灵魂,在这个看脸的时代,你懂得兄弟(会心一笑)2.网页中logo部分的制作,当然要高大上,让老大(搜索引擎)宠幸呀!!!3.别逼逼了,开始你的表演ok?4.来了来了他真的来了。logo优化1)logo里首先放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要;2)h1里面放一个a标签,可以返回首页,给a一...原创 2020-04-12 10:40:44 · 2409 阅读 · 0 评论 -
基于jQuery的快速简洁客户端表单验证
jQuery提供的serializeArray()方法首先我们来了解下方法的返回值(代码呈上)<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...原创 2020-04-13 10:00:39 · 396 阅读 · 0 评论 -
读取文件---FileReader
FileReader作用:对文件进行读取(直接渲染到页面)页面布局1.布局图片2.代码块(包含:css知识回顾,如何改变上传文件控件样式,js文件读取,部分细节)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="...原创 2020-04-17 13:26:57 · 1233 阅读 · 0 评论