关于节日文化的HTML网页设计-----二十四节气

最新推荐文章于 2024-05-24 12:49:27 发布

STU学生网页设计

最新推荐文章于 2024-05-24 12:49:27 发布

阅读量236

点赞数

分类专栏：网页设计文章标签： dreamweaver web课程与设计 web前端 web前端期末大作业

本文链接：https://blog.csdn.net/qq_38514421/article/details/127140193

版权

网页设计专栏收录该内容

1045 篇文章 53 订阅

订阅专栏

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

J27JP 二十四节气 6页无js table表格表单浮动视频

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱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">
    <title>二十四节气</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div id="ershisi">
        <div id="banner">
            <img src="picture/banner.png" alt="">
        </div>
        <nav>
            <a href="" class="dangqian">首页</a>
            <a href="spring.html">春</a>
            <a href="summer.html">夏</a>
            <a href="autumn.html">秋</a>
            <a href="winter.html">冬</a>
            <a href="liuyan.html">留言</a>
        </nav>
        <div id="mian">
            <div id="index_main">
                <img src="picture/index.png" alt="">
                <h1>二十四节气介绍</h1>
                <p>
                    二十四节气是我国历法中表示自然节律变化以及确立“十二月建”的特定节令，能准确反映自然节律变化，蕴含着悠久的文化内涵和历史积淀，是中华民族悠久历史文化的重要组成部分，被国际气象学界誉为“中国的第五大发明”，2016年被正式列入联合国教科文组织人类非物质文化遗产代表作目录。
                </p>
                <p>
                    二十四节气最初是依据斗转星移制定，北斗七星循环旋转，斗柄顺时针旋转一圈为一周期，谓之一“岁”。现行确立二十四节气依据“太阳周年视运动”，也就是太阳黄经度数。两种确立方法虽然不同，但造成斗转星移的原因则是地球绕太阳公转，因此两者交节时间基本一致。二十四节气表征了地球在公转轨道上的位置和季节、气候的对应关系，它是非常科学的。二十四节气具有普适性，对于我国一些高纬地区，甚至南半球也可以借鉴其定义和内涵。
                </p>
                <p>
                    二十四节气分别为：立春、雨水、惊蛰、春分、清明、谷雨、立夏、小满、芒种、夏至、小暑、大暑、立秋、处暑、白露、秋分、寒露、霜降、立冬、小雪、大雪、冬至、小寒、大寒。节气中的立春、惊蛰、清明、立夏、芒种、小暑、立秋、白露、寒露、立冬、大雪、小寒，分别为干支历寅月、卯月、辰月、巳月、午月、未月、申月、酉月、戌月、亥月、子月、丑月的起始。
                </p>
                <p>
                    二十四节气，是中华民族悠久历史文化的重要组成部分，表达了人与自然宇宙之间独特的时间观念，蕴含着中华民族悠久的文化内涵和历史积淀。“二十四节气”不仅在农业生产方面起着指导作用，同时还影响着古人的衣食住行，甚至是文化观念。二十四节气形成以来一直是我国农业生产的风向标。农作物的生长发育与光、温、气、热、水等因素密不可分，二十四节气对当今农业生产仍有指导意义。二十四节气还是计算数九、暑伏、春社、秋社等时间点的基准。
                </p>
            </div>
            <div id="liebiao">
                <h1>交节列表</h1>
                <table>
                    <tr class="table_title">
                        <td>春季</td>
                        <td>日期</td>
                        <td>夏季</td>
                        <td>日期</td>
                        <td>秋季</td>
                        <td>日期</td>
                        <td>冬季</td>
                        <td>日期</td>
                    </tr>
                    <tr>
                        <td>立春</td>
                        <td>2月3-5日</td>
                        <td>立夏</td>
                        <td>5月5-7日</td>
                        <td>立秋</td>
                        <td>8月7-9日</td>
                        <td>立冬</td>
                        <td>11月7-8日</td>
                    </tr>
                    <tr>
                        <td>雨水</td>
                        <td>2月18-20日</td>
                        <td>小满</td>
                        <td>5月20-22日</td>
                        <td>处暑</td>
                        <td>8月22-24日</td>
                        <td>小雪</td>
                        <td>11月22-23日</td>
                    </tr>
                    <tr>
                        <td>惊蛰</td>
                        <td>3月5-7日</td>
                        <td>芒种</td>
                        <td>6月5-7日</td>
                        <td>白露</td>
                        <td>9月7-9日</td>
                        <td>大雪</td>
                        <td>12月6-8日</td>
                    </tr>
                    <tr>
                        <td>春分</td>
                        <td>3月20-22日</td>
                        <td>夏至</td>
                        <td>6月21-22日</td>
                        <td>秋分</td>
                        <td>9月22-24日</td>
                        <td>冬至</td>
                        <td>12月21-23日</td>
                    </tr>
                    <tr>
                        <td> 清明</td>
                        <td>4月4-6日</td>
                        <td>小暑</td>
                        <td>7月6-8日</td>
                        <td>寒露</td>
                        <td>10月8-9日</td>
                        <td>小寒</td>
                        <td>1月5-7日</td>
                    </tr>
                    <tr>
                        <td>谷雨</td>
                        <td>4月19-21日</td>
                        <td>大暑</td>
                        <td>7月22日-24日</td>
                        <td>霜降</td>
                        <td>10月23-24日</td>
                        <td>大寒</td>
                        <td>1月20-21日</td>
                    </tr>
                </table>
            </div>

        </div>
        <footer>
            版权所有©
        </footer>
    </div>
</body>

</html>

🏠CSS样式代码

#index_main {
    width: 100%;
    margin-top: 20px;
}

h1 {
    line-height: 50px;
    color: #3874AA;
    border-bottom: 1px dotted #ccc;
}

#index_main img {
    width: 300px;
    float: left;
    margin-right: 30px;
    margin-bottom: 20px;
}

#index_main p {
    text-indent: 32px;
    line-height: 30px;
    margin-top: 20px;
    font-size: 18px;
    color: #333;
}

#liebiao {
    width: 100%;
    margin-top: 30px;
    color: #333;
    background: url(../image/bg3.png) no-repeat;
    background-size: 500px;
    background-position: 600px 0px;
}

#liebiao h1 {
    line-height: 50px;
    text-align: center;
}

#liebiao table {
    margin-top: 20px;
    text-align: center;
    width: 100%;
    line-height: 40px;
}

.table_title td {
    font-weight: 700;
    font-size: 20px;
    line-height: 40px;
    color: #333 !important;
}

#liebiao table tr td:nth-child(2n+1) {
    color: #3874AA;
}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

STU学生网页设计

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
关于节日文化的HTML网页设计-----二十四节气

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
复制链接

扫一扫