2016-NJUPT-网页设计大赛总结

最新推荐文章于 2023-12-06 10:11:58 发布
最新推荐文章于 2023-12-06 10:11:58 发布
阅读量1k 收藏
点赞数 1
分类专栏： web前端 文章标签： html5 网页设计 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/why850901938/article/details/53708986
版权
本文是2016年NJUPT网页设计大赛参赛者的经验总结，探讨了如何使用HTML5的Canvas画图，页面缓动跳转的实现，以及利用CSS3动画和HTML5 Dataset实现自定义信息储存。通过手动编写网页，作者在实践中学习了前端开发的各种技巧，并反思了产品开发版本管理的重要性。
摘要由CSDN通过智能技术生成

Catalog :

— 总体感想
— 如何用canvas画图
— 关于页面缓动跳转的探索
——- CSS3动画
——- 缓动函数
— 用HTML5自定义属性Dataset实现自定义信息储存
— 从老司机那里学到的产品开发版本问题
— 后期学习：
——- 自适应调节问题

总体感想

因为决定以后做前端方向的工作，所以把参加这次比赛的初衷确定为学习网页搭建的基本流程，和小伙伴一起决定不使用UI框架，手撸了一个网页出来，网页内容是天文社团的主页，但是问题同样严重，遇到不少坑，也想了不少办法解决，最后还是差强人意，但是对我来说经验的积累和总结更重要，接下来同样要学习更多的姿势，不管怎样感谢队友的包容和努力，我在这里对这次比赛学到的东西进行总结，再加上结束后学习到的一些东西，包括自适应和CSS的布局；然后接下来可能会把学习重点放到JS上。

如何用canvas画图

使用canvas的初衷是我们打算用好看的动画作为背景，后来因为掉帧严重，优化不来放弃这个方案，但是同样在其中学习到用canvas画图的乐趣。

最开始我们实现的是这样背景效果；
实现JS代码如下：

var context;
var starsnum = 150; //星星数量
var mouse_pre = {
    x: 0,
    y: 0
};
var mouse_cur = {
    x: 0,
    y: 0
};

var flag = true;
var starArr = []; //储存每一个星星的位置
var movArrX = []; //储存移动变化的因子
var movArrY = [];

function random(lo, hi) { //随机获得从lo-hi的整数
    return Math.floor(Math.random() * (hi - lo + 1) + lo);
}

function init() { //初始化
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.style.cssText = "top: 0";
    for (var i = 0; i < starsnum; i++) {
        x = random(0, canvas.width );
        y = random(0, canvas.height);
        r = 1;
        var newStar = drawCirle(context, x, y, r);
        starArr.push(newStar);
        var mov_arrX = random(-1,1);
        var mov_arrY = random(-1,1);
        while(mov_arrX == 0 || mov_arrY == 0){
            mov_arrX = random(-1,1);
            mov_arrY = random(-1,1);
        }
        movArrX.push(mov_arrX/5);
        movArrY.push(mov_arrY/5);
    }
    for (var j = 0; j < starsnum; j++) {
        for (var k = j; k < starsnum; k++) {
            var bx = starArr[j].centerX;
            var by = starArr[j].centerY;
            var cx = starArr[k].centerX;
            var cy = starArr[k].centerY;
            var dis = Math.sqrt(Math.abs(cx - bx) * Math.abs(cx - bx) + Math.abs(by - cy) * Math.abs(by - cy));
            if (dis < 0.045 * (canvas.width + canvas.height) / 2) {
                drawLine(context, bx, by, cx, cy);
            }
        }
    }
    // window.addEventListener('mousemove', mouseMove, false); //鼠标移动监控

    render();
}

// function mouseMove(event) { //鼠标移动事件
//  // if (flag) {
//  //  mouse_pre.x = event.screenX;
//  //  mouse_pre.y = event.screenY;
//  //  flag = false;
//  // }
//  mouse_cur.x = event.screenX;
//  mouse_cur.y = event.screenY;
//  render();
//  mouse_pre.x = mouse_cur.x;
//  mouse_pre.y = mouse_cur.y;
// }

function render() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    // dx = mouse_cur.x - mouse_pre.x;
    // dy = mouse_cur.y - mouse_pre.y;
    for (var i = 0; i < starsnum; i++) {
        var changeStar = starArr[i];
        changeStar.centerX += movArrX[i];
        changeStar.centerY += movArrY[i];
        if(changeStar.centerX>canvas.width || changeStar.centerX < 0){
            movArrX[i] = -movArrX[i];
        }
        if(changeStar.centerY>canvas.height || changeStar.centerY < 0){
            movArrY[i] = -movArrY[i];
        }
        drawCirle(context, changeStar.centerX, changeStar.centerY, changeStar.radius);
        starArr[i] = changeStar;
    }
    for (var j = 0; j < starsnum; j++) {
        for (var k = j; k < starsnum; k++) {
            var bx = starArr[j].centerX;
            var by = starArr[j].centerY;
            var cx = starArr[k].centerX;
            var cy = starArr[k].centerY;
            var dis = Math.sqrt(Math.abs(cx - bx) * Math.abs(cx - bx) + Math.abs(by - cy) * Math.abs(by - cy));
            if (dis < 0.045 * (canvas.width + canvas.height) / 2) {
                drawLine(context, bx, by, cx, cy);
            }
        }
    }
    window.requestAnimationFrame(render);

}

function drawCirle(ctx, x, y, r) { //在(x,y)处画半径为r的圆
    function Circle(x, y, r) {
        this.centerX = x;
        this.centerY = y;
        this.radius = r;
    }
    var circle = new Circle(x, y, r);
    ctx.beginPath();
    ctx.arc(circle.centerX, circle.centerY, circle.radius, 0, Math.PI * 2, true);
    ctx.fillStyle = "rgba(255,255,255,1)";
    ctx.fill();
    ctx.closePath();
    return circle;
}

function drawLine(ctx, bx, by, cx, cy) { //用直线把(bx,by)到(cx,cy)连起来
    function Line(bx, by, cx, cy) {
        this.beginX = bx;
        this.beginY = by;
        this.closeX = cx;
        this.closeY = cy;
    }
    var line = new Line(bx, by, cx, cy);
    ctx.beginPath();
    ctx.moveTo(line.beginX, line.beginY);
    ctx.lineTo(line.closeX, line.closeY);
    ctx.stroke();
    ctx.lineWidth = 1;
    ctx.strokeStyle = "rgba(255,255,255,0.3)"
    ctx.closePath();
}

init();

这里我简单对代码进行分析，首先是starsnum表示星星的总数，再用starArr[] 对象数组来储存每个星星的位置，因为星星是自己移动的所以给星星一个初始的移动距离，用movArrX[]和movArrY[] 分别表示在X,Y方向上的移动因子，注意在浏览器窗口中坐标轴的位置，以左上角为坐标原点，向下为Y轴正半轴，向右为X轴正半轴；接下来是初始化函数，在初始化函数中用context = canvas.getContext(“2d”);来新建一个画布，window.innerWidth 和 window.innerHeight分别表示浏览器的宽高；然后随机星星的位置，半径为1，调用drawCirle()函数来画出一个星星；
在画星星的函数中beginPath()和closePath()表示画图的操作写在里面，arc()表示画出弧，然后在参数中Math.PI * 2表示弧的长度为圆的周长，也就是画出一个圆，然后用fillStyle和fill()填充圆，这样一个星星就画好了；
星星画好后把这个星星放入starArr数组中，再随机mov_arrX 和 mov_arrY 每个星星初始时在X,Y方向上的每次的移动因子，可以通过这个来控制移动的速度快慢；
之后是连线，连线就是在两个点的距离小于某个值时把两个点连线，关于判断两个点的距离我就不说了，我说说调用的drawLine()画线函数，同画星星那样，用beginPath()和closePath()表示画图操作区域，moveTo()和lineTo()表示线起点位置和终点位置，stroke()表示开始画线，strokeStyle 表示样式，这样线也连起来了；
下面是最重要的render()函数，在函数中我们重新画整幅图，把每个星星的位置加上他们的移动因子，就是他们接下来的位置，然后重新判断是否连线，然后用window.requestAnimationFrame(render)回调render(),这样实现连续的作画，关于为何使用requestAnimationFrame()而不是使用setTimeout()可以参见这篇博客 主要是因为浏览器的显示频率即绘制频率和requestAnimationFrame()同步，而setTimeout()需要自己调整，很容易出问题，最开始就是这么用的导致掉帧严重，就舍弃了这个方案，也还有队友博客中提到的每次都重画整个画布会有较大的资源占用。

除了这个背景我们还看了这里的demo5和demo7这种背景，但是队友觉得不好看也就没用上，其中画图的思路大同小异，就看自己的创造力了，还是相当有难度的，特别是我看到demo4是一个3D的效果，以后或许会认真看看，学习学习；

关于页面缓动跳转的探索

因为没打算用UI框架，所以关于缓动这一块可是想了好久，首先是元素缓动使用CSS3动画，也就是在CSS里面绑定变化，然后用@keyframes 规则创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

CSS中绑定，写上绑定哪个和动画时间：

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
-o-animation: myfirst 5s;   /* Opera */
}

写上变化的样式和怎么变化：

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

其中还可以调整动画的方式，比如：

linear  动画从头到尾的速度是相同的。
ease    默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。    
ease-out    动画以低速结束。    
ease-in-out 动画以低速开始和结束。

或是自定义贝塞尔曲线：

cubic-bezier(n,n,n,n)   在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

除了元素缓动，我们还思考如何实现，滑轮滚动一下自动滑动到下一页，在这里使用CSS3动画就不太好办了，所以我们找到了缓动函数Tween()；其实缓动的思路可以参照之前说的画布画图，也就是通过回调函数重新绘制整个页面，再通过特定的更新函数来调整缓动的方式，也就是CSS3动画里的几种动画方式都有对应的函数实现。

这是Tween()的代码：

/* tween js
 * t: current time（当前时间）
 * b: beginning value（初始值）
 * c: change in value（变化量）
 * d: duration（持续时间）
 */
var Tween = {
    Linear: function(t, b, c, d) {
        return c * t / d + b;
    },
    Quad: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t + b;
        },
        easeOut: function(t, b, c, d) {
            return -c * (t /= d) * (t - 2) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t + b;
            return -c / 2 * ((--t) * (t - 2) - 1) + b;
        }
    },
    Cubic: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t + 2) + b;
        }
    },
    Quart: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return -c * ((t = t / d - 1) * t * t * t - 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
            return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
        }
    },
    Quint: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
        }
    },
    Sine: {
        easeIn: function(t, b, c, d) {
            return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
        },
        easeOut: function(t, b, c, d) {
            return c * Math.sin(t / d * (Math.PI / 2)) + b;
        },
        easeInOut: function(t, b, c, d) {
            return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
        }
    },
    Expo: {
        easeIn: function(t, b, c, d) {
            return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
        },
        easeOut: function(t, b, c, d) {
            return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if (t == 0) return b;
            if (t == d) return b + c;
            if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
            return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
        }
    },
    Circ: {
        easeIn: function(t, b, c, d) {
            return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
        },
        easeOut: function(t, b, c, d) {
            return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
            return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
        }
    },
    Elastic: {
        easeIn: function(t, b, c, d, a, p) {
            var s;
            if (t == 0) return b;
            if ((t /= d) == 1) return b + c;
            if (typeof p == "undefined") p = d * .3;
            if (!a || a < Math.abs(c)) {
                s = p / 4;
                a = c;
            } else {
                s = p / (2 * Math.PI) * Math.asin(c / a);
            }
            return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        },
        easeOut: function(t, b, c, d, a, p) {
            var s;
            if (t == 0) return b;
            if ((t /= d) == 1) return b + c;
            if (typeof p == "undefined") p = d * .3;
            if (!a || a < Math.abs(c)) {
                a = c;
                s = p / 4;
            } else {
                s = p / (2 * Math.PI) * Math.asin(c / a);
            }
            return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
        },
        easeInOut: function(t, b, c, d, a, p) {
            var s;
            if (t == 0) return b;
            if ((t /= d / 2) == 2) return b + c;
            if (typeof p == "undefined") p = d * (.3 * 1.5);
            if (!a || a < Math.abs(c)) {
                a = c;
                s = p / 4;
            } else {
                s = p / (2 * Math.PI) * Math.asin(c / a);
            }
            if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
        }
    },
    Back: {
        easeIn: function(t, b, c, d, s) {
            if (typeof s == "undefined") s = 1.70158;
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        },
        easeOut: function(t, b, c, d, s) {
            if (typeof s == "undefined") s = 1.70158;
            return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
        },
        easeInOut: function(t, b, c, d, s) {
            if (typeof s == "undefined") s = 1.70158;
            if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
            return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
        }
    },
    Bounce: {
        easeIn: function(t, b, c, d) {
            return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b;
        },
        easeOut: function(t, b, c, d) {
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
            } else {
                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
            }
        },
        easeInOut: function(t, b, c, d) {
            if (t < d / 2) {
                return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
            } else {
                return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
            }
        }
    }
}
Math.tween = Tween;

可以直接在需要调用的时候传入参数进行使用。

function to_right() { //向右缓动

    var wid = wrapper.offsetWidth;
    console.log(wrapper.offsetWidth);
    var after = document.body.clientWidth * 0.08;
    console.log(document.body.clientWidth);
    var start = 0;
    var during = 10;
    tween_to_right = function() {
        start++;
        var change = Tween.Quart.easeOut(start, wid, after - wid, during);
        wrapper.style.width = change + "px";
        if (start < during)
            requestAnimationFrame(tween_to_right);
        else {
            pic_to_left.style.display = "block";
            pic_to_right.style.display = "none";
            wrapper.style.backgroundImage = "none";
        }
    };
    tween_to_right();
    box.style.display = "none";
}

这里是我使用到一段元素向右缓动的函数，可以看到同样是使用到了requestAnimationFrame() ，这里对需要改变的元素进行累计，这里就是宽度，然后每次更新后进行回调，从而实现缓动的效果。调用语句是Tween.Quart.easeOut(start, wid, after - wid, during);；

用HTML5自定义属性Dataset实现自定义信息储存

这里使用HTML5自定义属性Dataset实现自定义信息储存
这里写图片描述

就是记录上方的按钮点击的信息，记录对应按钮的开关。我们看着代码进行讲解；

<input type="button" class = "active" id = "btn1" data-index = "1"  />
<input type="button" class = "before_active"  id = "btn2" data-index = "0"/>
<input type="button" class = "before_active" id = "btn3"  data-index = "0" />
<input type="button" class = "before_active" id = "btn4"  data-index = "0" />

可以看到这里有四个按钮，每个按钮有对应的id，和初始时他们的类分别为 active 表示选中这个按钮的CSS，before_active 表示不选中这个按钮CSS，还有就是我这边想到的用HTML5自定义属性Dataset。先简单介绍下Dataset 当然也可以参考大牛的博客，data-前缀用来储存你想储存数据，用dataset.前缀 在JS中来取到数据。
示例：

<div id="day2-meal-expense" 
  data-drink="coffee" 
  data-food="sushi" 
  data-meal="lunch">¥20.12</div>
var expenseday2 = document.getElementById('day2-meal-expense');  
var typeOfDrink = expenseday2.dataset.drink;

这里的typeOfDrink就是”coffee”

接下来我说说我是怎么用它实现储存信息的。
这里是JS代码：

var box = document.getElementById('box');
var input = box.getElementsByTagName('input');
var div = box.getElementsByTagName('div');
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");

for (var i = 0; i < input.length; i++) {
    input[i].index = i;
    input[i].onclick = function() {
        for (var i = 0; i < input.length; i++) {
            input[i].className = 'before_active';
            div[i].style.display = 'none';
        };
        this.className = 'active';
        div[this.index].style.display = 'block';
        if (this.index == 0) {
            wrapper.style.backgroundColor = "rgba(180,151,90, 0.3)";
            btn1.dataset.index = 1;
            btn2.dataset.index = 0;
            btn3.dataset.index = 0;
            btn4.dataset.index = 0;
        } else if (this.index == 1) {
            wrapper.style.backgroundColor = "rgba(0,128,128,0.3)";
            btn1.dataset.index = 0;
            btn2.dataset.index = 1;
            btn3.dataset.index = 0;
            btn4.dataset.index = 0;
        } else if (this.index == 2) {
            btn1.dataset.index = 0;
            btn2.dataset.index = 0;
            btn3.dataset.index = 1;
            btn4.dataset.index = 0;
            wrapper.style.backgroundColor = "rgba(13,37,76,0.3)";
        } else if (this.index == 3) {
            btn1.dataset.index = 0;
            btn2.dataset.index = 0;
            btn3.dataset.index = 0;
            btn4.dataset.index = 1;
            wrapper.style.backgroundColor = "rgba(197,195,214,0.3)";
        }
    };
};

可以看到当我们注册点击事件时，对当前的index进行了判断，然后用dataset.index修改信息的值，初始时是 1 0 0 0 当点击到谁就把其值修改为 1 其他修改为 0 表示开关，这样就对当前状态进行了记录，我在接下来就用这些信息进行缓动操作，以判断当前默认页面的值。所以也算极大的方便操作，特别妙的一种方法，值得学习！

从老司机那里学到的产品开发版本问题

因为根本没有工程相关的经验，这次也是两眼一抹黑，也是我比较大的问题，最后结束时我的文件夹里有各种版本的代码，自己都有点懵逼。。。如何高效的和别人合作，学习相应的项目维护和工程开发流程至关重要，在快结束时有老司机给我们讲了一下如何维护产品开发版本，我也在这里总结下，首先是一个master 分支，表示当前最完善的也是上线的版本，其他人从这个master分支fork出去进行对应的新功能的添加，如果有很多人同时对着这个功能进行添加或修改，那么在这个功能维护一个主分支，其他在这个主分支上进行修改和添加，当这个功能的所有冲突解决和完善后，在把这个分支和到主master上，这样就实现了一个新功能的上线和更新；在这次项目中，我是完全被这个问题搞懵了，主要是我们有两个人同时在做某个功能，最后用了完全不同的方法实现，各自各自的问题，或是意见起了冲突，而且因为不了解对方的方法，所以也没法解决冲突，我就放弃了这个功能，或是队友放弃，全部让一个人去做了，这样导致了时间的浪费和人力的浪费，也让人觉得不甘心啥的，功劳白费啥的。所以这也是今后做功能和分工需要注意的地方。

后期学习

下来后学着重学习了一些CSS上的东西，有CSS的自适应调节和布局，相关的博客已经很多了，这里我也简单提一提。

自适应调节

自适应在网页设计之初就需要思考好应该怎么做，不要等到网页写好后再来改，有时这样是很痛苦的，总结学习到的几点；
一. 允许网页宽度自动调整： 
  在网页代码的头部，加入一行viewport元标签。
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width"/> 
  viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 
二. 不使用绝对宽度 
   由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度： width:xxx px; 
   只能指定百分比来定义列宽度： width: xx%;
   或者： width:auto;
   或者：使用最大宽度和最大高度max-width,max-height;
三. 相对大小的字体
  字体也不能使用绝对大小（px），而只能使用相对大小（em）。 
  或是使用vw相对于视口的宽度。视口被均分为100单位的vw，这样字体是可以跟随窗口大小变化的。
四. 流动布局（fluid grid） 
  "流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。 另外，绝对定位（position: absolute）的使用，也要非常小心。
五. "自适应网页设计"的核心，就是CSS3引入的Media Query模块

 @media screen and (max-device-width: 400px) { 
　　　　.column { 
　　　　　　float: none; 
　　　　　　width:auto; 
　　　　} 
　　　　#sidebar { 
　　　　　　display:none; 
　　　　} 
　　}

上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。

这次比赛收获良多，也暴露出不少问题，总之还是需要一步一个脚印的走吧！

以上仅代表个人观点，有错还望指出！

这里写图片描述

SUKJA：
http://www.pixiv.net/member.php?id=4889903

PrConstantin
关注
专栏目录
网页设计大赛
06-27
北大青鸟的网页设计大赛作品,费了不少心血
web大赛
03-05
博文链接：https://wujiekangyun.iteye.com/blog/201735
网页设计大赛总结
u012925323的博客
12-09 2270
历时一个月的网页设计大赛终于结束了，虽然这次答辩过程中服务器直接出了问题，导致网页不能访问，但是很我们队最终还是获得了二等奖，说实话，我对我自己表现很失望，非常失望。首先我说一下失望的原因吧，第一就是上去的时候怯场；第二就是网页奔溃了之后就完全乱套了，不知道说什么，然后一边等网页刷新，一遍扯与网站无关的事情（导致网站不能访问的原因之类的）；第三等问题解决之后再上去答辩，这时候又不知道怎么调电脑的分辨
网页制作总结
qq_39682463的博客
08-01 919
七月三十一日 ##第一次当当网制作总结：## 1.网页架构观察。 2.大框架搭建（head,center,footer,注意用border把边框画出来，方便修改和观察。） 3.设置好大框架基础参数（margin，height，width.float） 4.小框架搭建（div之类根
网页设计大赛比赛项目
05-20
网页设计大赛比赛项目 网页设计作品 欧洲旅游为主题 很好的作业，图片精美，包含欧洲的很多美景，适合学生交网页设计的作业
毕业论文matlab代码-paper-matlab-njupt-master:纸-matlab-njupt-master
05-28
paper-matlab-njupt 研究生毕业论文的matlab代码 整个代码结构分三个部分：ensemble-obj、ensemble-out、local。 其中ensemble-obj是基于集成目标干扰的特征选择算法。是FWELL、FWELL-OBJ(基于目标干扰的特征选择...
《JAVA课程设计》--NJUPT 南京邮电大学 Java程序设计课程大作业--跳一跳游戏小程序.zip
最新发布
04-03
本人十余年JAVA从业经验，精通JAVA高可用、分布式、高并发系统架构设计。有志于做JAVA职业规划、技术提升的可与我联系，交个朋友~ 本人十余年JAVA从业经验，精通JAVA高可用、分布式、高并发系统架构设计。有志于做...
南京邮电大学本科生毕业设计Latex模板-NJUPT-Bachelor.zip
11-07
南京邮电大学为本科毕业生提供了一套精良的LaTeX模板，名为NJUPT-Bachelor，旨在帮助学生高效、规范地完成毕业设计的撰写工作。LaTeX是一种基于TeX的排版系统，尤其适合处理数学公式、科技论文和专业文档。在这款...
积分管理系统java源码-NJUPT-AP-Free-Exams:南京邮电大学应用物理系专业课资料
06-06
NJUPT-CS-Free-Exams 南京邮电大学应用物理学历年考试资料。 受 和 等项目启发，我们决定将南京邮电大学应用物理学专业的历年资料整理出来，以利后人。上述两项目对本资料集有重要影响，在这里向他们表示感谢。 * ​...
太平洋网络java笔试题-NJUPT_CS_Guideline:NJUPTCS新手指南
06-13
太平洋网络java笔试题 计算机柚子指北 本文旨在向计算机相关专业的柚子，在本科期间的学习、竞赛和社团生活提供建议，并给出相关的资料。 请在 获取最新版本 涉及的方面分为： 课业学习 技术学习 ...
校园网页大赛——计算机学院官网
01-03
校园网页大赛前端页面设计。主要包括六个页面设计，囊括学院官网的基本内容。首页导航栏采用的是二级标题，便于用户修改和扩展，代码简介明了。配色方面可根据学院所在学校进行修改，可拓展性较强，欢迎大家采用，谢谢！
学生网页制作比赛优秀作品
04-20
学生网页制作比赛优秀作品,给网页入门的人参考一下.
我的网页设计大赛参赛作品
03-23
“一带一路”主题广西高校网页设计大赛，简易静态网页代码
前端组件开发大赛，约吗？
中兴开发者社区
11-03 1789
点击上方“中兴开发者社区”，关注我们 每天读一篇一线开发者原创好文 你想挑战自己挑战别人最新最前沿的前端技能吗？ 你想学习正规的angular组件是如何开发的吗？ 你想利用业余时间赚点零花钱吗？ 那就快来报名参加第二次前端组件开发大赛吧！ 本届大赛将聚焦在Jigsaw组件的开发(点击阅读原文查看详情）。 既可以以团队形式报名参赛，也可以以个人名义报名参赛。
java web 竞赛_有什么值得推荐的 Java、Web 练手项目？
weixin_42512699的博客
02-24 1168
“练手项目”是Java小白成长史中必要的环节，合适的项目需要同时达到知识总结、技术整合及业务积累等方面的作用。小白的成长是需要一个递进的过程的(正如软件项目的敏捷式开发，每一次迭代都是一次革新和升级)，以下根据小白进阶的过程给出一些项目选型的建议(供参考)：1. 单层项目技术点：Java语言基础、数据库基础(MySQL)、web前端(HTML/CSS/JS)、JSP、JDBC项目选型：图书管理系统...
网页设计大赛第五天
MrChenxiaoshuai的博客
11-20 300
网页设计大赛第五天
html网页比赛演讲稿,英语比赛演讲稿
weixin_42515842的博客
06-17 220
英语比赛演讲稿“Diane, can you speak a little louder, please?” That’s what my teacher said to me on the first day of school. I almost burst into tears as so many students turned to watch me sitting down in th...
html网页比赛演讲稿,故事大王比赛的演讲稿范文（精选5篇）
weixin_35012535的博客
06-17 575
故事大王比赛的演讲稿范文(精选5篇)演讲稿特别注重结构清楚，层次简明。在不断进步的社会中，接触并使用演讲稿的人越来越多，那么你有了解过演讲稿吗？下面是小编帮大家整理的故事大王比赛的演讲稿范文(精选5篇)，欢迎阅读与收藏。故事大王比赛的演讲稿1大家好，我叫陈一洵，是一个特别爱干净的小女孩，每天啊，要用好多好多的纸巾。所以，奶奶就给我取了个雅号叫——“纸巾公主”。但有一天，爸爸对我说，一洵，以后你要少...
终于来啦！PR模板网剪辑师导航上线，终于不用“东奔西跑”打开多个网址了~
qq_16853349的博客
12-06 693
目前包含：创作平台、字幕配音、文案剧本、软件工具、录屏截屏、字体下载等模块，后续会更新(增加)更多优质内容链接，主打一个实用方便。如果你有好的网站想推荐，欢迎评论哦！好在网址导航它来了，这是专门为剪辑师整理的宝藏网址导航页面。千呼万唤始出来，PR模板网导航终于上线了！
NJUPT课程大作业--Java跳一跳游戏开发详解
资源摘要信息:"NJUPT 南京邮电大学 Java程序设计课程大作业--跳一跳游戏小程序.zip" NJUPT 南京邮电大学的“Java程序设计课程大作业--跳一跳游戏小程序.zip”文件涉及了多个与Java游戏开发相关的知识点，具体包括：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值