响应式网站设计与虚拟改版 进修日记（附代码实现）HTML+CSS+jQuery

本文内容有些为大型企业网站，如有冒犯，需要立马删除的，本人会立马删除，表示对企业的致敬

关于网页制作方面，除了某些jQuery自己没有深入学习到，其他的都是自己思考的一些算法写出来的，还有一些是其他JS特效功能自己没办法实现，只能套用代码进行修改

（其中部分网站都在代码实现的时候进行了一些改动，见谅）

这里先放上一波已经实现网页，并上传到服务器的网站

这里这里↓↓↓↓

1.一群二笔工作室  （980px固定版式）

2.偶屿—手文字 （最大1400px响应式版式）

3.孩之宝NERF （1000px,1200px固定版式）

4.  还在制作中。。。

听说点赞的人都是设计界大佬

关于算法

很多人都不太懂banner动效的一些算法，有些也只是会套用

这里我分享一下这些思路

通常CSS都是拿来修改样式的，如果会一点javas或者jQuery这里你看着会很容易理解

首先说一下banner的左右按钮

毕竟一种效果是有很多种写法的，最普通的算法如下

假设DIV 里面有1张banner图 ，要实现点击切换，先把剩余的图片名字分别为0起 0,1,2,3,4（0代表1）  所以div 里面的放的比如  banner0 ，剩余的就是banner1，banner2，如此类推

然后做下面的公式，这里需要调用jQuery，没有朋友自行下载即可

var  x = 0

$(".banner右按钮").click(function(){         

    if( x < 4){

    x = x+1

    }else{

    x=0

    }

    $("banner img").attr("src","url/banner"+"x"+".jpg")

})

这段代码的意思是如下

声明  x =0        

调用（“类名称  按钮”）.点击事件（功能（）{

    如果（x < 4）{

    判断确实小于4 则： x = x +1

     }否则{

    达到4了，再点击就归零  则：x =0

    }

    

    调用（“类名称  img”）.改变属性（“src链接”，“图片地址，如url/banner ”+运算后数值+“后缀名”）

}）

为什么先声明x = 0 呢？

就是先给个数字，帮忙后面做公式运算 这里的0可以当做banner0 去理解

x = x +1 就是相当于每次点击后做一个判断事件，X确实小于4，就会执行+1

else就是否则的意思，如果X达到4,还要在点击，就是5了，超出了判断中的X<4，就会回归0

至于最后一句，arrt就是改变HMTL 的标签属性，注意，不是CSS，直接改变img src中的链接

记住改变属性时，用的不是HTML的：而是用,分隔，然后引用图片的前半部分，不要给固定数字，而是给他一个  X 运算结果的数值，最后加后缀

简单点，就是把图片链接分隔开了，中间插入数值

 

关于一些算法方面，自己还是研究了一些别的，当然，代码千遍万化不止一种，有兴趣的朋友可以去上面找到做好的网站去看，注意：用chrome浏览器看，F12可以查看到代码

一般我的，jQuery都是直接写在HTML里面的，

具体如下，每个网页都有s cript，里面都有相关备注，有喜欢哪些效果的朋友都可以去查看下

虽然并非专业，希望对你有帮助

下面为开始设计的原型图

第一套

第二套

第三套

第四套

网页日记到此结束，谢谢各位观众姥爷的观看