- 博客(25)
- 收藏
- 关注
原创 正则表达式
什么是正则表达式正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。正则表达式的特点灵活性、逻辑性和功能性非常的强。 2. 可以迅速地用极简单的方式达到字符串的复杂控制。 3. 对于刚接触的人来说,比较晦涩难懂。比如:^\w+([-+.]\w+)@\w+([-.]\w+).\w+ ([-.]\w...
2019-11-08 20:19:26 266
原创 ES5的三种改变this指向的方法
call方法call()方法调用一个对象。简单理解为调用函数的方式,但是它可以改变函数的 this 指向应用场景: 经常做继承 var o = { name: 'andy' } function fn(a, b) { console.log(this); console.log(a +...
2019-11-06 20:46:18 529
原创 移动端WEB开发之响应式布局和bootstrap的介绍
响应式开发原理响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。响应式布局容器响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。bootstrap的介绍Bootstrap框架:顾名思义就...
2019-11-05 20:02:27 592
原创 移动web开发之rem布局和less的相关
rem基础rem单位rem (root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。rem的优势:父元素文字大小可能不一致, 但是整个页面只有一个html,可以很好来控制整个页面的元素大小。媒体查询什么是媒体查询媒体查询(Media Query)是CSS3新语法。使用 @media查询,可以针对不同的媒体类型定义不同...
2019-11-04 16:13:36 381
原创 移动端常见布局之flex布局
flex布局flex布局操作方便,布局极其简单,移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分flex布局原理flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 verti...
2019-10-30 15:20:12 755
原创 移动端常见布局之流式布局
移动端常见布局移动端单独制作流式布局(百分比布局)flex 弹性布局(强烈推荐)less+rem+媒体查询布局混合布局响应式媒体查询bootstarp流式布局:流式布局,就是百分比布局,也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。 <style> * { ...
2019-10-30 15:00:48 1072
原创 移动web开发
移动端基础移动端浏览器现状移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。主要都是以Webkit内核修改开发而来。所以处理Webkit内核浏览器即可。手机屏幕的现状移动端设备屏幕尺寸非常多,碎片化严重。Android设备有多种分辨率:480x800, 480x854, 540x960, ...
2019-10-30 14:55:10 118
原创 CSS3之动画
动画(animation)什么是动画动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果动画的基本使用先定义动画在调用定义好的动画语法格式(定义动画)@keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200...
2019-10-28 19:22:00 952
原创 放大镜
放大镜的实现思路1、在鼠标经过产品图时遮盖层和大图都显示,鼠标移开时遮盖层和大图都隐藏。2、鼠标在产品图内移动时把鼠标在产品图内的坐标给遮盖层并将鼠标定到遮盖层中央3、把遮盖层的移动距离以一个比例给大图代码 <style> .preview_wrap_img { position: relative; c...
2019-10-25 20:43:30 161
原创 H5C3之3D转换
3D转换认识 3D 转换3D 的特点近大远小物体和面遮挡不可见三维坐标系x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值y 轴:垂直向下 – 注意:y 轴下面是正值,上面是负值z 轴:垂直屏幕 – 注意:往外边的是正值,往里面的是负值3D 转换3D 转换知识要点3D 位移:translate3d(x, y, z)3D 旋转:rotate3d(x, ...
2019-10-24 08:42:10 489
原创 CSS3之过渡
CSS3 过渡什么是过渡添加某种效果可以从一种样式转变到另一个的时候,不用使用Flash动画或JavaScript。它是如何工作CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:指定要添加效果的CSS属性指定效果的持续时间。案例 <style> div { width: 100px; ...
2019-10-23 10:31:57 236
原创 H5C3之2D转换
2D 转换之 translate2D 转换2D 转换是改变标签在二维平面上的位置和形状移动: translate旋转: rotate缩放: scaletranslate 语法x 就是 x 轴上水平移动y 就是 y 轴上水平移动transform: translate(x, y)transform: translateX(n)transfrom: translateY(...
2019-10-22 19:58:43 344
原创 HTML5的一些属性
什么是 HTML5HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念:是一个新版本的 HTML 语言,定义了新的标签、特性和属性拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5HTML5 拓展了哪些内容语义化标签本...
2019-10-22 19:37:50 677
原创 CSS布局之定位
定位定位由定位模式和边偏移组成边偏移我们定位的盒子,是通过边偏移来移动位置的。在 CSS 中,通过 top、bottom、left 和 right 属性定义元素的边偏移:(方位名词)边偏移属性示例描述toptop: 80px顶端偏移量,定义元素相对于其父元素上边线的距离。bottombottom: 80px底部偏移量,定义元素相对于其父元素下边线的距离...
2019-10-21 20:56:12 242
原创 css布局之浮动
CSS布局有三种机制分别是普通流(标准流)、浮动和定位。普通流(标准流)就是在HTML写的从上到下的排序浮动就是让盒子从标准流浮起来定位就是将盒子定在浏览器的某个位置。什么是浮动(float)概念:元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制移动到指定位置。作用让多个盒子(div)水平排列成一行,使得浮动成为布局的重要手段。可以实现盒子的左右对齐等...
2019-10-21 20:26:56 326
原创 简易版留言案例
简易版留言案例在留言文本域输入内容后点击发布按钮后创建一个新的元素,同时把文本域的值通过ineerHTML赋值给这个新元素,然后用insertBefore显示在前面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewp...
2019-10-19 20:27:14 255
原创 tab栏的切换
tab栏切换的思路1、tab栏切换要有上下(左右)两个大的模块2、上面的模块内有几个小模块3、下面的模块要有几个模块与上面的模块一一对应、相匹配4、点击上面的小模块,下面相应的模块显示,其余的隐藏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &...
2019-10-19 19:37:37 2171
原创 个人学习日记—CSS盒子模型
网页布局的本质网页布局就是利用css设置好盒子的大小,然后摆放好盒子的位置。再把网页元素放入盒子里面。盒子模型盒子模型就是把HTML页面中的布局元素看作是一个盒子,也就是一个装内容的容器。盒子模型是由有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。盒子里面的文字和图片第元素是内容区域。盒子的厚度是盒子的边框。盒子的内容与边框的距离是盒子的内...
2019-10-16 15:57:49 190
原创 个人学习日记—CSS复合选择器、背景、三大特性
CSS复合选择器目的是为了可以选择更准确更精细的目标元素标签。复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的后代选择器(重点)概念:后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。语法:.class h3{color:red;font-size:16px;}当标签发生嵌套时...
2019-10-15 20:52:51 264
原创 个人学习日记—CSS字体样式属性调试工具
font字体font-size:大小作用:font-size属性用于设置字号p { font-size:20px; }单位:可以使用相对长度单位,也可以使用绝对长度单位。相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。注意:我们文字大小以后,基本就用px了,其他单位很少使用谷歌浏览器默认的文字大小为16px但是不同浏览器...
2019-10-15 19:57:12 228
原创 个人学习日记—CSS—1
CSS初识概念:CSS(Cascading Style Sheets),通常称为CSS样式表或层叠样式表(级联样式表)。作用:1、主要用于设置 HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。2、CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。引...
2019-10-15 19:16:48 207
原创 个人学习日记
表格表格标签标签名定义说明<table></table>表格标签就是一个四方的盒子;最外层包裹表格的大盒子<tr></tr>每一行的表格行标签要再table标签内部才有意义<td></td>每一个单元格子单元格标签是个容器级元素,可以放任何东西<th><...
2019-10-14 21:18:17 244
原创 个人学习日记
HTML的基本标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网页标签</title></head><body> 排版标签<h1-h6>字体变小 段落标签<p>段落文字&...
2019-10-14 20:21:06 262
原创 WEB学习日记二
##1· html初识HTML指的是超文本标记语言((Hyper Text Markup Language)是用来描述网页的一种语言HTML不是一种编程语言,而是一种标记语言(markup language)标记语言是一套标记标签(markup tag)HTML的作用:网页是由网页元素组成,而这些网页元素是用HTML标签描述出来,然后通过浏览器解析,就可以显示给用户了。超文本的含义:一个...
2019-10-14 19:15:24 176
原创 WEB学习日记一
#WEB学习日记一##1.认识网页网页主要由文字,头像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频,视频以及Flash等。##2.常见游览器内核现在常见的浏览器内核主要流行的是IE,firefox,Safari,chrome和Opera这五大浏览器内核。##3.Web标准构成主要包括结构,表现和行为。结构:结构用于对网页元素进行整理和分类,主要学的是HTML.表现:...
2019-10-14 18:24:28 235
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人