网页搭建入门

关注

原创最新推荐文章于 2026-10-23 14:21:41 发布 3.2k 阅读 AI 写同款· GEO 优化 ›

手把手教你搭建一个属于自己的网站-适合零基础小白，文末附网站模板手把手教你搭建一个属于自己的网站-适合零基础小白写在前面搭建需求功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入写在前面前段时间休息想着搭一个属于自己的网站，几经尝试终于成功了，网上其实有很多教程，但很多，希望这篇文章能够帮助到阅读详情

搭建一个简单的静态网页

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()