申请会员ID：zhuke0326

1、申 请 I D：zhuke0326
2、个人邮箱：zhukez5@qq.com研究过程：
   前几天我女朋友（审计学）有一门辅修课结课了，结果，需要我要我帮她制作一个简单的静态网页，我本来打算直接在网上当一个，结果，发现主流一点的，所有的style全部在外置，js，css文件。所有用不了。没办法，我直接用HBuilder，给她制作了一个。（非商用，参考过一些版式）

HTML代码里面就留着网页内容：
charset部分一般使用utf-8，通用，一般不会出现问题。
框架分为两种：
1.class，其实就是表格，把一个网页分成一个一个表格
比如

	标题
	轮播图		广告
	文章

2.div

主页：页面布局采用了6行3列式，因为首页太大截屏有三张。头部是天气，日期等信息，增加实用性，用风景图片做头部背景，更具观赏性。接着是多级导航，多级导航储存内容多，用于头部效果极佳。

下面是焦点图，用轮播，试了好多种方法，最后确定了这个-双层轮播同时进行可以2维图形展现3d效果轮播展示的图片更多，轮播美丽的景色、正常任务和宣传画卷，是网站重要的宣传窗口。

普通导航，可以更容易找到想要的内容，这个是上课讲过的，所以制作起来很容易，以下是css部分代码。

新闻页面经常使用的是列表，这个是上课所讲内容，因为布局问题，我一个div包含两个div来设置。

       .tbxw{                    ------- 通栏div

                            width: 1200px;      

                            height: 304px;

                            margin: 0 auto;

                            border-top: 3px solidseagreen;

                     }

                     .content2{                    ------大div

                            width:1000px;

                            height: 650px;

                            border:1px solid #ccc;

                            margin: 0 auto;

                            overflow: hidden;          -------超出部分不显示

                     }

                     .left1{

                            width:250px;

                            height: 650px;

                            float:left;                 ------左浮动

                            border:1px solid #ccc;

                     }

                     .right2{

                            width: 242px;

                            height: 650px;

                            float: right;               -------右浮动

                            border:1px solid blue;

                     }

                     

                            .right1{

                            width: 500px;

                            height: 650px;

                            float: right;

                            border:1px solid blue;

                     }

                           

                     .all2 {                       --------使ul浮动

                            width: 580px;

                            height: 245px;

                            margin: 0px auto;

                            border: px solid #D9E0EE;

                            float: left;

                     }     

                     .allo{

                            width: 580px;

                            height: 345px;

                            margin: 0px auto;

                            border: px solid #D9E0EE;

                            float: right;

                     }                  

                     .hd {

                            height: 35px;

                            padding-left: 10px;

                            font-size: 30px;

                            color: #0000FF;

                            line-height: 35px;

                            font-family: "宋体";

                     }                  

                     .b1d {

                            list-style-type: none;               ------消除点标记

                            border-top: 1px solid #D9E0EE;

                            padding: 5px 0 0 20px;

                     }                  

因为是静态网页，所以不能把所以代码都放在HTML里，这样也不安全，所以我是大量使用.js和。css文件。

    <script type="text/javascript" src="../js/jssor.core.js"></script>这句代码是在HTML里利用.js文件。

src是非常重要的，因为一开始我发现，只可以在后面加图片，文档，后来我发现不止如此。

比如：<audio src="music/01.mp3" controls="controls" autoplay="autoplay" loop="true" style="display:none"></audio>这我就加入了背景音乐，这样就可以有更好的感官效果。

下面举例一个js文件：

$(document).ready(function() {
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var c = $("#c");
var w,h;
var pi = Math.PI;
var all_attribute = {
num:100, // 个数
start_probability:0.1, // 如果数量小于num，有这些几率添加一个新的
size_min:1, // 初始爱心大小的最小值
size_max:2, // 初始爱心大小的最大值
size_add_min:0.3, // 每次变大的最小值（就是速度）
size_add_max:0.5, // 每次变大的最大值
opacity_min:0.3, // 初始透明度最小值
opacity_max:0.5, // 初始透明度最大值
opacity_prev_min:.003, // 透明度递减值最小值
opacity_prev_max:.005, // 透明度递减值最大值
light_min:0, // 颜色亮度最小值
light_max:90, // 颜色亮度最大值
};
var style_color = find_random(0,360);
var all_element =[];
window_resize();
function start(){
window.requestAnimationFrame(start);
style_color+=0.1;
//更改背景色hsl(颜色值，饱和度，明度)
ctx.fillStyle = 'hsl('+style_color+',100%,97%)';
ctx.fillRect(0, 0, w, h);
if (all_element.length < all_attribute.num && Math.random() <all_attribute.start_probability){
all_element.push(new ready_run);
}
all_element.map(function(line) {
line.to_step();
})
}
function ready_run(){
this.to_reset();
}
function arc_heart(x,y,z,m){
//绘制爱心图案的方法，参数x,y是爱心的初始坐标，z是爱心的大小，m是爱心上升的速度
//爱心向左飘
// x+=m;
//爱心向右飘
// x-=m;
// 爱心向上飘，向下飘换成+
y-=m*10;

ctx.moveTo(x,y);
z*=0.05;
ctx.bezierCurveTo(x,y-3*z,x-5*z,y-15*z,x-25*z,y-15*z);
ctx.bezierCurveTo(x-55*z,y-15*z,x-55*z,y+22.5*z,x-55*z,y+22.5*z);
ctx.bezierCurveTo(x-55*z,y+40*z,x-35*z,y+62*z,x,y+80*z);
ctx.bezierCurveTo(x+35*z,y+62*z,x+55*z,y+40*z,x+55*z,y+22.5*z);
ctx.bezierCurveTo(x+55*z,y+22.5*z,x+55*z,y-15*z,x+25*z,y-15*z);
ctx.bezierCurveTo(x+10*z,y-15*z,x,y-3*z,x,y);
}
ready_run.prototype = {
to_reset:function(){
var t = this;
t.x = find_random(0,w);
t.y = find_random(0,h);
t.size = find_random(all_attribute.size_min,all_attribute.size_max);
t.size_change =find_random(all_attribute.size_add_min,all_attribute.size_add_max);
t.opacity = find_random(all_attribute.opacity_min,all_attribute.opacity_max);
t.opacity_change =find_random(all_attribute.opacity_prev_min,all_attribute.opacity_prev_max);
t.light = find_random(all_attribute.light_min,all_attribute.light_max);
t.color = 'hsl('+style_color+',100%,'+t.light+'%)';
},
to_step:function(){
var t = this;
t.opacity -= t.opacity_change;
t.size += t.size_change;
if(t.opacity <= 0){
t.to_reset();
return false;
}
ctx.fillStyle = t.color;
ctx.globalAlpha = t.opacity;
ctx.beginPath();
arc_heart(t.x,t.y,t.size,t.size);
ctx.closePath();
ctx.fill();
ctx.globalAlpha = 1;
}
}

function window_resize(){
// canvas铺满窗口
w = window.innerWidth;
h = window.innerHeight;
//如果需要铺满内容可以换下面这个
// w=$("body").width();
// h=$("body").height();
canvas.width = w;
canvas.height = h;

}
$(window).resize(function(){
window_resize();
});

//返回一个介于参数1和参数2之间的随机数
function find_random(num_one,num_two){
return Math.random()*(num_two-num_one)+num_one;
}

start();
});

js里面可以很随便

[code]$(document).ready(function() {

论坛大神，可以过吗？我还可以分享其他的

Alice

抱歉，未能达到申请要求，申请不通过