html5、css3
文章平均质量分 63
html5+css3
读心悦
想做全栈!!!
展开
-
canvas元素的基础知识
canvas元素只是为了充当绘图环境对象的容器而存在的,该环境对象提供了全部的绘图功能。常见的绘图环境就是2d绘图环境和3d绘图环境。原创 2024-05-20 22:03:12 · 223 阅读 · 0 评论 -
DOM常见的操作有哪些?
DOM是HTML文档的编程接口。它提供了对文档结构化的表达,并且定义了一种方式可以从程序中对该结构进行访问,从而改变文档的结构、样式和内容。任何HTML文档都可以使用DOM表示为一个由节点组成的层级结构。节点分为很多种类型,每一种类型对应着文档中不同的信息和标记,也都有自己不同的特性、数据和方法,而且与其他类型有某种关联。比如div、p就是元素节点,content就是文本节点,title就是属性节点。原创 2024-04-27 23:35:40 · 329 阅读 · 0 评论 -
HTML、CSS和JavaScript,实现换肤效果的原理
这篇涉及到HTML DOM的节点类型、节点层级关系、DOM对象的继承关系、操作DOM节点和HTML元素还用到HTML5的本地存储技术。换肤效果的原理:是在选择某种皮肤样式之后,通过JavaScript脚本来加载选中的样式,再通过localStorage存储。先来回忆一下HTML DOM的相关知识。原创 2023-11-01 20:25:35 · 910 阅读 · 0 评论 -
vue移动端页面适配
页面的适配,就是一个页面能在PC端正常访问,同时也可以在移动端正正常访问。现在我们可以通过弹性布局【Flexible布局】、媒体查询和响应式布局。除此之外,还可以通过rem和vw针对性地解决页面适配问题。原创 2023-09-14 23:10:43 · 945 阅读 · 1 评论 -
input标签,新增那些属性
input标签作为页面与用户交互的重要入口,了解掌握input的属性,至为重要。原创 2023-09-14 00:37:20 · 436 阅读 · 0 评论 -
canvas:基础知识【直线和矩形】
canvas,就是画布,是HTML5和核心技术之一,结合JavaScript,可以绘制各种各样的图形,比如矩形、曲线、圆形等等。另外,canvas可以绘制图表、动画效果、游戏开发。基本图形汇中有直线和曲线。常见的直线图形是直线、矩形和多边形。原创 2023-01-13 22:23:18 · 1109 阅读 · 0 评论 -
css模块化
一个页面由基本结构体构成:框架、模块、原件。框架:是构成页面的基础结构,是页面的骨架。框架就可以描述出一个页面的基本轮廓了。如:index.html最外围有一个div(.g-index),页头(.g-hd),主体(.g-bd)。页脚(.g-ft)模块:是页面上数量最多的,也是最重要的一部分,是代码复用的主体部分,模块就是按照功能划分的,如:导航栏、轮播图、登录窗口等。模块之间相...原创 2018-08-03 14:32:11 · 727 阅读 · 0 评论 -
CSS3选择器的总结
CSS3选择器分类css3常见常用的选择器选择器类型说明*通配选择器选择文档中所有的HTMl元素E元素选择器选择指定类型的HTMl元素...原创 2019-01-26 22:03:58 · 398 阅读 · 0 评论 -
媒体查询表达式的使用方法
语法@media 设备类型 and (设备特性){样式}制定设备的值设备类型all所有设备screen电脑显示器print打印用纸或者打印预览视图handheld便携设备tv电视类型设备speech语音和音频合成器braille盲人用点字法触觉回馈设备embossed盲文打印机projection各种投影...原创 2020-03-31 13:44:26 · 686 阅读 · 0 评论 -
css滤镜之下,不一样的精彩世界
原图:grayscale滤镜(灰度滤镜)彩色图片通过滤镜实现图片转变灰色.sub02{ width: 330px; float: right; background: grey; filter: grayscale(80%); -webkit-filter: grayscale(80%); -moz-filter:grayscale(80%)...原创 2020-03-31 16:12:23 · 263 阅读 · 0 评论 -
css中文字相关样式
给文字添加阴影语法:text-shadow:length(x) length(y) length(r) color;length(x):表示阴影在横向上与文字的距离;length(y):表示阴影在纵向上与文字的距离;length®:表示阴影模糊半径大小color:阴影的颜色给标签元素添加阴影...原创 2020-02-25 21:09:51 · 296 阅读 · 0 评论 -
display和visibility的区别
采用CSS实现元素隐藏的方法有很多种,比如定位到屏幕之外、透明度变换等。而常见的两种方式是将元素设置为display:none或者visibility:hidden。元素样式设置为display:none当元素样式设置为display:none时,则该元素和它的子元素都会隐藏,不占据文档流(就是元素原本占据的空间会释放出来)。给元素样式设置display:none<div class...原创 2019-02-15 22:56:39 · 496 阅读 · 0 评论 -
Flex弹性布局基础属性
ES6在number对象上提供了Number.isFinite()和Number.isNaN(),Number.isFinite()方法确认一个数值是否是有限的Number.isFinite(35);//trueNumber.isFinite("454");//falseNumber.isFinite("fvdfb");//falseNumber.isNaN()方法用于确认一个值是否为...原创 2019-11-19 15:43:04 · 553 阅读 · 0 评论 -
css关于居中的方式
小程序中的输入日期选择官方提供的picker标签,从底部弹出的滚动选择器mode属性选择器的类型:属性值描述date日期选择器time时间选择器region省市区选择器selector普通选择器multiSelector多列选择器这里就记录自己曾经踩的坑range-key当range的值是一个对象数组时(Object Arra...原创 2019-11-19 16:56:39 · 184 阅读 · 0 评论 -
css3旋转属性transform画五角星
效果图:代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-04-07 16:48:15 · 414 阅读 · 0 评论 -
css动画渲染的流程
原文css动画渲染的过程中有以下三个步骤:布局绘制合成布局浏览器会先计算每一个元素在屏幕上占有多少空间大小。所以在这个“布局”过程中,与元素的width和height、位置有着很大的联系。在任何时候,只有改变元素的宽高,或者元素属性【top/left】,浏览器对元素布局都会重新计算一次。就算是使用JavaScript在DOM添加或者删除元素,都会导致浏览器重新计算元素的布局,浏览器必须重新渲染一次页面。绘制这个过程就是填充像素:描绘文本、着色图片、边框和阴影。绘制的过程是在内存发生的转载 2020-07-18 21:02:48 · 483 阅读 · 0 评论 -
CSS3关于背景图片应用的总结
背景的 基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示的方式)background-attachment(背景图片滚动还是固定)background-position(背景图片定位)简写为:background: background-color background-image b...原创 2019-01-28 14:59:38 · 322 阅读 · 0 评论 -
CSS设置背景颜色为透明
background-color:transparent;原创 2020-01-17 15:49:30 · 20369 阅读 · 5 评论 -
css再来一颗红心
如图:代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-04-07 17:01:51 · 327 阅读 · 0 评论 -
JavaScript、canvas小球加速和减速运动
效果如下图:整个正方形的边长为400,这里设置小球的位置在(400,100),初始位置在正方形的右边,设置加速度为-1。声明小球的类:function Ball(radius, color) { this.radius = radius || 10; this.color = color || "red"; this.x = 0; this.y = 0; this.rotation = 0; this.scaleX = 1; this.scale原创 2022-01-04 21:59:36 · 931 阅读 · 0 评论 -
CSS的层叠、优先级和继承
css的基本原理:层叠、盒模型、各种单位类型层叠指的是css中一系列的规则,决定怎么解决样式冲突的问题。层叠会根据以下三个条件来解决冲突问题的:样式的来源,这就包括了浏览器默认的样式和自己定义的样式。比如谷歌浏览器的默认字体大小是12px;选择器到的优先级;源码顺序,样式在样式表里面的声明顺序。! important声明选择器的优先级:ID > class > 标签伪类选择器和属性选择器与一个类选择器的优先级相同。通用选择器(*)和组合选择器(>、+、~)对优先级没原创 2021-07-04 18:06:06 · 207 阅读 · 0 评论 -
HTML5 Canvas基础概念(一)
Canvas基础知识:Canvas属于行内元素,使用Canvas绘制图形步骤:1、获取Canvas对象2、获取上下文环境对象context。3、开始绘制图形在Canvas对象中常用属性属性 说明 width Canvas的宽度 height Canvas的高度 Canvas常用的方法属性 说明 getContext("2d") ...原创 2019-02-15 21:56:15 · 829 阅读 · 0 评论 -
Canvas实现多叶草效果的封装
四叶草的效果:想要实现四叶草以及多叶草的效果,需要了解四叶草的构成。想要在网页上作图,则需要添加画布Canvas,而四叶草是由曲线构成的,可以使用贝塞尔曲线来绘制,HTML代码:<canvas id="canvas" width="200" height="150"></canvas>JS代码: function $(id){ return docum...原创 2019-02-16 13:12:32 · 661 阅读 · 0 评论 -
移动前端viewport的基础概念
在PC端,视口指的是浏览器的可视区域,其宽度和浏览器的宽度一致,在css标准文档中,视口是所有CSS百分比宽度计算基础,为CSS布局限制了一个最大的宽度。viewport在移动端是一个很重要的概念,涉及到三个视口:布局视口(Layout Viewport)、视觉视口(Visual Viewport)和理想视口(Ideal Viewport)。常见的设置如下:&lt;meta name="v...原创 2019-02-24 01:08:57 · 373 阅读 · 0 评论 -
Canvas基本绘制操作
Canvas绘制线条中常见的属性和方法属性(方法)说明linwWidth定义线条的宽度,属性值为整数,默认是1,默认单位是pxlineCap定义线条开始和结尾处的线帽样式,属性值:butt(默认值,无线帽)、round(圆形线帽)、square(正方形线帽)lineJoin定义两条线交接处的样式,属性值:miter(默认值,尖角)、round(圆角)、bev...原创 2019-03-04 13:36:10 · 992 阅读 · 0 评论 -
移动端H5前端性能优化指南
加载优化1、合并CSS、JavaScript2、合并小图片3、缓存一切可以缓存的资源4、使用长Cache,在服务器端设置缓存。5、使用外联式引用CSS、JavaScript6、压缩HTML、CSS、JavaScript7、启动GZip,在服务器端设置8、启动首页加载9、使用按需要加载10、使用滚屏加载11、通过Media Query加载12、增加Loading进度条13、...原创 2019-02-26 06:23:36 · 451 阅读 · 0 评论 -
浏览器渲染原理简介
浏览器的内核分成两个部分,一个渲染引擎,另一个是JS引擎。不同的浏览器的渲染引擎不同(不同的浏览的内核不同)。浏览器工作的流程:1)浏览器解析内容:HTML/SVG/XHTML,解析这三种文件会生成一个DOM Tree(DOM 树)CSS,解析CSS,产生了CSS规则树JavaScript脚本,主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule...原创 2019-03-08 16:50:17 · 262 阅读 · 0 评论 -
clientHeight offsetHeight scrollHeight offsetTop scrollTop的区别
在HTML中,每个元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop属性。clientHeight和offsetHeight表示元素的高度。clientHeight:包含了padding但是不含border,水平滚动条,margin的高度。对于没有定义CSS或者是内联(inline)布局盒子的元素,clientHe...原创 2019-04-20 17:09:35 · 291 阅读 · 0 评论 -
html5本地存储(仅仅记录自己已经用到的知识)
存储数据: window.localStorage.setItem('key', score1); window.localStorage.setItem('key1', zhi1); window.localStorage.setItem('key2', zhi2); window.localSto...原创 2018-07-27 11:00:30 · 547 阅读 · 0 评论 -
定义列表
HTML标签 - 定义列表: 自定义列表不仅仅是一列项目,而是项目及其注释的组合。 自定义列表以 <dl> 标签开始; 每个自定义列表项以 <dt> 开始; 每个自定义列表项的定义以 <dd> 开始。 (定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等) <dl> <dt>...原创 2017-05-25 10:09:05 · 7537 阅读 · 0 评论 -
有序列标签
ol有序列表 HTML标签 - 有序列表: start属性:改变开始值(如start='10',则序号从10开始) reserved属性:reversed="reversed" 从html5开始 序号倒序排列 和无序列表一样,有序列表是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签; 每个列表项始于 <li> 标签(列表项内部可...原创 2017-05-25 10:25:53 · 2092 阅读 · 0 评论 -
p段落标签
1、p标签里面一般用span 2、span一般用于替换内容,span标签只有在样式下,才会产生视觉上的变化 3、要改变P标签里的某句话的样式 4、p 标签定义段落 5、p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。 段落标签属性:<p></p> <p align="left" (左对齐)/ "r...原创 2017-05-25 10:27:37 · 4349 阅读 · 0 评论 -
span标签、strong/b 标签
span 标签: <span> 标签被用来组合文档中的行内元素。 注:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化 <p><span>span标签:</span>... ... ...</p> 运行如下:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化...原创 2017-05-25 10:36:52 · 2978 阅读 · 0 评论 -
select标签
<select>标签:select 元素可创建单选或多选菜单 注:当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项 将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包括 name 属性 语法如下: <form> <select name="" id=""> <option value...原创 2017-05-25 10:35:06 · 374 阅读 · 0 评论 -
action属性
表单的动作属性(Action)和确认按钮 HTML标签 - Action和确认按钮: 当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。 由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。 语法如下: <form action="html.do" method="get"> usern...原创 2017-05-25 10:05:36 · 822 阅读 · 0 评论 -
frameset框架
frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。 在其最简单 的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性 垂直框架(cols)、水平框架(rows) 框架的基本结构(注意:此时不能要<body></body>) &l...原创 2017-06-05 22:10:42 · 1195 阅读 · 0 评论 -
表格、text文本域
表格 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。 字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等 语法 <table border="1"> <tr&...原创 2017-05-25 10:41:48 · 1113 阅读 · 0 评论 -
栅栏布局
<!doctype html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>展云</title> <meta name="keywords" content="关键...原创 2017-05-31 22:37:54 · 2020 阅读 · 0 评论