- 博客(115)
- 收藏
- 关注
RSS订阅原创 Boostrap 第四章 代码
第四章 代码名字作用<code>标记标签<kbd>键盘按键样式标签<pre>按照输入的写法，输出文本.pre-scrollable加上这个类,pre就会出现滚动条<var>斜体<samp>编辑器里面是什么样式，samp标签输出就是什么样式...
2020-10-11 20:22:39
217
原创 Boostrap 第三章 排版
第三章 排版类作用.h1~h6任何标签用这个类就有了标题标签的样式&.smll副标题标签和类.lead突出内容.text-left文本左对齐.text-right文本右对齐.text-center文本居中对齐.text-justify文本左右对齐.text-nowrap文本一行显示.text-lowercase大写变小写.text-uppercase小写变大写.text-capitalize首字母
2020-10-11 20:07:35
178
原创 Boostrap 第二章 栅格系统
栅格系统名字类名作用容器.container响应式的布局容器--大屏（>=1200px）宽度是1170px--中屏（>=992px）宽度是970px--小屏（>=768px）宽度是750px--超小屏（100%）容器.container-fluid流失布局布局容器--流失布局 百分百的宽--适合做移动端开发名字类名作用栅格系统bs中的栅格系统将容器平均分为了12
2020-10-11 19:19:01
699
1
原创 Bootstrap第一章 bs入门
Bootstrap入门1：bootstarp简介：–Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。–Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。2：bootstarp网址：--中文网址：https://www.bootcss.com/--外文网址： http://getbootstrap.com/--菜鸟网络：https://www.runoob.com/bootstrap/bootstrap-grid-
2020-10-08 08:02:27
424
原创 移动端第二十三章 flexbjs+rem
flexbjs+rem1：rem+@media+less是我们移动端布局的第一种方案。2：flexible.js+rem是我们移动端布局的第二种方案。3：flexible.js库简介：--flexible.js库是淘宝研发的一种解决移动端页面适配不同手机尺寸的方法。--flexible.js库的优点就是可以节省我们的@media标签和less文件。--但是flexible.js库把当前页面划分了10等份，所以在计算页面基准值的时候--在750px的设计稿下面的html{font-size:75
2020-10-06 09:40:51
205
原创 移动端第二十二章 less+rem+media项目
less+rem+media项目1：移动端页面设计稿尺寸：--安卓手机尺寸：320px 360px 375px 384px 400px 414px 500px 720px--苹果手机尺寸：640px 750px2:通过less+rem+@media技术完成页面在各个手机尺寸上的显示3：手机页面的准备工作：--UI设计师会先给移动端页面设计一个尺寸 如：苏宁的尺寸是 750px--前端开发人员再人为的把设计稿分为若干份 如：苏宁分为 15等份 --(划分页面的份数的目的，只是为了求一个基数值
2020-10-06 09:38:37
313
1
原创 移动端第二十一章 less功能
less功能1:less 变量–css中的颜色和字号使用less 变量来存储–less 变量的命名 @color:red;–变量命名的规则：1）：必须@符号开头2）：名字不能是数字3）：名字不能包含特殊字符 @a#! @~col4) ：区分大小写--@color:red; @n:100px; @font:font-szie:100px; 2:less 嵌套css写法： #header { color: black; } #header .navigation {
2020-10-06 09:34:40
251
原创 移动端第二十章--响应式布局
响应式布局确定项目兼容的浏览器尺寸--NIKE 官网max-width:1024px 图片一行显示2列头部的导航和搜索消失侧边导航来到导航的位置显示--利用媒体查询写的项目叫 响应式布局比较简略的耐克官网–响应式布局效果图：具体代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href=
2020-10-06 09:29:06
267
1
原创 移动端第十九章 媒体查询
媒体查询1：什么是媒体查询：媒体查询是css3新的语法：@media only screen and (min-width: ) { 属性：属性值； }@media only screen and (min-width: 100px) and (max-width: 640px) { 属性：属性值； }screen 用于电脑屏幕，平板电脑，智能手机等。only 唯一（忽略）and 并且（不常用）min-width 屏幕最小宽度值max-width 屏幕最大宽度值
2020-10-06 09:21:21
219
原创 移动端第十八章 rem适配布局
rem适配布局前期讲了2种布局方案，但是只能解决项目中宽可以根据设备尺寸的不同有变化，但是项目中的高固定死，没有办法改变。为了解决项目中元素的宽高根据设备尺寸的不同，宽高都有变化的目的，那么我们就来认识一下，rem布局。1：单位介绍px、em、rem区别介绍2： px像素（Pixel）是绝对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX特点IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3：EMem是相对长度单
2020-10-06 09:17:15
909
原创 移动端 第十七章 弹性盒子布局
弹性盒子布局实例图:具体代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title>
2020-10-06 08:02:58
228
原创 移动端第十六章 弹性盒子布局
弹性盒子布局1：什么是弹性盒子布局？2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。**ie10以上浏览器支持Flex是Flexible Box的缩写，意为‘弹性布局’，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。举例：.box{ display: flex;}注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。2：弹性盒子
2020-10-06 07:45:12
253
原创 移动端第十五章 流失布局（百分比）
流失布局（百分比）步骤：1：先创建项目文件，在index.html 文件里面添加视口标签2：分析观察项目结构3：移动端项目一定要在不同尺寸的设备上面多跑跑，看看页面布局会不会发生变化。4：百分比布局，不是每一个元素的尺寸必须必须写成百分百。但是百分比布局，宽写百分比，高正常写。背景精灵图写法：1 先把精灵图放到ps中打开2 通过ctrl+alt+i 打开图像大小 约束比例选对勾3 把原图改小50% 假如原图大小是400乘400 改成200乘2004 在通过ps矩形选框工具量一下图形在
2020-10-06 07:44:08
243
原创 移动端第十四章移动页面布局基础概念
移动页面布局基础概念1:浏览器分为2种：a:一种是pc端浏览器（谷歌，火狐，IE，欧朋，其他）b:一种是m端浏览器 --移动端浏览器只需要做 -webkit-兼容就行.pc端页面需要兼容各个浏览器，移动端页面需要兼容各个手机尺寸2:查看了解手机尺寸https://uiiiuiii.com/screen/3:什么是视口？viewport===视口，视口就是浏览器显示内容的区域。4:视口的分类：PC 端：视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。移动端分为三个
2020-10-06 07:43:20
439
1
原创 移动端第十三章多列
多列属性描述column-count规定元素应该被分隔的列数column-gap规定列之间的间隔column-rule设置列边框与border写法一样column-span规定元素应该横跨的列数column-width规定列的宽度columns规定设置 column-width 和 column-count 的简写属性实例：<!DOCTYPE html><html> <head> <me
2020-10-05 15:00:43
184
原创 移动端十二章3D
3dtransform-origin:基点(旋转中心点)定义x轴的写法 :left/center/right/length/%定义Y轴的写法 :top/center/bottom/20px/50%transform-origin:x y;等价写法transform: translate3d(30px,30px,800px)transform:translateZ(800px) translateX(30px) translateY(30px);transform:translateZ(80
2020-10-05 14:56:25
225
原创 移动端第十一章动画
动画动画属性：animationanimation-name:动画的名字animation-duration:动画完成一个周期所花费的时间(秒/毫秒)animation-timing-function:动画的速度曲线(linear ease ease-in ease-out ease-in-out 贝塞尔曲线)animation-delay:动画何时开始animation-iteration-count:动画被播放的次数 number/infinite(无限循环) animation-dir
2020-10-05 14:44:54
206
原创 移动端第十章过渡
过渡transition:过渡过渡时间transition-duration: 3s;过渡属性(定义宽还是高)transition-property: all;过渡函数(运动的方式)transition-timing-function: ease;过渡延迟时间transition-delay: 4s;实例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title
2020-10-05 14:39:53
158
原创 移动端第九章变形
变形变换/变形：transform移动：translatetranslate(X px,Y px);实例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; backgro
2020-10-05 14:28:35
192
原创 移动端第八章背景渐变
移动端背景渐变背景渐变：分为2种： 线性渐变 linear 径向渐变 radial实例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &
2020-10-05 08:25:09
242
原创 移动端第七章字体
字体1：文字阴影text-shadow：x y blur color, …参数x 横向偏移y 纵向偏移blur 模糊距离color 阴影颜色实例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ font-size: 100px;
2020-10-05 08:21:28
255
原创 移动端第六章 盒子模型
盒子模型什么是盒子模型?原来的盒子，添加border,padding都可以让盒子本身变大，为了解决这个问题，css3推出了新的盒子模型实例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;
2020-10-05 08:06:53
241
原创 移动端第五章 选择器
选择器选择器例子描述element>elementdiv>p选择 的 子元素element+elementdiv+p选择在 元素之后的相邻的 元素element~elementdiv~p选择在 元素之后的所有 元素
2020-10-05 08:06:40
274
原创 移动端 第四章 音频视频
音频视频audio 音频音频属性 controls 控制面板 src 路径 loop 循环次数 autoplay 自动播放 (谷歌浏览器不支持自动播放)&nb
2020-10-05 08:06:26
203
原创 移动端第三章新增表单控件
新增表单控件1：表单中新增的控件(type属性)email: 提交表单时检测值是否是一个电子邮件格式url: 提交表单时检测值是否是一个url格式date: 年-月-日格式的控件time: 时:分格式的控件datetime: 年-月-日 时:分 格式的控件（UTC时间）datetime-local: 年-月-日 时:分 格式的控件（本地时间）month: 年-月格式的控件week: 年-周数格式的控件number: 数字输入框<input type="number" name="
2020-10-04 16:59:44
254
原创 移动端 第二章 html5新增标签
html5新增标签1：新增结构标签：（我们以前布局页面经常用到的是div或者span等，但是这些没有语义化）标签名 标签 案例页面头部标签 header页脚底部标签 footer导航 nav <nav> <a href=''>首页</a> <a href=''>首页</a> <a href=''>首页
2020-10-04 16:53:12
212
原创 移动端第一章课程概要
第一章 课程概要1.html5是什么？HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012 年已形成了稳定
2020-10-04 16:45:09
320
原创 JQuery第七章Json
Json1:什么是json？JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。2:json数据格式有2种写法： 1：对象格式 2：数组格式3:json方法eval() 将js代码转换成对象/不建议用，安全性太低json提供2个方法，但是要求浏览器版本高（现在浏览器不影响了，如果想让方法兼容低版本浏览器，请下载json.js）stringify() 讲json转换成js字符stringify()方法除了可以转换以外，方法中
2020-10-04 16:32:20
183
原创 JQuery第六章动画
动画显示隐藏show(秒数) 显示hide(秒数) 隐藏toggle() 切换显示/隐藏实例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; backgrou
2020-10-04 16:15:53
176
原创 JQuery第五章事件
事件1:绑定事件方法:bind(事件，函数) 元素绑定事件绑定事件方法的优点就是可以绑定多个事件，可以同时处理实例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>点击</button> </body> &l
2020-10-04 15:47:43
244
原创 JQuery第四章DOM
DOM1：获取值的方法html()text()val() 既可以获取input里面的值/也可以设置值 如果是下拉菜单 、单选、多选的情况下 val([''])方法 还可以将他们设置成默认选中prop('checked',true) 专属input默认选中方法实例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>
2020-10-04 15:36:30
204
原创 JQuery第三章选择器方法
选择器方法方法 find() 匹配当前元素的后代 == $('div p')后代选择器 children() 匹配当前元素的子元素 == $('div>p')子选择器 next() 匹配当前元素的下一个同级元素== $('div+p')下一个同级选择器 nextAll() 匹配当前元素的下的所有同级元素 == $('div~p') prev() 匹配当前元素的前一个同级元素== prevAll() 匹配当前元素的前的同级元素== siblings() 匹配当前元素的所有同
2020-10-04 14:49:04
189
原创 JQuery第二章 选择器
选择器1：基础选择器id #class .标签 div* 通配符群组 #box,pcss() 一个值的时候是找这个元素的值，两个值的时候是设置样式举例 找元素的值：alert($(‘p’).css(‘color’))举例 设置元素的样式：KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲txt').css('colo…(‘p’).size())2：层次选择器$(‘p>
2020-10-04 14:39:16
224
原创 JQuery第一章入门
总结1:什么是jQuery?它通过封装原生的 JavaScript 函数得到一整套定义好的方法2：jQuery的作用？1.像 CSS 那样访问和操作 DOM2.修改 CSS 控制页面外观3.简化 JavaScript 代码操作4.事件处理更加容易5.各种动画效果使用方便6.让 Ajax 技术更加完美7.基于 jQuery 大量插件8.自行扩展功能插件3：jQuery的优点？以更少的代码、实现更多的功能4：jQuery的引入方式？1：本地引入（外链接）<scrip
2020-10-04 14:28:58
301
原创 高级函数总结
1：什么是函数？a:通过关键字 function定义声明的语句就是函数 function sun(){ }b:函数是一个代码块的集合2:函数的命名？a:参考变量命名3：函数的调用有几种？a:普通调用 function sun(){ } sun()b:事件中调用 <p onclick="sun()"></p>c:表达式中调用（输出方法中调用） function sun(){ var n=1; return n; } alert(s
2020-10-03 18:14:31
360
原创 运动总结
获取css的属性样式的兼容写法function getstyle(DOM,name){ if(DOM.currentStyle){ IE的兼容 return DOM.currentStyle[name]; }else{其他浏览器的兼容 return getComputedStyle(DOM,false)[name]; } }window.getComputedStyle(Element,false)['width']获取元素宽高属性的总结:offsetWidth 既
2020-10-03 18:06:14
167
原创 放大镜总结
1.offsetLeftoffsetTopoffsetWidth 获取元素的宽offsetHeight 获取元素的高2.document.documentElement.clientWidth 获取可视窗口的宽度document.documentElement.clientHeight 获取可视窗口的高度Element.clientWidthElement.clientHeight3:scrollLeft 横滚动条的值 scrollTop 竖滚动条的值放大
2020-10-03 17:25:05
238
原创 正则总结
1：正则创建方式var reg=new RegExp('要匹配的元素','修饰符')var reg=//;alert(typeof reg) Object2:正则的方法test() input框里的值通过test方法去匹配一个正则，匹配成功返回true否则返回false。exec()3:字符串的方法字符串对象调用的函数（支持正则） 1)search():搜索,返回第一次搜索到的元素的下标，找不到返回-1 2)match()：匹配,返回匹配成功的字符串,组成的数组，未匹配成功则返回nu
2020-10-03 17:16:42
157
原创 事件冒泡和事件捕获
事件冒泡和事件捕获事件有三个阶段: 1.事件捕获阶段 :从外向内 2.事件目标阶段 :最开始选择的那个 3.事件冒泡阶段 : 从里向外事件冒泡多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了 从里到外 事件捕获:从外往里.绑定事件: addEventListener(事件类型,事件
2020-10-03 17:06:27
322
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人