css3
文章平均质量分 74
小忆(华仔)
这个作者很懒,什么都没留下…
展开
-
前端入门到熟悉day03
01为什么要清除浮动浮动会产生“高度塌陷”02伪元素选择器 :link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :active a:active 选择...原创 2018-12-26 20:04:15 · 151 阅读 · 0 评论 -
前端入门到熟悉day28
01计时器的使用js中计时器重要使用window.setInterval()方法和window.setTimeout()方法,其中setInterval()方法的作用是每隔一段时间执行一次方法,而window.setTimeout()在一段时间内调用函数。setTimeout()方法一般通过调用自身迭代的方式实现计时器。与这两个方法对应的,还有清除这两个函数效果的两个方法,分别是windo...原创 2019-02-28 20:07:36 · 692 阅读 · 0 评论 -
前端入门到熟悉day29
VideoHTML5 中的新属性。属性 值 描述autoplayNew autoplay 如果出现该属性,则视频在就绪后马上播放。controlsNew controls 如果出现该属性,则向用户显示控件,比如播放按钮。heightNew pixels 设置视频播放器的高度。loopNew loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。mutedNew muted 如...原创 2019-02-28 20:08:33 · 161 阅读 · 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 · 718 阅读 · 0 评论 -
前端入门到熟悉day31
Douban-底部导航tabBar微信小程序底部导航Tabbar底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图。对于底部导航栏,小程序上给出的文档要求里面的item最少2个,最多五个。好了,先看看代码:在项目中找到这个文件{“pages”:[“pages/inde...原创 2019-03-18 15:13:56 · 188 阅读 · 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 · 93 阅读 · 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 · 134 阅读 · 0 评论 -
前端入门到熟悉day13
JDM分类页面左右滚动互不影响先设置宽width 高height再overflow-y: scroll;(两边都要设置,不是设置body)bootstrap起步先下载bootstrap源文件,再把源文件引入[(在body标签结束前引入,jquery是大佬,要第一个引入)]看情况把需要的引进,需要图标之类的把bootstrap中的font复制到项目就行container-fl...原创 2019-02-25 17:24:45 · 135 阅读 · 0 评论 -
前端入门到熟悉day14
ui小姐姐把设计稿给你先把静态页面写出来做响应式(rem+js /百分比/栅格化/媒体查询)做/写插件测试没bug上线(网址访问网站)麦子学院官网animate和汉堡菜单完善animate在需要加动画的区域加animated 动画类型(bounceInUp、fadeInUp、fadeInLeft、、、)汉堡菜单data-toggle="collapse" data-targ...原创 2019-02-25 17:26:17 · 142 阅读 · 0 评论 -
前端入门到熟悉day15
后台管理首页(index.html)Toggle navigationMaizi Admin  后台首页  用户管理  内容管理  标签管理admin  前台首页原创 2019-02-25 17:27:15 · 170 阅读 · 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 · 158 阅读 · 0 评论 -
前端入门到熟悉day17
JavaScript组成ECMAScript:解释器、翻译DOM:Document Object ModelBOM:Browser Object Model各组成部分的兼容性(低版本IE),兼容性问题由来简易日历var arr = [];是一个数组对象 var arr = {};是一个对象01变量的类型类型:typeof运算符用法、返回值常见类型:numb...原创 2019-02-25 17:29:21 · 133 阅读 · 0 评论 -
前端入门到熟悉day18
数组操作Array(数组)对象方法方法 描述concat() 连接两个或更多的数组,并返回结果。join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。pop() 删除并返回数组的最后一个元素push() 向数组的末尾添加一个或更多元素,并返回新的长度。reverse() 颠倒数组中元素的顺序。shift() 删除并返回数组的第一个元素slice() 从某个已...原创 2019-02-25 17:30:12 · 125 阅读 · 0 评论 -
前端入门到熟悉day19
DOM高级01表格悬停变色效果02表格悬停变色效果203动态添加表格05动态添加删除表格206表格搜索07表格搜索忽略大小写08search()方法//search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。09search方法检索表格10split//split() 方法用于把一个字符串分割成字符串数组11多关键词搜索...原创 2019-02-25 17:31:03 · 143 阅读 · 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 · 1079 阅读 · 0 评论 -
前端入门到熟悉day26
let和const命令介绍let命令ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。for循环的计数器,就很合适使用let命令。var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefinedlet命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。Const命令const声明一个只读的常...原创 2019-02-28 20:05:39 · 141 阅读 · 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 · 198 阅读 · 0 评论 -
前端入门到熟悉day04
01传统pc商城网页框架头部区域内容区域底部区域Document我是头部我是左边我是右边我是产品区域02多栏布局跟传统的差不多一样,只是差了点样式Document我是头部我是左边我是中间我是右边03云道网页分析布局。使用PS切图工具切图。将切片导出,快捷键ctrl...原创 2018-12-26 20:13:22 · 220 阅读 · 2 评论 -
前端入门到熟悉day05
学成在线(网页)<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>学成在线教育平台-不是每个网站都叫学成在线</title><!-- css初始化文件 -->&l原创 2018-12-26 20:21:13 · 158 阅读 · 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 · 153 阅读 · 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 · 172 阅读 · 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 · 163 阅读 · 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 · 393 阅读 · 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 · 139 阅读 · 0 评论 -
前端入门到熟悉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 · 211 阅读 · 0 评论 -
前端入门到熟悉day02
01文本域和select-optionselect 元素可创建单选或多选菜单。<select&> 元素中的<option>标签用于定义列表中的可用选项。02表格1表格的基本构成元素最少需要三个 table tr td 表格元素的汇总:table:表示表格thead:表示标题行tbody:表示表格的主体tfoot: 表示表...原创 2018-12-26 20:01:37 · 145 阅读 · 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 · 145 阅读 · 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 · 165 阅读 · 0 评论 -
前端入门到熟悉day23
Javascript面向对象面向对象程序设计(简称OOP)是现在最流行的程序设计方法,这种方法有别于基于过程的程序设计方法。在写面向对象的WEB应用程序方面JavaScript是一种很好的选择.它能支持OOP面向过程面向过程专注于如何去解决一个问题的过程步骤。编程特点是由一个个函数去实现每一步的过程步骤,没有类和对象的概念。面向对象专注于由哪一个对象来解决这个问题,编程特点...原创 2019-02-28 19:59:36 · 168 阅读 · 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 · 200 阅读 · 0 评论 -
前端入门到熟悉day20
计时器使用01数码时钟02数码时钟charAt03Date对象04延时消失05运动基础06无缝滚动07无缝滚动08无缝滚动左右09鼠标开启关闭定时器10左右控制器01点击事件onclick 事件会在元素被点击时发生。02document03event事件对象Event 对象Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状...原创 2019-02-25 17:32:24 · 144 阅读 · 0 评论