HTML+CSS大作业：非遗文化/东台发绣介绍网页（6页）

最新推荐文章于 2025-02-04 23:04:57 发布

奥利奥ala

最新推荐文章于 2025-02-04 23:04:57 发布

阅读量1k html基础网页制作文章标签： html css 课程设计

本文链接：https://blog.csdn.net/weixin_53453950/article/details/142143764

html基础网页制作专栏收录该内容

7 篇文章 3 订阅

html作业基础水平制作，适用于初学者，页面排版干净，固定导航栏跳转各个页面，采用了html+css来实现布局，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计网站并将其转换为代码的过程来实践设计。

难度系数：★★☆☆☆

一、网站题目

非遗文化、东台发绣、等网站的制作。

二、网站描述

本网站是以东台发绣为主题制作的一个非遗文化介绍的网站，网站内容分为六个板块，分别是主页，作品展示，历史文化，传承代表，相关资讯，关于我们，这六个页面，画面布局风格统一，使用了统一的标题来介绍每个页面是做什么的，通过修改内容也可以作为其他非遗文化介绍的一个模版，例如陶瓷，刺绣等等。网站较为基础，适合初学者或知识面掌握不多的同学使用。

三、网站介绍

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的布局结构。多采用div+css来实现布局

网站程序方面：采用html+css+js技术来实现网站，并且兼容市面主流浏览器，打开不会错位不会乱码。

网站素材方面：通过网络社交网站等搜集图片和文字，运用适当的处理方法来对素材进行处理。

网站文件方面：网站系统文件种类包含：css文件夹、js文件夹、images文件夹；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

四、网站效果

这里对网站所有页面做了截图展示，附上运行视频。

东台发绣/非遗文化传承

五、部分代码制作

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>
<body>
    <div>
        <div class="logo">
            <img src="./image/logo.png" alt="">
            <div>
               <input type="text" placeholder="站内搜索"> 
               <a href="login.html">注册</a>
            </div>
            
        </div>
        <div class="nav">
            <a href="index.html"><button class="active">首页</button></a>
            <a href="1.html"><button>作品展示</button></a>
            <a href="2.html"><button>历史文化</button></a>
            <a href="3.html"><button>传承代表</button></a>
            <a href="4.html"><button>相关咨询</button></a>
            <a href="5.html"><button>联系我们</button></a>
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="./image/index1.png" alt="" >
        </div>
        <div class="img-box">
            <img src="./image/index2.png" alt="" >
        </div>
        <div class="img-box">
            <img src="./image/index3.png" alt="" >
        </div>
        <div class="img-box">
            <img src="./image/index4.webp" alt="" >
        </div>
        <div class="img-box">
            <img src="./image/index5.webp" alt="" >
        </div>
    </div>
    <div class="des">
        <div class="des1">
            <p style="text-align: start; font-size: 32px;">关于东台发绣</p>
            <p>东台发绣，江苏省东台市特产，中国国家地理标志产品。<br>
                发绣是一门综合艺术形式，是以人的发丝为材料，利用头发黑白灰黄自然色泽，用接切缠滚针法，在布帛上施针度线，创造形象的艺术品。<br>
                发绣传说始于唐代，用料取妙龄少女自然色发，运用滚、施、缠、套、接、切、扣、虚实针等数十种针法，达到平、齐、细、密、匀、薄、和、顺、光等最佳艺术境界，被誉为“东方一绝”。
                2009年7月9日，原国家质检总局正式批准对“东台发绣”实施地理标志产品保护。 
                </p>
        </div>
        <div>
            <div style="display: flex;margin-bottom: 20px;">
            <img src="./image/index6.png" alt="" width="200px" height="200px" style="margin-right: 20px;">
            <img src="./image/index7.png" alt="" width="200px" height="200px">
            </div>
            <img src="./image/index1.png" alt="" width="420px" height="150px">
        </div>
    </div>
    <div class="pic">
        <img src="./image/index5.webp" alt="">
        <img src="./image/index2.png" alt="">
    </div>
    <div class="bottom">
        <div>
            <img src="./image/logo2.png" alt="" width="300px" height="150px">
        </div>
        <div>
            <p>信息</p>
            <p>首页</p>
            <p>作品展示</p>
            <p>历史文化</p>
            <p>传承代表</p>
            <p>相关咨询</p>
            <p>联系我们</p>
        </div>
        <div style="display: flex; flex-direction: column;">
            <p>地址：江苏省东台市东大街718号</p>
            <p>邮箱：123456789@qq.com</p>
            <p>电话：0515-85100587</p>
        </div>
        <div></div>
    </div>
</body>
</html>

index.css

.box{
    /* width: 1440px; */
    height: 500px;
    display: flex;
    flex-direction: row;
}
.img-box{
    width: 200px;
    height: 500px;
    overflow: hidden;
    transition: 0.3s;
}
.img-box:nth-child(5){
    width: 900px;
}
.img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}
.img-box:hover{
    width: 900px;
}
.img-box:hover ~ .img-box:nth-child(5){
    width: 200px;
}

.des{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 20px;
    /* margin-left: 30px; */
    border-left: 1px solid gray;
    border-right: 1px solid gray;
}
.des1{
    width: 50%;
    box-sizing: border-box;
    padding: 50px;
    border-bottom: 1px solid gray;
}
.pic{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 50px;
    box-sizing: border-box;
    padding-left: 50px;
    padding-right: 50px;
}
.pic img{
    width: 600px;
    height: 300px;
}
.bottom{
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: rgb(144, 116, 110);
    width: 100%;
    height: 300px;
}

nav.css

/* body,html{
    width: 1440px;
} */
.logo{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 100px;
    padding-right: 100px;
}
.logo input{
    width: 300px !important;
    height: 30px !important;
    line-height: 30px !important;
    border-radius: 30px !important;
    border: 1px solid grey !important;
    padding-left: 20px !important;
}
.logo img{
    height: 100px;
    width: 244px;
}
.nav{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
    background-color: rgb(240, 231, 208);
}
.nav button{
    width: 200px;
    height: 50px;
    font-size: 20px;
    background-color: rgb(240, 231, 208);
    border: 0;
}
.nav button:hover{
    background-color: rgb(158, 90, 93);
}
.active{
    background-color: rgb(157, 37, 43) !important;
}