前端开发

2017/4/17

  1 在后台文件中引入一个css文件 比如<link href=””> 有时候会发现引入的不起作用

要看引入的位置 放到block的上面或者下面没有反应  就要调整位置

  2  如果要写手机端 必须要加入meta标签

  3  /htdocs/club/Application/Ucenter/View/default/Config/passowrd页面   调整

http://www.qudaoclub.com/club/ucenter/password这个页面

  4  /htdocs/club/Application/Common/View/default/Public/   

这个文件夹里面有公用的头部和base页面

2017/4/18

一 引用阿里字体图标

  1 下载完成后，必须引入.ttf和.woff文件，接着在代码里 Link href=”iconfont.css”,这个文件不能放入css文件夹，要放到根目录里面，否则引入错误。左边错，右边对。

     

2 在下载后的文件夹里面 demo_unicode.html这个文件里面有相应的代码

3 可以在iconfont.css文件夹里面调整字体的颜色和大小

 

 

在代码里写<iclass="iconfont"></i>  即可

 

二 swiper框架

   轮播图 1 不自动轮播   在底部script文件里面添加autoplay：2500属性

 

          2 不循环       在底部script文件里面添加loop:true属性

三 jquery事件里面有时候判断是否多个动画执行

   有多个div 鼠标移入每个div，要求出现动态效果，则在鼠标移入时做出判断

 $('.list').mouseenter(function(){

if(!$(this).children().is(':animated')){}

}.mouseleave(function(){

})

 

2017/4/19

1 http://www.jq22.com/jquery-info12223   纯css3滑动动画菜单

2 http://www.jq22.com/jquery-info12767   jq商品导航栏菜单

3 http://www.jq22.com/jquery-info12762   jq滑动导航插件

4   http://www.jq22.com/jquery-info12456   bootstrap手风琴菜单

5   http://www.jq22.com/yanshi12121       css3结合jquery侧边导航酷炫展开效果

6   http://www.jq22.com/yanshi11012       jquery导航hover动画效果

2017/4/20

1 移动端调试

  火狐     调试ctrl+shift+m   按住小手(模拟触摸事件  需要重新加载页面)

  Js 事件   距离顶部或者左右端   http://www.cnblogs.com/fnz0/p/5510758.html

  好的网站  http://www.noblesse.com.cn/    手机端和Pc端   鼠标划过图片的特效

            http://readcereal.com/

2三角形

 .arrow-up{
            width:0;
            height:0;
            border-left:30px solid transparent;
            border-right:30px solid transparent;
            border-bottom:30px solid #f00;
        }
        .arrow-right {
            width:0;
            height:0;
            border-top:20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid green;
        }
        .arrow-down {
            width:0;
            height:0;
            border-left:40px solid transparent;
            border-right:40px solid transparent;
            border-top:40px solid #ccc;
        }
        .arrow-left {
            width:0;
            height:0;
            border-top:30px solid transparent;
            border-bottom:30px solid transparent;
            border-right:30px solid #00f;
        }

3上下居中

.con_content .box1 div{

    position:absolute;

    left:50%;

    width:90%;

    top:50%;

    text-align:center;

    transform: translate(-50%,-50%);

}

 

 

4 特效

   记在好的案例杂志网站特效里面

5一个页面如果需要设置背景图 里面加div需要div居中 设置padding

  

 

 

2017/4/21

 

H5小知识  微博http://blog.csdn.net/lee_magnum/article/details/17429613

Swiper选项卡框架

 

 

2017/4/24

1 h5 第一天  6阻止默认  

阻止 document的touchstart 或者 touchmove，可以清除系统默认的回弹

2 h5 第一天   7事件点透

 

2017/4/25

http://www.jq22.com/demo/jquery-MobileNav20160316/

富甲天下 （原）

 

2017/4/26

http://www.bacera.com/       景隽做的

 

http://www.chinazcl.com/#portfolio   景隽做的

 

 

https://www.vantagefx.cn/    景隽做的

 

2017/4/27

http://www.ftdigital.com.cn/   景隽推荐

 

 

2017/4/27

http://www.jq22.com/yanshi8373  页面滚动监听

 

2017/4/28

http://news.baidu.com/   百度新闻侧边栏

 

2017/5/2

1 auto是随内容的高度而撑开的。100%是根据父级元素的高度来决定的

<div style="height:100px;width:200px;">     

  <div style="height:auto;width:100px;float:left;">这个容器的高度是随  里面的内容的高度而定</div>        

 <div style="height:100%;width:100px;float:right;">这个容器的高度为父级的高度，100px</div>

 </div>

 

2 clientHeight    内容可视区域的高度

  offsetHeight = clientHeight + 滚动条 + 边框

  window.document.body.offsetHeight    返回当前网页高度

  window.document.body.offsetWidth     返回当前网页宽度

 

3 手机端第一天： 滑屏事件

 

向下              向上

 

 

 

 

 

   向下：判断上面的距离是否大于0   如果大于0  则出现空白

   向上：用可视区域的高-整个文档的高度    得到一个负值（-80）

         判断如果实际上的文档位置高度（-100）小于-80，则把文档高度定为    -80

4 手机端第二天： 滑屏事件

5   https://www.yiqifin.com  景隽推荐

http://www.lianyun315.com/

2017/5/3

1 写手机端页面   一定要加meta view这句话

2 滑屏事件要注意的：

  A)用style的方式获取外层框的高度 ul的宽度  一个li的宽度 注意类名

  B)如果不定义外层框的高度 图片不会显示出来

  C)touchend 事件时  判断张数（四舍五入）然后判断ul移动的距离

 

 

 

 

2017/5/4

1  Var box=document.getElementById(‘box’);

alert(box.getBoundingClientRect().top);     元素上边距离页面上边的距离alert(box.getBoundingClientRect().right）;   元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom);  元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left);     元素左边距离页面左边的距离

2 rem适配

 A) 写一个函数  sem()并调用  html.style.fontSize=width/16+’px’;

3 横竖屏事件

  window.addEventListener(‘orientationchange’,sem);

  window.addEventListener(‘resize’,sem);

4 音悦台头部固定

 A)html,body:height:100%;overflow:hidden

 B)wrap:overflow:auto

5 如何在hbuilder中安装less插件

http://www.cnblogs.com/zhangans/p/5982240.html  

 

2017/5/5

https://isux.tencent.com/web-app-rem.html    关于rem的解释

http://www.cn7080.com/case/url/45.html    pc端好的网页

2017/5/8

1 布局  

  Script函数里一定要先写$(function(){})

  Meta标签要加

  li:nth-of-type(1)

2 canvas函数里面

 定义画布的高度 以及 绘图环境

 创建img对象  写出路径

 Img加载时 开始画出img

 若还是显示底下背景图  注意层级关系

改变画布的层级顺序  globalCompositeOperation

3 鼠标按下  获取坐标点  开始划线

  鼠标移动  获取坐标点  继续划线

  鼠标放开  获取整个画布的像素点 getImageData(起始原点 最终终点)

  然后宽*高

  For()循环里面  不是allPx.length

Jq动画！   css动画！

animation: name duration timing-function delay

 iteration-count direction fill-mode play-state;

名称   多少秒或毫秒完成  如何完成一个周期（ease,linear）  几秒后动画开始

Infinite   

http://www.html5tricks.com/css3-ribbon-text.html         h5好的效果

http://www.html5tricks.com/css3-sitemap-nav.html       组织架构

Jq 或者 CSS3动画

整理杂志官网上的动画

1 徽章页面

     添加背景图属性的时候  注意 background-size:cover  

    给div添加高度和宽度  （否则图片显示不出来）

元素居中  position:absolute   left:50%  margin-left:-200px;

        按钮特效   旋转

       Zoom:1 当一个容器内元素都浮动后，它的高度将不会随着内部元素高度的增加而增加，所以造成内容元素的显示超出了容器。

图片上弹出框框

  <div class=”col-lg-6”>

            <div class=”layer”><span>fjlsjfljsfljsafjsal</span></div>

        </div>

         .col-lg-6{position:relative;}

         .layer{position:absolute;bottom:5%;left:0;width:100%;text:align-center;}

         .layer span{width:0;height:0;display:inline-block;overflow:hidden;设置字                     体颜色 大小;background:rgba()}

          .col-lg-6:hover span{width:100%;height:auto;animation:show 1s;padding:1em;}

-webkit-@keyframes show{

  0%{scale(0,0)}

          100%{scale(1,1)}

}

          @keyframes show{

           0%{scale(0,0)}

          100%{scale(1,1)}

        }

        

 

 

整理登录注册的js和动画

 

2017/5/9

切图     切片工具  shift+ctrl+alt+s

内联元素 a  span 设宽高不起作用

改变图片大小  可以通过ps  图像  图像大小  改宽度  高度的百分比

 

2017/5/11

http://www.w3cplus.com/css/pure-css-create-masonry-layout.html

网页流式布局

-webkit-column:5;   

break-inside:avoid ;   

-webkit-break-inside:avoid ;

column:5;

 

2017/5/12

§ flex-direction

§ flex-wrap   flex-flow   justify-content   align-items    align-content

§ http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool          flex开发

§ http://wechat-pizzaexpress.cn/phone/index.aspx     手机端披萨

 

2017/5/15

http://www.jq22.com/yanshi7390      CSS3视差滚动实例

2017/5/16

批量加联合会标签  选中  右击  设置单元格格式

 

类型  “<li>”@“</li>”  就可以批量处理

 

.clearfix:after{

    content: "";

    display: block;

    clear: both;

}

&：before{}

引用swiper框架   尽量用swiper.min.js    用swiper.js轮播图左右箭头在360浏览器下失去作用

 

2017/5/17

Websoket    

内联元素 里面不能包含块级元素
http://blog.csdn.net/qiuhuanmin/article/details/50719114

 

 

http://www.divcss5.com/wenji/w596.shtml            关于文字竖着排列

2017/5/18

phpstudy是一个管理服务器的软件，跟编辑器无关，如果想要开发php可以使用netbean、PHPstorm、zendstudio等等

网站和数据库存储在服务器上

客户端浏览器------》请求-----》Apache服务器-----》与php交流------》php动态调用MySQL数据库（增删改查等）

一般的做法是把图片单独放在一个服务器上，把图片的路径存在数据库里。
服务器有很多种的：数据库服务器，Apache（web服务器）等。

 

AJAX 通过在后台与服务器交换少量数据的方式，允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下，对网页的一部分进行更新，通过AJAX，你可以创建更好、更快以及更友好的WEB 应用程序

AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的Web Service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。
XMLHttpRequest 对象方法描述 

 

 

 

http://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/3137180.html   ajax文档

    

1、同步与异步之间究竟有什么不同呢？、2、在什么情况下使用呢？

 同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事
  异步:请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕 1、2、一心一意：当前只能做一件事，其他事情必须等当前的事情完成，才能继续后面的事情。

三心二意：同时可以做多件事情：左手按着空格键，右手可以不断的击打鼠标，眼睛还要同时看着屏幕。

 

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1 创建对象 XMLHttpRequest

2 将请求发送到服务器，使用 XMLHttpRequest对象的 open() 和 send() 方法：

3

 

 

.duo_bg2{

/*border:2px solid red;*/

width:100%;

height:54px;

margin:0 auto;

background-size:100%;

background:url(../img/duo_bg2.png)no-repeat center;

}

注意是center  背景图在div中居中

 

2017/5/23

http://www.jq22.com/jquery-info12351   jQuery HTML5手机端手指滑动上拉加载代码是一款通过jquery实现tab切换和上拉加载更多的效果，适用于手机端页面开发。

下载了图片加载插件

http://www.w3school.com.cn/jsref/jsref_splice.asp   splice的用法

<script type="text/javascript">

 

var arr = new Array(6)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

arr[3] = "James"

arr[4] = "Adrew"

arr[5] = "Martin"

 

document.write(arr + "<br />")arr.splice(2,3,"William")

document.write(arr)

 

</script>

输出

George,John,Thomas,James,Adrew,Martin
George,John,William,Martin

2017/5/24

 

css使文字垂直拉长

 

http://www.hnqss.cn/html/jszx/article-2526.html

 

好网站（朱雨霄）

http://www.publicis.com/

https://www.ultimavip.cn/index.html(景隽)   很不错的网站

http://www.ssgg.com.cn/

  渠道顶部特效         (景隽)

 

 

2017/5/25

background-attachment 属性

   设置背景图像是否固定或者随着页面的其余部分滚动。

 

    Scroll   背景图像会随着页面其余部分的滚动而移动

fixed当页面的其余部分滚动时，背景图像不会移动

Inherit应从父元素继承  backgound-attachmenthttps://www.fc18.com.cn/index.html

 

https://jr.163.com    富聪金融

https://www.fc18.com.cn/index.html   网易金融

2017/5/26

杂志官网  首页

/htdocs/phpcms/templates/default/content/

 

2017/5/26

双击图层  颜色叠加  可以改变色值

2017/5/27

 

 

处理图片的办法   当图片给的宽度是1500  高度是850的时候

在超大屏幕下  让它左右是留白   所以只能给固定宽度  固定高度

在中等屏幕下   让它百分百显示  图片自由

2017/5/31

数组定义：简而言之就是一组有序的数据集合，其索引为从0开始且自然增长的整数，其元素值可以是任何js数据！并且包含一个名为length的属性，该属性表示数组元素的个数！

Var array=[1,2,3];

Console.log(arr[0]);

Console.log(array[‘length’]);

 

对象定义：js中对象类型为一组无序的由键->值组成的数据集合，其元素的键名和值都可以自定义！