![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html5
文章平均质量分 66
哎呦灬不错呦。
加油(ง •̀_•́)ง
展开
-
js倒计时实现(包括补零)
【代码】js倒计时实现(包括补零)原创 2023-01-28 17:24:28 · 300 阅读 · 0 评论 -
单行、多行文本下划线自适应
结构:单行及多行文本下划线单行及多行文本下划线 单行及多行文本下划线 单行及多行文本下划线样式:a {color: #808080;text-decoration: none;background: linear-gradient(rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0.5)); 控制线的颜色background-size: auto 4px; 控制线的粗细background-repeat: repeat no-repeat;backgr.原创 2021-09-28 15:09:22 · 303 阅读 · 0 评论 -
Vue中生命周期钩子函数详解。
生命周期1.定义.从开始到结束(销毁)的过程就是一个生命周期钩子函数:在某事某刻自动被触发的函数称之为钩子函数.2.生命周期钩子函数beforeCreate 创建之前创建之前:什么都是undefined beforeCreate(){ console.group('==创建之前==') console.log(this.$el); console.log(this.$data); console.log(this.name); console.groupEnd() },原创 2021-03-30 22:22:35 · 157 阅读 · 0 评论 -
初始Vue你都应该了解什么???
一.引入直接通过cdn引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>二.基本语法* 1.产生一个vue实例,需要new Vue()* 2.需要传递一个jSON,{}有很多个选项: el,data,methods* 3.不能将vue挂载到html或者body标签上* 4.vue实例和元素节点是一一对应的关系.所以尽量使用id选择器做挂载点.* 5.所有的css样式选择器都可做原创 2021-03-29 22:38:17 · 94 阅读 · 0 评论 -
BOM的基本操作与设置
3.BOMBOM:Browser Object Model 浏览器对象模型console.log(window); //窗口 js中最大的一个对象//document和window//window--窗口 js中最大的一个对象//document--文档,html文档//所有的全局函数和全局变量都属于window,一般会省略window 3.1 window提供的系统方法(了解)3.1.1 系统提供的对话框//警告框alert("今天周末,考试吗?");//带确认对原创 2020-12-28 20:47:33 · 782 阅读 · 0 评论 -
DOM的基本操作与设置
3.1 获取3.1.1 DOM获取元素通过id名:document.getElementById(“id名”):具体的实际的标签,获取的时候有就是有,没有就是没有通过TagName:document.getElementsByTagName(“标签名”):整个文档中,获取的是元素集合,使用一定要加下标,动态获取,可以获取到后期添加的标签父元素.getElementsByTagName(“标签名”):父元素中的,获取的是元素集合,使用一定要加下标,动态获取,可以获取到后期添加的标签原创 2020-12-27 22:23:19 · 621 阅读 · 1 评论 -
JavaScript实现时间倒计时(圣诞倒计时)
倒计时 原理:时间差 = 目标(未来)时间-当前时间目标(未来)时间可以随时改变,代码里面有显示的备注。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<原创 2020-12-23 22:29:02 · 684 阅读 · 0 评论 -
JavaScript中函数调用的方式和使用方法
2.函数函数的概念:函数是由事件驱动的或当他被调用时可重复使用的代码块使用场景:作为事件处理函数 标签.事件 = function(){}函数封装代码复用2.1函数的声明和使用普通声明方式声明:function 函数名(){代码块}调用:函数名()表达式声明声明:var 变量 = function (){ 代码块}调用:变量名() //1.普通函数声明方式 function study(){ console.log("沉迷学习,日渐消瘦原创 2020-12-18 22:09:30 · 468 阅读 · 1 评论 -
JavaScript的密码显示隐藏写法
代码如下,里面有详细注释。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{原创 2020-12-16 22:05:45 · 384 阅读 · 0 评论 -
JavaScript开关灯具体操作
原理:利用if语句,鼠标点击换图片,再点击在换图片。具体图片代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></原创 2020-12-16 19:14:15 · 252 阅读 · 0 评论 -
JavaScript的流程控制语句有哪些?怎么使用
2.流程控制语句分类:顺序结构分支结构(分支结构、分支语句) :if-else循环结构 for while2.1 分支结构ifif:如果,给一个假设条件,条件成立会执行一个操作语法:if(条件){ 条件成立执行的代码 } //1.如果有钱(100块),花两块买彩票,中500万 var money = 99; if (money >= 100) { console.log("花两块买彩票,中500万"); console.log("买50原创 2020-12-16 19:06:23 · 295 阅读 · 0 评论 -
js的数据类型有哪些?怎么使用?
1.数据类型根据数据特性、以及存储空间位置、存储容量进行划分。1.1数据类型的分类js数据类型分为6大类五大基本数据类型number : 数值string:字符串 “” ‘’boolean:布尔 true falseundefined:未定义null:空复合类型(复杂类型、引用类型)object : 对象array:数组function:函数1.2 基本数据类型number:小数、整数、 负数、二进制、八进制、十六进制、NaN、infinity//1.原创 2020-12-15 22:16:46 · 115 阅读 · 0 评论 -
响应式布局之grid网格布局,应该怎么用?
二维布局 更加灵活好用 相对于弹性盒兼容性差(ie11以及以上)<div class="container"> <div class="item"> <p>1</p> </div> <div class="item">2</div> <div class="item">3</div> <div class原创 2020-12-10 20:24:31 · 853 阅读 · 0 评论 -
什么是视口布局?
视口布局vw,vh 视口单位 相对单位 所有设备的视口100vw ,100vh100vw : viewport width 视口宽度,浏览器可视区域的宽度100vh : viewport height 视口高度,浏览器可视区域的高度750px 100vw 1vw = 7.5px;375px 100vw 1vw = 3.75px以设计稿为准:假设还是750px设计稿 750px=100vw 1px=0.13333vw;预设字体基础值 100px 1r原创 2020-12-08 20:19:02 · 238 阅读 · 0 评论 -
手机端和小程序端html5的写法
LESS导入css文件往另一个css文件里面导入.css--->.css .less --->.less 导入@import "文件路径";嵌套父子 嵌套 .a>.b .a { .b { }}兄弟平行 .a +.b .a { }.b { }如果想加伪类 ;.a{ //&代指上一级选择器 &:hover { }}编译后效果:.a原创 2020-12-05 23:37:33 · 818 阅读 · 0 评论 -
弹性布局css3与LESS语言的用法
弹性盒布局css3(伸缩盒布局)传统布局的局限性清除浮动影响很难实现居中结构不灵活 不能随时添加盒子弹性盒布局非常灵活 提供一套浏览器内置布局 特点:一维布局 固定的css属性决定了 这个布局一般用在移动端加在弹性父盒子身上的属性1. 声明弹性盒-webkit-display:flex;display:flex;2. 设置主轴方向flex-direction:row水平(默认)/row-reverse水平反向/column垂直/column-reverse垂直反原创 2020-12-04 08:37:00 · 203 阅读 · 0 评论 -
用css和html写的正方体,六面体的旋转和分离
代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ .原创 2020-12-02 22:23:06 · 782 阅读 · 0 评论 -
动画的属性和用法
动画: 过渡, 变形, 关键帧动画过渡从一个状态到另外一个状态 (两个状态的连接 最初,最终)的变化 ,并且时间的持续transition: 要过渡的属性 持续时间s/ms 运动的曲线 延时的时间s/ms;transition: width 2s linear 0s; transition: all 1s linear 2s; transition:width 2s linear 0s ,height 1s linear 0s ,background-color .5s原创 2020-12-02 22:17:45 · 244 阅读 · 0 评论 -
css3新增的属性和用法
css3 就是css第3个版本 增加了一些选择器,布局,动画,背景,新盒模型,私有前缀。选择器表单选择器:focus 聚焦选择器 选择的是当下被聚焦的表单元素input:focus {}:checked 勾选 选择的是当下被勾选的复选框或单选框input:checked {}:disabled 选择的是当前被禁用的元素:enabled 选择的是当前没有被禁用的元素::placeholder 选择的是文本框里提示的文字属性选择器[ ]attr 属性名 value 属原创 2020-12-02 08:30:25 · 244 阅读 · 0 评论 -
双背景的写法案例案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ ..原创 2020-12-01 22:23:23 · 127 阅读 · 0 评论 -
html5语义化标签的使用和表单类型属性
语义化标签解决语义化兼容性问题表单控件类型表单控件属性音视频标签css3新增选择器新增语义化布局标签header.footer,nav ,aside, article>section, figure (推荐在移动端使用)ie8及其以下不支持语义化布局标签 —》 1. 不要在PC端用这些标记 2. 解决兼容性问题**解决兼容性问题 **ie8- 不认识标记 那我们让它认识即可手动去创建这些标记document.createElement(..原创 2020-11-30 21:17:01 · 262 阅读 · 0 评论 -
html中经典的多列布局和两列自适应布局
经典的多列布局自适应: 一个盒子的宽度随着屏幕宽度发生变化 单位:%两列自适应布局原理: 两列并排 左列固定宽度 右列宽度自适应(100%)/* 1.解决方案:左列+ float: left; *//* 2.解决方案 左列+ position:absolute */三列自适应布局原理: 左右两列固定宽度 中间列自适应 (100%)圣杯布局过程:三列同时左浮动,中间列写到结构的上面去,利用负外边距把两列放到中间列上,然后利用最外侧大盒子的内边距和相对定位把中间列内容居原创 2020-11-27 22:33:30 · 1830 阅读 · 0 评论 -
什么是BFC规则?
BFC规则1. 什么BFC规则?Block Formatting Context 块级格式化上下文块级元素的渲染区域规则 BFC盒子 外部不影响内部 内部不影响外部2. 哪些属性可以触发BFC规则? 1. float不为none 2. position属性为absolute和fixed 3. oveflow不为visiable 4. html 根标签 3. BFC有哪些规则 1. BFC盒子内部的子标签按照垂直从上到下排 2. 共用一个BFC盒原创 2020-11-27 22:23:04 · 597 阅读 · 0 评论 -
浏览器常见HTML兼容的问题
图片下间隙问题盒子>img 图片和盒子多的底边有一个默认的间距图片下间隙:原因:图片具有文本的特性—》 以基线对齐—》 间距就是基底之间距离解决办法:1. 给父盒子加字体属性2. 图片设置除了基线以外的对齐属性3. 给图片转块元素结构hack(条件hack)(ie10废除了)在ie的低版本里 查询一些盒子或者是样式要不要显示的条件 // 在什么地方需要显示 ie8- 条件是: 只要浏览器版本是ie8及其以下就显示这个p // lte: less tha原创 2020-11-27 22:19:43 · 144 阅读 · 0 评论 -
IE的兼容性问题及其解决
1、ie8下图片边框问题(经常遇见)<a> <img src=""></a>解决办法:reset.cssimg { //取消默认添加的边框 border:none;}2. ie8下透明度问题(经常遇见)其他浏览器背景透明, 内容不透明background-color:rgba(0,0,0,.3)背景和内容一起透明opacity:0-1; 0是完全透明 (消失) 1是不透明 ie8下透明度显示效果:..原创 2020-11-26 23:43:37 · 131 阅读 · 0 评论 -
html中的基本表单
表单结构作用:收集用户信息表单: 作用: 用来收集用户信息;也叫 表单框(表单域form)<form method=""></form>action: 传给后端的地址 method: 传给后端的方法GET: 从后端获取数据,数据量比较小,安全性比较低,速度较快POST: 向后端发送数据,数据量大,安全性高,速度较慢name: 表单的标识表单控件:在表单里面,绝大部分的表单控件都是input标签,通过type属性的不同来区分的,表单控件要写在form标原创 2020-11-26 23:35:00 · 163 阅读 · 0 评论 -
html5文本溢出应该怎么处理?
一共有三种方法,分别是:单行文本溢出实现方法:overflow: hidden;text-overflow:ellipsis;white-space: nowrap; (强制文本文本一行)效果如图:多行文本溢出实现方法1:display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; overflow: hidden; text-overflow:ellipsis;效果如图:适用范围:原创 2020-11-25 22:28:16 · 1203 阅读 · 0 评论 -
微信的滑动门技术应该怎么写。
微信滑动门技术(经典)什么是微信滑动门?特殊背景图技术(特点:背景图颜色单一,对称的,阴影,边框…)原理: 是一张宽度大小固定的图片铺到宽度不确定的盒子里 ,需要父子关系的两个盒子 ,内部盒子(子元素span)铺图片的右上角位置(backgrpund-position:100% 0%),外侧盒子(父元素a)铺图片的左上角位置(backgrpund-position:0% 0%)。这两个是背景图需要可以下载<style> * { padding原创 2020-11-24 18:15:18 · 124 阅读 · 0 评论 -
html与css中都有哪些定位?
定位类型position静态定位position:static; 默认值静态定位不能使盒子位置变化 不适合布局作用:解决低版本浏览器兼容问题相对定位position:relative;1.能不能使盒子发生位置变化 (可以)2.参考对象:自身初始位置3.脱离不脱离标准流 不脱离标准(保留原来位置 )4.是否适合布局:不适合布局(压盖,特殊位置)因为会留空白作用:1. 微调元素的位置(相当于外边距)2.辅助绝对定位(子绝父相)#### 绝对定位position:absolute原创 2020-11-23 18:41:46 · 214 阅读 · 0 评论 -
浮动对布局的影响
行内块并排缺点:中间有间距文本内容行数 多少不一样的时候 会出现对不齐现象浮动属性作用: 专业解决并排float: left左侧浮动/right右侧浮动/none不浮动;float:none;默认值 标准状态标准流 浏览器解析块元素从上到下一行一个 垂直排列 行内元素并排 中间有间距浮动特点:浮动只有水平移动 在父盒子区域内部进行左右移动float:left 靠近父盒子左侧边界 right 靠近父盒子右侧边界浮动元素脱离标准流 ,不占据界面位置—》形成浮动流原创 2020-11-20 18:50:46 · 234 阅读 · 0 评论 -
html背景属性及选择器进阶 ,优先级计算
背景属性插入图片 img src ,css 属性插入图片div { width:100px; height:100px; //背景属性 background: }background:图片路径url() 是否平铺 位置/尺寸 是否随着滚动条滚动 背景颜色;图片路径 background-image:url(./image/a.jpg);是否平铺 background-repeat:no-repeat不平铺/repeat 平铺(原创 2020-11-19 21:54:35 · 301 阅读 · 0 评论 -
外边距塌陷(父子嵌套塌陷兄弟上下塌陷)
浏览器默认问题,只发生块类型元素的上下外边距overflow:hidden;创造一个密闭私有空间触发BFC规则。父子嵌套塌陷兄弟上下塌陷原创 2020-11-19 21:27:25 · 363 阅读 · 1 评论 -
盒模型外边距margin与内边距padding的用法。
外边距margin使用: 上外边距可以使盒子向下移动 左外边距可以使盒子向右移动 右下外边距不能使盒子发生移动 只能将这个盒子与其他盒子的距离拉开,外边距可以设置负值 。margin:10px;margin: 0 auto ;水平居中(1.块类型 2.明确可以计算的宽度)内边距padding使用:上下左右内边距全部有用 移动内容位置(一定要做减法)加了内边距必定会增大盒模型 做内减计算 减在有效内容宽高用法:实线三角形边框交界形成分割线 .box{原创 2020-11-19 21:20:17 · 320 阅读 · 0 评论 -
页面布局相关元素的分类与转换
元素的分类与转换元素分类大致三类:(与布局相关),大致不是全部块类(display:block)<div></div>,<p></p>,h1~h6,<ul></ul>, <li></li> ,ol li ,dl dd dt ...特点:宽度是默认100% 高度由内容撑开 可以设置宽高独立成行 一行一个垂直放置 (霸道)行高撑开盒子高度行内类display:inlineaspan,e原创 2020-11-18 21:33:30 · 250 阅读 · 2 评论 -
与文本相关的css属性
文本相关的css属性字体属性font:字体是否是斜体 字体粗细 字体大小/行高 字体类型;字体是否是斜体 font-style:normal正/italic 斜体/oblique斜体font-weight:100-900 100最细 900最粗 400正常 >400粗 <400细 font-size: px /em/rem/%; 字体大小不写% 最小12px 默认16px 字体类型 font-family:Microsoft YaHei,Heiti原创 2020-11-18 21:19:20 · 238 阅读 · 0 评论 -
HTML5+CSS3的基本样式理解
超链接<a href="跳转的地址">可以是 文本/ img/ div...</a>属性:href:跳转地址 target:_self 本页/ _blank 空白页,新页 设置网页的打开方式。base标记<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2020-11-17 21:13:01 · 2675 阅读 · 8 评论 -
WEB前端开发的经历和过程
前端开发用前端技术实现用户界面前端技术:基础三大要素 html5 css3 javascript +js衍生物(vue,react,angular框架,node.js)用户界面:pc端 + 移动端app (页面+交互+数据渲染)发展史web1.0阶段 蒂姆·伯纳斯·李 [1] (Tim Berners-Lee) 界面:只能读 不能写web2.0阶段 布兰登·艾奇(Brendan Eich,1961年~) JS 有了交互 只能读 还能写 建设者web3.0阶段(大前端)原创 2020-11-16 21:22:30 · 1673 阅读 · 0 评论