36. 大学生HTML期末大作业 ―【高端炫酷的IT网络公司网页】 Web前端网页制作 html css js

             

             

             

             

…

2.CSS

代码如下（节选示例）：

@charset “utf-8”;

.dede_pages {

    text-align: center;

    display: block;

    width: 100%;

    max-width: 800px;

    margin: 0px auto 20px;

    overflow: hidden;

}

.dede_pages ul {

    padding: 9px 0px 9px 16px;

    text-align: center;

}

.dede_pages ul li {

    float: left;

    font-family: Tahoma;

    line-height: 28px;

    margin-right: 6px;

    padding: 0px 8px;

    list-style: none;

    border: 1px solid #ccc;

}

.dede_pages ul li select {

    height: 28px;

    width: 50px;

    line-height: 28px;

    text-align: center;

}

.dede_pages ul li a {

    float: left;

    color: #555;

    display: block;

    padding: 0px 8px;

    line-height: 28px;

}

.dede_pages ul li a:hover {

    color: #690;

    text-decoration: none;

    line-height: 28px;

    padding: 0px 8px;

}

.dede_pages ul li.thisclass, .dede_pages ul li.thisclass a, .pagebox ul li.thisclass a:hover {

    background-color: #F8F8F8;

    padding: 0px 8px 0px;

    font-weight: bold;

}

.dede_pages .pageinfo {

    line-height: 28px;

    padding: 12px 10px 12px 16px;

    color: #999;

}

…

3.JS

代码如下（节选示例）：

// 导航固定
    var FixedBox=function(el){
        this.element=el;
        this.BoxY=getXY(this.element).y;
    }
    FixedBox.prototype={
        setCss:function(){
            var windowST=(document.compatMode && document.compatMode!=”CSS1Compat”)? document.body.scrollTop:document.documentElement.scrollTop||window.pageYOffset;
            if(windowST>this.BoxY){
                this.element.style.cssText=”position:fixed;top:0px;width:100%;z-index:110;left:0px;padding:0px;margin-top:0;opacity:1;background:#FFF;border-bottom:0;box-shadow:0px 2px 5px 0px rgba(0,0,0,.15);”;
            }else{
                this.element.style.cssText=””;
            }
        }
    };
    // 添加事件
    function addEvent(elm, evType, fn, useCapture) {
        if (elm.addEventListener) {
            elm.addEventListener(evType, fn, useCapture);
        return true;
        }else if (elm.attachEvent) {
            var r = elm.attachEvent(‘on’ + evType, fn);
            return r;
        }
        else {
            elm[‘on’ + evType] = fn;
        }
    }
    // 获取元素的 XY 坐标；
    function getXY(el) {
        return document.documentElement.getBoundingClientRect && (function() {// 取元素坐标，如元素或其上层元素设置 position relative
            var pos = el.getBoundingClientRect();
            return {x: pos.left + document.documentElement.scrollLeft, y: pos.top + document.documentElement.scrollTop};
        })() || (function() {
            var _x = 0, _y = 0;
            do {
                _x += el.offsetLeft;
                _y += el.offsetTop;
            } while (el = el.offsetParent);
            return {x: _x, y: _y};
        })();
    }
    // 实例化；
    var divA=new FixedBox(document.getElementById(“week_nav”));
       addEvent(window,”scroll”,function(){
        divA.setCss();
    });

…

六、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1. 简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2. 使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3. 整体性好

围绕一个统一的目标设计，强调整体的功能性；

4. 形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5. 交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。