网页搭建入门

搭建一个简单的静态网页

1、 致初学者：

许多人想学习网页搭建，在这里分享一些自己学习过程中的一些经验。首先，学习资源方面建议一整套系统性的来学习，包括HTML、CSS、JS三大块，在这三个学完之后，尝试写一个简单的静态网页，巩固练习，熟悉网页的框架，其余的一些动态效果：如轮播图、导航菜单等可以在日常的学习中积累。三个初步学习完后，作为javaWeb的敲门砖.

2、HTML

用HTML写的是整个网页的总体架构，其中最关键部分就是对网页进行分块，根据分块再来写每一个块内具体的内容。标签方面80%甚至以上都用的是div块级标签，后接class属性方面进行css样式书写，接id方面js书写。需要注意的是块级元素和行内元素，这两个分清后，再对静态网页的进行分块书写一般就不会出问题。

下图是HTML搭建的一个网页的总体架构，与上述总结可以结合来看

3、CSS样式
CSS样式是对网页进行样式的设计，大体架构写好后，需要对其中的各个块进行设计。最常用的就是CSS定位，定位中可以通过float进行布局，但是不建议使用浮动，position定位完全可以解决一切的定位需要，确定好父子关系，正确使用relative和abslolute。进行样式设计时，明确好是哪一个class，或者元素，一般而言，可以多加class名称，以便于对相同类型的样式进行设计，简化代码。在进行设计时，需要先清除一些默认的网页布局。

下面部分代码是CSS样式的一些实际应用，可以与上述结合来思考

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
a:link,a:visited{
    text-decoration: none;
    color: #333333;
}
body{
    font-family: "微软雅黑";
    color: #14191e;

}
.page{
    width: 1024px;
    height: 645px;
    /*上下外边距30px，左右自动居中*/
    margin: 30px auto;
    overflow: hidden;
    position: relative;
}

.slide{
    width: 1024px;
    height: 645px;
    position:relative;
}
.img{
    width: 1024px;
    height: 645px;
    background: no-repeat;
    position: absolute;
    display: none;

}
.active{
    display:block;
}
.img1{
    background-image: url("../img/001.jpg");
}
.img2{
    background-image: url("../img/002.jpg");
}
.img3{
    background-image: url("../img/003.jpg");
}

.button {
    width: 50px;
    height: 50px;
    background: url("../img/004.png") no-repeat center center;
    position: absolute;
    left: 200px;
    top: 50%;
    margin-top: -25px;
}
.button1{
    transform: rotate(180deg);
}
.button2{
    left: auto;
    right: 2px;
}
.button:hover{
    background-color: #333333;
    opacity: 0.8;
}

4、JS
JS也就是JavaScript是对网页进行效果的设计，通过JS的书写，是网页变得有条理，对网页上的按钮等添加点击，鼠标滑入、滑出等效果。在进行JS书写时，最重要的就是函数的封装，通过封装使得代码变得层次清晰，方便调用，JS通过DOM事件与HTML相连接，通过var声明变量（建议多声明全局变量，方便调用）。

可结合下述具体代码来理解

//封装一个获取id的方法
function byId(id) {
    return typeof(id) === "string"?document.getElementById(id):id;
}

//全局变量的声明，方便各种函数的调用
var page = byId("page"),
    timer = null,
    index = 0,
    slide = byId("slide"),
    img = slide.getElementsByTagName("div"),
    len = img.length,
    dots = byId("dots").getElementsByTagName("span"),
    pre = byId("pre"),
    next = byId("next"),
    menu = byId("menu-content"),
    menuItems = menu.getElementsByClassName("menu-item")
    subMenu = byId("sub-menu"),
    inner = subMenu.getElementsByClassName("inner");

function slideImge() {
    page.onmouseover = function (ev) {  //清除计时器
        if(timer) clearInterval(timer);
    }

    page.onmouseout = function (ev) {  //离开自动变换图片
        timer = setInterval(function () {
            index++;
            if(index >= len) index = 0;
            changeImg();
        },3000);

    }


    page.onmouseout();

    //点击圆点切换图片
    for(var i=0; i<len; i++){

        dots[i].id = i;
        dots[i].onclick = function (ev) {
            index = this.id;
            changeImg();
        }
    }

    //点击上下按钮切换
    pre.onclick = function (ev) {
        index--;
        if(index < 0){
            index = len;
        }
        changeImg();
    }

    next.onclick = function () {
        index++;
        if(index >= len){
            index = 0;
        }
        changeImg();
    }

    function changeImg(){  //轮播图片的方法
        //遍历slide下所有的div，隐藏图片，遍历dots下span，清除active类
        for(var j=0; j<len; j++){
            img[j].style.display = "none";
            dots[j].className = "";

            img[index].style.display = "block";
            dots[index].className = "active";
        }
    }

    // 导航菜单，遍历主菜单，添加类似于id的data-index自定义属性
    for (var m=0; m<menuItems.length; m++){
        menuItems[m].setAttribute("data-index",m);
        menuItems[m].onmouseover = function () {
            subMenu.className = "sub-menu";
            var idx = this.getAttribute("data-index");
            for (var n=0; n<menuItems.length; n++){
                inner[n].style.display = "none";
                menuItems[i].style.background = "";
            }
            inner[idx].style.display = "block";
            menuItems[idx].style.background = "rgba(0,0,0,0,0.2)";
        }

    }
    menu.onmouseout = function (ev) {
        subMenu.className = "sub-menu hide";
    }

    subMenu.onmouseover = function (ev) {
        this.className = "sub-menu";
    }
    subMenu.onmouseout = function (ev) {
        this.className = "sub-menu hide";
    }


}

slideImge()

下面就是上述三个结合起来的初步网页了

总结：用了大概1周左右巩固熟悉了其中的代码块，下一步进行JavaWeb学习，等学有所成会继续分享我的学习经验哦