【Web前端期末大作业】中华文化宣传网站

最新推荐文章于 2024-07-24 10:40:52 发布

MIKE笔记(同名B站)

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量1k

点赞数 23

分类专栏： Web前端期末大作业文章标签：前端课程设计

本文链接：https://blog.csdn.net/m0_51607907/article/details/135163666

版权

Web前端期末大作业专栏收录该内容

9 篇文章 7 订阅

订阅专栏

前言

015-【Web前端期末大作业】中华文化宣传网站
🥇个人主页：@MIKE笔记
🥈文章专栏：Web前端期末大作业
⛄源码咨询： wx：mikenote 15💴带走

网页目录树

在线演示：http://47.106.142.80:2023/
视频演示：https://www.bilibili.com/video/BV1Ug4y1r7Nt/?share_source=copy_web&vd_source=d764770ff4322f1a1111e85d452245c6

原生html+css+javascript完成

1️⃣网页介绍

网站建设工具
1.使用VScode（当然使用记事本也是可以的）智能，快捷，支持代码补全，节省了开发时间，并且支持多种语言只需安装插件配置文件即可。
2.网站建设学习资源

b站
CSDN

3.网站建设步骤及思路分享

网站建设步骤在我一点学习的导航栏里有更为清晰的体现，这里就不一一赘述了
网站的思路分享：整体的布局，以及内容，搜寻所需要的素材，建立站点。布局的好坏直接影响了你网页看起来的效果，在此我推荐一些常用的网站布局，一般是导航栏在顶部，下面分为左右结构，分清主次或者上中下三层结构等等，很多布局我觉得可以参考一些大型网站的布局或者一些个人博客的布局，以此增加自己的审美以及知识库。建议壁纸在一些桌面软件里找，会比较清晰。同时建设网页的过程不会是一帆风顺的，要想有理想的效果一定是需要一定时间去调试使用的。

2️⃣网页架构

📢前端三件套：

html
css
js

3️⃣系统环境

环境	版本 / 下载
系统	win 10 /win 11
vscode	2023

备注：以上版本为博主电脑配置，可点击进入官网下载

4️⃣网页展示

图片展示

在这里插入图片描述

在这里插入图片描述
页面太多，其他请看在线演示。

5️⃣代码展示

下面展示一些 内联代码片。
主页


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css" >

</head>

<body>
  <script src="./JS/index.js"></script>
  <header>
        <div class="nav">

                    <ul>
                        <li class="active"><a href="">首页</a></li>
                        <li><a href="content.html">文化纵览</a></li>
                        <li><a href="./denglu.html">登录</a></li>
                        <li><a href="./zhuce.html">注册</a></li>
                    </ul>
          
            </div>

  </header>
    <div class="wrap">
            <div class="logo">
                    <img src="./img/工艺品.png" alt="" class="cartoon_0" >
                </div>
        <div class="banner">
            <div class="desc">
                    <div class="name">
                            <h1> 标语</h1><br>
                            <div class="line"></div><br>
                            <p>保护 | 传承 | 创新</p><br>
                    </div>
                    <p>秉承更有温度、更有深度、更有影响力的原则传承非遗。
                    </p>
            </div>
        </div>
            <div class="content">
                <!-- 百叶窗部分  过渡动画-->
                <ul class="box">
                        <li>
                        <img src="img/清明.png" alt="">
                        <div class="text">
                        传统节日——清明
                        </div>
                        </li>
                        <li>
                        <img src="img/杭州塔.png" alt="">
                        <div class="text">
                        传统建筑——雷峰塔
                        </div>
                        <li>
                        <img src="img/诸子百家.png" alt="">
                        <div class="text">
                        传统文化——诸子百家
                        </div>
                        </li>
                       </li>
                        <li>
                        <img src="img/青团.png" alt="">
                        <div class="text">
                        传统美食-青团
                        </div>
                        </li>
                        <li>
                        <img src="img/苏绣.png" alt="">
                        <div class="text">
                       传统工艺——苏绣
                        </div>
                        </li>
                        <li>
                        <img src="img/非遗昆曲.png" alt="">
                        <div class="text">
                        中国戏剧——昆曲
                        </div>
                        </li>
                        <li>
                        <img src="img/名山大川2.png" alt="">
                        <div class="text">
                        名山大川
                        </div>
                        </li>
                        </ul>
            </div>
<!-- 留言板部分 -->
            <div class="message">
                <div class="message_content">

                    <div class="left">
                <div class="ta">
                    <textarea class="text" name="text" id="text" cols="100" rows="100" placeholder="给我们留言吧！！！"></textarea>
                </div>
                    <div class="anniu">
                    <button class="btn" name="btn">发布</button>
                    <button id="delete">删除</button>
                    </div>

                    </div>

                    <div class="right">
                        <div class="right-con">
                          <ul id="ul" class="ul">
                          </ul>
                        </div>
                    </div>

                </div>
                 


            </div>
            <!-- 页脚 -->
            <div id="footer" class="mycolor">
         
                    <p>版权所有：MIKE笔记</p><br>
                    <p>联系方式：mikenote </p><br>
                    <p>欢迎加入——非遗保护与传承！在这里您将感受到华夏五千年文明的深厚底蕴</p>
              </div>  
    </div>

 <script>
 var btn=document.querySelector('button');
var text=document.querySelector('textarea');
// var ul=document.querySelector('ul');
var ul=document.getElementById('ul');
btn.onclick=function(){
    if (text.value==''){
        alert('您没输入内容');
        return false;//终止操作
    }
    else{
     var li=document.createElement('li');
        li.innerHTML=text.value;
        ul.insertBefore(li,ul.children[0]);
    }
    
}
// 删除留言
// var ul2=document.querySelector('ul');
    // var btn=document.querySelector('button');
    var btnt=document.getElementById('delete');
    btnt.onclick=function(){
        if(ul.children.length==0){
            this.disabled=true;
        }
        else{
            ul.removeChild(ul.children[0]);
        }
        
    }

 
 </script> 




</body>
</html>

结语

我个人觉得建设一个网站首先就是要规划好整体的布局，以及内容，搜寻所需要的素材，建立站点。布局的好坏直接影响了你网页看起来的效果，在此我推荐一些常用的网站布局，一般是导航栏在顶部，下面分为左右结构，分清主次或者上中下三层结构等等，很多布局我觉得可以参考一些大型网站的布局或者一些个人博客的布局，以此增加自己的审美以及知识库。建议壁纸在一些桌面软件里找，会比较清晰。同时建设网页的过程不会是一帆风顺的，要想有理想的效果一定是需要一定时间去调试使用的。

MIKE笔记(同名B站)

关注

23
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Web前端期末大作业】中华文化宣传网站

015-【Web前端期末大作业】中华文化宣传网站🥇个人主页MIKE笔记🥈文章专栏Web前端期末大作业⛄15💴带走网站建设工具1.使用VScode（当然使用记事本也是可以的）智能，快捷，支持代码补全，节省了开发时间，并且支持多种语言只需安装插件配置文件即可。2.网站建设学习资源b站CSDN3.网站建设步骤及思路分享网站建设步骤在我一点学习的导航栏里有更为清晰的体现，这里就不一一赘述了网站的思路分享：整体的布局，以及内容，搜寻所需要的素材，建立站点。
复制链接

扫一扫