哎呀呀，做了接近一个月的答辩作品终于答辩完啦，心里很开心就是了；诺，你看我这不是跑过来总结我的答辩了嘛，作品整体是一个以购物为主题的网站，大致风格比较简约没有一般商业网站那么拥挤的感觉，但是呢内容又比较少；用的css<div>布局，结合boostrap的网格系统做的响应式，用了一些boostrap和jq里面的框架；使用了一些hover和动画效果，加了一些好玩的js特效。这是第一次自己从设计到完成一整个网站的前端，有几点需要提醒一下的：
首先就是文件夹的放置，想起我刚开始做的时候，简直乱的可怕，后来在看了我师傅的文件夹的分类和摆放以后重新整理了下，感觉用这个层次来整理还不错，很方便找文件。
然后就是关于boostrap网格系统的使用，我是直接下载的网上的文件包，然后<link>调用的，如果引用线上的boostrap的话那就一定要在有网的环境下了；不得不说使用起来着实方便，直接去改边距为你想要的就可以了，但是一定要注意啊，网格系统里面自带box-sizing，会使一些盒子在用的时候被挤来挤去的，这里推荐一个链接：http://blog.sina.com.cn/s/blog_877284510101kt87.html
好了，开始说我的网页里面的好玩的东西：
1，点击特效的实现，说起这个呀，是在一个学姐的博客里面看到了这个效果当时就觉得很有意思，后来偶然看到我师傅也做了这个特效我便去偷学了来，其实原理也很简单啦，首先给整个html，body设置点击函数，定义随机运动的函数，因为我是直接输出的一些符号所以需要设置颜色，然后考虑显现在最顶层设置一下Z-index，设置点击点左边10px上面20px出产生图片，图片大小也是用随机函数Math.random()产生一个随机0~1之间的函数根据需要+ -像素就可以了；图片消失是根据高度增加而改了图片的透明度，透明度为零时图片消失。
完整代码：
onload = function() {
var $html = document.getElementsByTagName("html")[0];
var $body = document.getElementsByTagName("body")[0];
$html.onclick = function(e) {
var click_cnt = Math.round(Math.random()*10);//Math.round 四舍五入，Math.random()产生0~1之间的一个随机数；
var $elem = document.createElement("b");
$elem.style.color = "#FF3E96";
$elem.style.zIndex = 9999;
$elem.style.position = "absolute";
$elem.style.select = "none";
var x = e.pageX;
var y = e.pageY;
$elem.style.left = (x - 10) + "px";
$elem.style.top = (y - 20) + "px";
clearInterval(anim);
var emoji = new Array("❤","☆","☆","★","★","♡","♪","♬","☆","☆","☆");
$elem.innerText = emoji[click_cnt];
$elem.style.fontSize = Math.random() * 10 + 5 + "px";
var increase = 0;
var anim;
setTimeout(function() {
anim = setInterval(function() {
if (++increase == 150) {
clearInterval(anim);
$body.removeChild($elem);
}
$elem.style.top = y - 20 - increase + "px";
$elem.style.opacity = (150 - increase) / 120;
}, 8);
}, 70);
$body.appendChild($elem);
};
};2.回到顶部，由于网页有时候主页做的比较长嘛，所以用个回到顶部的特效是很有意思的，再给回到顶部的图片设置一个动画可以成网页的一个亮点了，这次我的回到顶部运用了下滚动监听,设置了滑动小于100px时图片透明度的改变，我是把图标固定在右下角底部了；对了，关于回到顶部的图标这里推荐 阿里的矢量图标库 里面的图标齐全，好用而且不要钱：http://www.iconfont.cn/.
完整代码：
<div id="top" style="position: fixed;bottom: 0;right: 0;z-index: 1000000">
<a href="buy.html"><img src="img/返回顶部.png" width="80px" height="80px"></a>
</div>
<script>
$(document).ready(function(e) {
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){ //大于100行才出现图片
$("#top").fadeIn(1500); //大于1500行时图片慢慢透明显示
}
else{
$("#top").fadeOut(1500); //大于1500行时图片慢慢透明消失
}
});
//当点击跳转链接后，回到页面顶部位置
$("#top").click(function(){
$('body,html').animate({scrollTop:0},1000);//1s完成回到顶部
return false;});
});
});
</script>3.星级评分，这个在一般的购物网页中比较常见，我是用两张图片的转化来实现的，一张有颜色的一张没有颜色的实现点击切换；直接奉上代码。
完整代码：
<div id="QuacorGrading" style="margin:20px 12px 0 60px;padding-left: 10%;"><strong style="font-size: 20px;">评分</strong>
<input name="1" type="button" />
<input name="2" type="button" />
<input name="3" type="button" />
<input name="4" type="button" />
<input name="5" type="button" />
<span id="QuacorGradingValue"><b><font size="5" color="#fd7d28" >0</font></b><span style="font-size: 15px;">分</span></span>
</div>
<script type="text/javascript">
function buyNum(num){
function $(id){
return document.getElementById(id);
}
var numValue = $("numValue");
if (num) {
numValue.innerHTML =numValue.innerHTML - 0 + 1;
}
else if (numValue.innerHTML > 1) {
numValue.innerHTML -= 1;
}
}
var GradList = document.getElementById("QuacorGrading").getElementsByTagName("input");
for(var di=0;di<parseInt(document.getElementById("QuacorGradingValue").getElementsByTagName("font")[0].innerHTML);di++){
GradList[di].style.backgroundPosition = 'left center';
}
for(var i=0;i < GradList.length;i++){
GradList[i].onmousedown = function(){
for(var Qi=0;Qi<GradList.length;Qi++){
GradList[Qi].style.backgroundPosition = 'right center';
}
for(var Qii=0;Qii<this.name;Qii++){
GradList[Qii].style.backgroundPosition = 'left center';
}
document.getElementById("QuacorGradingValue").innerHTML = '<b><font size="5" color="#fd7d28">'+this.name+'</font></b>分';
}
}
</script>因为有答辩要做啊，我的暑假生活就充实不少呢，看了不少乱七八糟的东西，东学学西看看的，这三个内容加在网页里面感觉会生动不少。