- 博客(20)
- 收藏
- 关注
RSS订阅原创 Swiper引入,new Swiper 阻止eslint标准
在引入swiper插件时阻止vue-cli脚手架默认标准./* eslint-disable-next-line */new Swiper ('.swiper-container', { loop: true, // 循环模式选项 autoplay: true, // 如果需要分页器 pagination: { el: '.swiper-pagination' } })/* eslint-disable-next-line */如不输入该代码,会导致new
2020-09-23 16:36:19
337
原创 H5学习---Javascript---while for 三目运算符
1.while循环while(条件){//条件成立就会反复执行这里的代码}var count = 0;while(count < 10){ count++; document.write("Hello world");}死循环： 没有终止条件的循环即为死循环，在代码中应尽量避免死循环2.do…while循环do {//先执行一遍代码//while条件成立再继续反复执行} while (条件)while和do…while循环的区别 do...while循环至少会执
2020-08-05 20:53:36
430
原创 H5学习---Javascript---显示,隐式转换 if switch case
隐式转换var a = "2", b = 2;console.log(a + b ) // 22console.log(a == b) // trueconsole.log(a * b) // 4console.log(a - 0 + b) // 4console.log(a / b) // 1console.log(a % b) // 0数字和字符串相加，数字会隐式转换为字符串来拼接数字和字符串相减，字符串转成数字，如果转换不成功得到Na
2020-08-05 20:51:53
462
2
原创 H5学习---Javascript---js书写 变量类型 变量命名
1.Javascript是一门面向对象的，跨平台的脚本语言2.JS历史1995 最初由Netscape（网景公司）的Brendan Eich设计 为Netscape Navigator 2.0开发LiveScript Netscape Navigator 2.0 即将正式发布前，Netscape 将其更名为 JavaScript因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScriptECMA: European Computer Ma
2020-08-05 20:47:27
499
原创 H5学习---html，css---网格布局 视口宽
flex是一维布局,grid是二维布局，横纵两个方向总是同时存在的作用在grid容器上grid-template-columns对网格进行纵划分,单位可以是px,%,自适应auto,fr(网格剩余空间比例单位)grid-template-rows网格进行横划分grid-template-rows:repeat(4,1fr);重复形式grid-template-areas：grid子项只要使用grid-area属性指定其隶属于哪个区grid-template以上三个的简写形式grid-col
2020-08-05 20:45:17
589
原创 H5学习---html，css---媒体查询 移动端
介绍响应式网页媒体查询@media only screen and (min-width: 601px) and (max-width: 1200px){ body{ background: yellow; }}竖屏 @media screen and (orientation:portrait){}横屏 @media screen and (orientation:landscape){}断点值： iphone5 - 逻辑像素320px iphone6/7/8 - 逻辑像素37
2020-08-05 20:43:05
623
原创 H5学习---html，css---弹性盒及属性
给父元素添加1.display:flex/inline-flex; flex将对象作为弹性伸缩盒显示 inline-flex将对象作为内联块弹性伸缩盒显示2.flex-direction (主轴排列方向) row 默认，横向一行排列 row-reverse 反转横向排列 column 纵向排列 column-reverse 反转纵向排列3.justify-content(主轴对齐方式) flex-start默认，顶端对齐 flex-end末端对齐 center居中对齐
2020-08-05 20:42:12
210
原创 H5学习---html，css---背景,属性选择器
渐进增强优雅降级渐进增强:针对低版本浏览器进行构建页面，保证最基本的功能， 然后再针对高级浏览器进行效果、交互等改进和追加 功能达到更好的用户体验优雅降级:一开始就构建完整的功能，然后再针对低版本浏览器进行兼容css选择器一、层级选择器 E>F 子代选择器(非css3) E+F 匹配紧邻元素E的后面的元素F(非css3) E~F 选择前面有E元素的每个F元素二、属性选择器 1、E[attr]：只使用属性名，但没有确定任何属性值 2、E[attr="value"]：指定属性名
2020-08-05 20:39:44
193
原创 H5学习---html，css---H5语意标签,新增表单元素
语义标签H5内容类型（ContentType）HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm"。DOCTYPE声明不区分大小写指定字符集编码meta charset="utf-8" 可省略标记的元素不允许写结束表标记的元素：br,col,enbed,hr,img,input,link,meta可以写省略结束标记的元素：li,dt,dd,p,option,colgruop,thead,tbody,tfoot,tr,td,th可以省略全部标记的元素：html
2020-08-05 20:37:04
183
原创 H5学习---html，css---3D 动画
3D- perspective元素距离视线的距离(1000-3000px) 模拟近大远小效果,添加给父元素- perspective-origin观察子元素的视角(默认值为中心点)- transform-style:preserve-3d;子元素保留3d转换位置- backface-visibility: hidden;子元素背面不可见,添加给子元素- 位移 transform: translateZ(300px);沿着z轴移动 transform: translate3d(100px,20
2020-08-05 20:10:47
193
原创 H5学习---html，css---渐变过渡,2D转换
渐变- 线性渐变 background:linear-gradient(方向,颜色1,颜色2,...) 方向： to top由下到上 30deg- 径向渐变 background: radial-gradient(pink,purple);- 重复线性渐变 background: repeating-linear-gradient(red 10%,pink 20%);- 重复径向渐变 background: repeating-radial-gradient(red 10%,
2020-08-05 20:09:55
228
原创 H5学习---html，css---css优化，浏览器兼容，表单表格
css优化css方面 1.提取公共的css样式作为一个单独的css文件引入页面头部 1.描述 <meta name="Description" content="天天低价手机"/> 2.关键字 <meta name="Keywords" content="低价,促销,折扣,正品"/>图片优化(alt属性，title属性)超链接优化 建议纯文本CSS Reset / css重置css命名优化合理的代码结构图片整合- CSS Sprites/雪碧图/精
2020-07-27 10:39:52
250
原创 H5学习---html，css---定位，BFC
***定位position- 分类 1.相对定位position:relative; 参考物：元素本身(自己的初始位置) 是否脱离文档流：不脱离 偏移位置： top bottom left right 2.绝对定位position:absolute; 参考物：外层具有position属性的元素,一层一层向上去查找,如果都没找到最终参考浏览器空白文档区域做定位 是否脱离文档流：脱离 偏移位置： top bottom left rig
2020-07-27 10:38:41
83
原创 H5学习---html，css---透明度，锚点，清楚浮动，伪类选择器
iframe标签- 当前页面中嵌入另一个页面- <iframe src=""></iframe>元素隐藏办法display:none; - 让元素隐藏，元素空间不再占据visibility:hidden; - 元素可见性：隐藏。元素空间还在锚点- 当前页面跳转到某一个位置阅读- 用法： 用户点击<a href="#idname">第一章</a> 跳转到的位置<div id="idname"></div>-
2020-07-27 10:37:05
136
原创 H5学习---html，css---overflow，display，框模型
溢出属性overflow: visible溢出可见(默认) hidden溢出隐藏 scroll溢出滚动条查看 auto溢出自动处理 inherit继承- 父元素使用overflow:hidden;解决高度塌陷问题原因是： 父元素触发了BFC(块级格式化上下文),浮动子元素高度参与计算 white-space:nowrap;文本不换行text-overflow:ellipsis;文本显示省略号***单行文本显示...效果 div{ width:100px; white-s
2020-07-27 10:34:10
190
原创 H5学习---html，css---属性，浮动
属性1.字体大小font-size2.字体颜色color3.字体font-family4.字体加粗font-weight:bold;5.行高line-height6.基线对齐vertical-align:baseline;7.文本和图片的水平居中text-align:center;8.添加下划线text-decoration:underline;9.字体font的简写属性font:12px/1.5em "微软雅黑";10.去掉列表标识符 ul,ol,li{ list-style:n
2020-07-27 10:32:53
137
原创 H5学习---html，css---选择器，文本列表边框属性，背景，精灵图
选择器- 元素选择器 把页面中的某一类标签改变相同的样式- 类选择器 - 命名规则：见名知意,包含字母数字_-,小写字母开头 - 一个元素可以有多个类名,一个类名可以被多个元素所使用 <div class="box wrap content"></div>- id选择器 - 每个版块最外层的大容器 - id具有唯一性 <div id="box"></div>- 群组选择器 - 共用相同的代码 #box,.wrap,.list{}
2020-07-27 10:30:20
286
原创 H5学习---html，css---css引入，选择器，css属性
了解：另一种外部样式表的引入方法在head中添加 <style type="text/css"> @import url("css/style.css"); </style>- 两种引入外部样式表link和import之间的区别 差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。 差别2：加载顺序的差别：当一个页面被加载的时候,link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有
2020-07-27 10:27:43
171
原创 H5学习---html，css---form表单
form表单<form action="" method="" name=""></form>- form的属性 action提交的地址 method提交的方式： get默认，明文提交 post密文提交，相对安全 name起个名字- 文本框 <input type="text" name="username" value="请输入昵称"/> type="text"文本框 name起个名字 value控件上的文本- 密码框 <input
2020-07-27 10:25:14
157
原创 H5学习---html，css---标签
站点的作用用来归纳一个网站上所有的网页、素材以及他们之间的联系规划网站的所有内容和代码整合资源创建站点的步骤菜单栏中文件 -- 新建 -- web项目 -- 项目的命名(包含小写英文字母、数字、_,字母开头，不能有空格和特殊字符) -- 选择非C盘 -- 确定站点中包含css文件夹，用来放置css文件img文件夹，用来放置图片js文件夹，用来放置js文件index.html，一般是网站的首页web标准组成结构html,xhtml表现css行为javascript(js)组
2020-07-27 10:18:52
193
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人