前端
文章平均质量分 74
小忆(华仔)
这个作者很懒,什么都没留下…
展开
-
前端入门到熟悉day01
01文本标签 P段落标签(块级元素) h1-h6标题标签(块级元素) font字体标签(行内元素) span 标签被用来组合文档中的行内元素。(行内元素) 02文本格式化标签 hr 水平线(块级元素) br 换行标签 strong/b 加粗标签(行内元素) em/i 斜体标签(行内元素) del/s 删除线(行内元素) ins/u下划线(行内元素) big/small大号和小号标签(行内元素) s...原创 2018-12-26 19:57:13 · 205 阅读 · 0 评论 -
前端入门到熟悉day28
01计时器的使用 js中计时器重要使用window.setInterval()方法和window.setTimeout()方法, 其中setInterval()方法的作用是每隔一段时间执行一次方法,而window.setTimeout()在一段时间内调用函数。 setTimeout()方法一般通过调用自身迭代的方式实现计时器。与这两个方法对应的,还有清除这两个函数效果的 两个方法,分别是windo...原创 2019-02-28 20:07:36 · 683 阅读 · 0 评论 -
前端入门到熟悉day29
Video HTML5 中的新属性。 属性 值 描述 autoplayNew autoplay 如果出现该属性,则视频在就绪后马上播放。 controlsNew controls 如果出现该属性,则向用户显示控件,比如播放按钮。 heightNew pixels 设置视频播放器的高度。 loopNew loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。 mutedNew muted 如...原创 2019-02-28 20:08:33 · 158 阅读 · 0 评论 -
前端入门到熟悉day30
豆瓣阅读页 文章首页静态布局制作 就是简单的页面,和样式的应用以及轮播插件的使用 swiper 滑块视图容器。 属性名 类型 默认值 说明 indicator-dots Boolean false 是否显示面板指示点 indicator-color Color rgba(0, 0, 0, .3) 指示点颜色 indicator-active-color Color #000000 当前选中的...原创 2019-02-28 20:09:46 · 714 阅读 · 0 评论 -
前端入门到熟悉day31
Douban-底部导航tabBar 微信小程序底部导航Tabbar 底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图。 对于底部导航栏,小程序上给出的文档要求里面的item最少2个,最多五个。 好了,先看看代码: 在项目中找到这个文件 { “pages”:[ “pages/inde...原创 2019-03-18 15:13:56 · 183 阅读 · 0 评论 -
前端入门到熟悉day11
JDM .jd_header{ width: 100%; position: fixed; height: 40px; top: 0; left: 0; z-index: 10000; input,textarea{ border: 0; outline: none; resize: none; /* ios input自带的样式 清除 */ -webkit-appearance: none; }...原创 2019-02-25 17:22:57 · 89 阅读 · 0 评论 -
前端入门到熟悉day12
京东其他两个页面:1分类 2购物车 /* 分类页和购物车页面公共样式的topBar / .jd_topBar{ height: 45px; width: 100%; background: url("…/images/header-bg.png") repeat-x; background-size: 1px 45px; border-bottom: 1px solid #e0e0e0; posi...原创 2019-02-25 17:23:54 · 130 阅读 · 0 评论 -
前端入门到熟悉day13
JDM分类页面左右滚动互不影响 先设置宽width 高height 再overflow-y: scroll;(两边都要设置,不是设置body) bootstrap起步 先下载bootstrap源文件,再把源文件引入 [ (在body标签结束前引入,jquery是大佬,要第一个引入) ] 看情况把需要的引进,需要图标之类的把bootstrap中的font复制到项目就行 container-fl...原创 2019-02-25 17:24:45 · 131 阅读 · 0 评论 -
前端入门到熟悉day14
ui小姐姐把设计稿给你 先把静态页面写出来 做响应式(rem+js /百分比/栅格化/媒体查询) 做/写插件 测试没bug 上线(网址访问网站) 麦子学院官网animate和汉堡菜单完善 animate 在需要加动画的区域加animated 动画类型(bounceInUp、fadeInUp、fadeInLeft、、、) 汉堡菜单 data-toggle="collapse" data-targ...原创 2019-02-25 17:26:17 · 136 阅读 · 0 评论 -
前端入门到熟悉day15
后台管理首页(index.html) Toggle navigation Maizi Admin   后台首页   用户管理   内容管理   标签管理 admin   前台首页原创 2019-02-25 17:27:15 · 165 阅读 · 0 评论 -
前端入门到熟悉day16
笔记 1.根据设计稿布局(h5+css+css3) 2.写插件 写动画效果 3.写交互 写逻辑(js jquery 三大框) 先给js下很简单那的定义 html h5 css css3 只能去做我们的静态页面(无任何动态数据和交互逻辑) 动态页面(数据是动态的 活的 用js去获取数据 再处理数据 渲染到页面 再做交互 根据需求文档实现) 内容(html) 表现(css) 行为(js) MVC(jq...原创 2019-02-25 17:28:17 · 153 阅读 · 0 评论 -
前端入门到熟悉day17
JavaScript组成 ECMAScript:解释器、翻译 DOM:Document Object Model BOM:Browser Object Model 各组成部分的兼容性(低版本IE),兼容性问题由来 简易日历 var arr = [];是一个数组对象  var arr = {};是一个对象 01变量的类型 类型:typeof运算符 用法、返回值 常见类型: numb...原创 2019-02-25 17:29:21 · 128 阅读 · 0 评论 -
前端入门到熟悉day18
数组操作 Array(数组)对象方法 方法 描述 concat() 连接两个或更多的数组,并返回结果。 join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 pop() 删除并返回数组的最后一个元素 push() 向数组的末尾添加一个或更多元素,并返回新的长度。 reverse() 颠倒数组中元素的顺序。 shift() 删除并返回数组的第一个元素 slice() 从某个已...原创 2019-02-25 17:30:12 · 119 阅读 · 0 评论 -
前端入门到熟悉day19
DOM高级 01表格悬停变色效果 02表格悬停变色效果2 03动态添加表格 05动态添加删除表格2 06表格搜索 07表格搜索忽略大小写 08search()方法 //search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。 09search方法检索表格 10split //split() 方法用于把一个字符串分割成字符串数组 11多关键词搜索 ...原创 2019-02-25 17:31:03 · 138 阅读 · 0 评论 -
前端入门到熟悉day27
rest参数 (1) Rest 参数接受函数的多余参数,组成一个数组,放在形参的最后,形式如下: function func(a, b, …theArgs){ // … } (2) Rest参数和arguments对象的区别: rest参数只包括那些没有给出名称的参数,arguments包含所有参数 arguments 对象不是真正的数组,而rest 参数是数组实例,可以直接应用sort, map...原创 2019-02-28 20:06:39 · 1073 阅读 · 0 评论 -
前端入门到熟悉day26
let和const命令介绍 let命令 ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。 for循环的计数器,就很合适使用let命令。 var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。 Const命令 const声明一个只读的常...原创 2019-02-28 20:05:39 · 136 阅读 · 0 评论 -
前端入门到熟悉day25
其他对象 Date转换 //实例化一个日期对象 vardatetime1 = newDate(); // console.log(datetime1); getFullYear() 方法可返回一个表示年份的 4 位数字。 varb = datetime1.getFullYear(); // console.log(typeof b); NUmber 2019 // conso...原创 2019-02-28 20:03:37 · 193 阅读 · 0 评论 -
前端入门到熟悉day02
01文本域和select-option select 元素可创建单选或多选菜单。 <select&> 元素中的<option>标签用于定义列表中的可用选项。 02表格1 表格的基本构成元素最少需要三个 table tr td 表格元素的汇总: table:表示表格 thead:表示标题行 tbody:表示表格的主体 tfoot: 表示表...原创 2018-12-26 20:01:37 · 139 阅读 · 0 评论 -
前端入门到熟悉day03
01为什么要清除浮动 浮动会产生“高度塌陷” 02伪元素选择器 :link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :active a:active 选择...原创 2018-12-26 20:04:15 · 145 阅读 · 0 评论 -
前端入门到熟悉day04
01传统pc商城网页框架 头部区域 内容区域 底部区域 Document 我是头部 我是左边 我是右边 我是产品区域 02多栏布局 跟传统的差不多一样,只是差了点样式 Document 我是头部 我是左边 我是中间 我是右边 03云道网页 分析布局。 使用PS切图工具切图。 将切片导出,快捷键ctrl...原创 2018-12-26 20:13:22 · 215 阅读 · 2 评论 -
前端入门到熟悉day05
学成在线(网页) <!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <title>学成在线教育平台-不是每个网站都叫学成在线</title> <!-- css初始化文件 --> &l原创 2018-12-26 20:21:13 · 153 阅读 · 0 评论 -
前端入门到熟悉day06
01属性选择器 /* 属性选择器: 属性是相对于标签而言的 所谓的属性选择器就是根据指定名称的属性的值来查找页面中的元素 1.E[attr]:查找指定的拥有attr属性的标签 查找拥有style属性的标签 */ li[style]{ text-decoration: underline; } /* 2.E[attr=value] :查找拥有指定的attr属性并且这个属性的值为v...原创 2018-12-26 20:30:35 · 146 阅读 · 0 评论 -
前端入门到熟悉day07
01web字体 @font-face{ font-family: 'webfont'; src: url('fonts/webfont.eot'); /* IE9*/ src: url('fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/webfont.woff') fo...原创 2018-12-26 20:32:01 · 159 阅读 · 0 评论 -
前端入门到熟悉day08
01css3动画添加 /* animation: name duration timing-function delay iteration-count direction fill-mode; */ /* 添加动画效果 */ /* 1.指定动画的名称 */ /* animation-name: moveTest; /* 2设置动画的总耗时 */ /* animation-durati...原创 2018-12-26 20:33:06 · 157 阅读 · 0 评论 -
前端入门到熟悉day09
尚德制作rem(rem讲解) <metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <!-- rem (font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相...原创 2018-12-26 20:36:08 · 387 阅读 · 0 评论 -
前端入门到熟悉day10
fullpage.js讲解 使用方法 1、引入文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <!-- jquery.easings.min.js 用于 easing 参数,也可以使用完整的原创 2018-12-26 20:39:14 · 132 阅读 · 0 评论 -
前端入门到熟悉day21
01在可视区域范围内拖放 <script> window.onload=function(){ varoDiv=document.getElementById('div1'); vardisX=0; vardisY=0; oDiv.onmousedown=function(ev){ varoEvent=ev||event; //每次确定div的...原创 2019-02-28 19:56:27 · 140 阅读 · 0 评论 -
前端入门到熟悉day22
js事件绑定 01js入口函数 <script> // 原生js的入口函数只有一个 多个还是会读取最后一个入口函数 只执行最后一个入口函数的逻辑 window.onload=function(){ console.log('我是入口函数1') alert('sdasdasddas') } window.onload=function(){ console.log('我...原创 2019-02-28 19:57:43 · 161 阅读 · 0 评论 -
前端入门到熟悉day23
Javascript面向对象 面向对象程序设计(简称OOP)是现在最流行的程序设计方法,这种方法有别于基于过程的程序设计方法。在写面向对象的WEB应用程序方面JavaScript是一种很好的选择.它能支持OOP 面向过程 面向过程专注于如何去解决一个问题的过程步骤。编程特点是由一个个函数去实现每一步的过程步骤,没有类和对象的概念。 面向对象 专注于由哪一个对象来解决这个问题,编程特点...原创 2019-02-28 19:59:36 · 164 阅读 · 0 评论 -
前端入门到熟悉day24
js数组 01.js面向对象 <script> //从生活 再到程序 将生活中的实际行动转化成对象 自定义一个对象 万物皆对象 varobj ={name:"章哥",age:18,sex:"男",height:180,skill:"H5,js,css3,vue,mysql",eat:function(str,time){ if(str == "早上"&& ..原创 2019-02-28 20:00:28 · 194 阅读 · 0 评论 -
前端入门到熟悉day20
计时器使用 01数码时钟 02数码时钟charAt 03Date对象 04延时消失 05运动基础 06无缝滚动 07无缝滚动 08无缝滚动左右 09鼠标开启关闭定时器 10左右控制器 01点击事件 onclick 事件会在元素被点击时发生。 02document 03event事件对象 Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状...原创 2019-02-25 17:32:24 · 139 阅读 · 0 评论