一、网站题目

本网站介绍了中国二十四节气，中国二十四节气准确的反映了自然节律变化，在人们日常生活中发挥了极为重要的作用，二十四节气蕴含着悠久的文化内涵和历史积淀。

二、网站描述

2.1整体页面布局

网页多次使用p进行页面排版和页面布局，同时使用了float的属性，页面内容清晰明了，划分为不同块区，各页面通过超链接相联系。

2.2 导航栏制作

用ul-li进行导航栏制，同时用到了position 、margin、 padding以及border的相关属性。a标签使用display转换块级属性，同时进行左浮动设置完成了横向展示。还有hover的鼠标悬停特效。

2.3内容部分

左侧实现简单的轮播图功能，使用@keyframes switch{}在这里面设置每段回收，一共五张图片进行滚动，右侧文字说明用到了font的属性，进行文字样式的设置。节气歌部分用到了居中还有边界以及字体颜色设置。底端部分使用了ul-li布局，完成了列表的展现，同时使用背景图片结尾，实现颜色呼应。

2.4春夏秋冬二级页面

使用同一个CSS设置，实现页面布局一致性，html部分用h1 h2 加入标题，页面下半部分插入各个节气的图片

2.5留言页面

运用table表单知识完成了表格的展现 整合使用tr td ul li 完成页面布局，使用option设计了下拉表单以供选择，input实现两个按钮

2.6JavaScript部分

用JavaScript实现了页面警告框弹出提示，还有星星点亮评分，设计了JavaScript代码实现星星点亮选择

三、网站演示

四、网站源码

4.1HTML结构代码

    

        

        二十四节气

        

        

    

    

        

        

            

二十四节气

            

                

                    

•                     

• 首页

                    

• 春

                    

• 夏

                    

• 秋

                    

• 冬

                    

• 留言
    

                

                

                 

                    

                        

                    

                    

二十四节气介绍

                    

---

                    

                        

                            

                            

                            

                            

                            

                        

                        

                    

                        

                            

                                    二十四节气，是历法中表示自然节律变化以及确立“十二月建”的特定节令。二十四节气准确的反映了自然节律变化，在人们日常生活中发挥了极为重要的作用。它不仅是指导农耕生产的时间体系，更是包含有丰富民俗事象的民俗系统。二十四节气蕴含着悠久的文化内涵和历史积淀，是中华民族悠久历史文化的重要组成部分。

                            

                            

                                    “二十四节气”是上古农耕文明的产物，它是上古先民顺应农时，通过观察天体运行，认知一岁中时令、气候、物候等变化规律所形成的知识体系。廿四节气最初是依据斗转星移制定，北斗七星循环旋转，斗柄顺时针旋转一圈为一周期，谓之一“岁”（摄提）；现行的“二十四节气”是依据太阳在回归黄道上的位置制定，即把太阳周年运动轨迹划分为24等份，每15°为1等份，每1等份为一个节气。一岁四时，春夏秋冬各三个月，每月两个节气，每个节气均有其独特的含义。

                            

                            

                                经历史发展，农历吸收了干支历的节气成分作为历法补充，并通过“置闰法”调整使其符合回归年，形成阴阳合历，“二十四节气”也就成为了农历的一个重要部分。二十四个节气对于后世历书制作影响很大，它是中国传统气象学的核心理论之一。在国际气象界，二十四节气被誉为“中国的第五大发明”。2016年11月30日，二十四节气被正式列***合国教科文组织人类非物质文化遗产代表作名录。

                            

                        

                    

                    

                

                

                

                

节气歌

                

---

                

春雨惊春清谷天，夏满芒夏暑相连。

                

秋处露秋寒霜降，冬雪雪冬小大寒。

                

每月两节不变更，最多相差一两天。

                

上半年来六廿一，下半年是八廿三。

                

                

                

交节列表

                

---

                

                    

                        

• 立春     公历2月3－5日

                        

• 雨水     公历2月18－20日

                        

• 惊蛰     公历3月5－7日

                        

• 春分     公历3月20－21日

                        

• 清明     公历4月4－6日

                        

• 谷雨     公历4月19－21日

                    

                

                    

                    

                        

• 立夏     公历5月5－7日

                        

• 小满     公历5月20－22日

                        

• 芒种     公历6月5－7日

                        

• 夏至     公历6月21－22日

                        

• 小暑     公历7月6－8日

                        

• 大暑     公历7月22－24日

                    

                

                    

                    

                        

• 立秋     公历8月7－9日

                        

• 处暑     公历8月22－24日

                        

• 白露     公历9月7－9日

                        

• 秋分     公历9月23－24日

                        

• 寒露     公历10月8－9日

                        

• 霜降     公历10月23－24日

                    

                    

                

                

                    

                        

• 立冬     公历11月7－8日

                        

• 小雪     公历11月22－23日

                        

• 大雪     公历12月7－8日

                        

• 冬至     公历12月21－23日

                        

• 小寒     公历1月5－6日

                        

• 大寒     公历1月19－21日

                    

                    

                

            

                

            

        

        

     

4.2CSS样式代码

*{

    margin: 0px;

    padding: 0px;

}

body{

    margin: 0px auto;

    background: url(../img/3.jpg) repeat-x top center;

    background-attachment: fixed;

}

h1{

    font-size: 50px;

    text-align: center;

    color: cadetblue;

    font-family: "宋体";

    font-weight: 900px;

    line-height: 70px;

    margin-top: 100px;

}

h2{

    text-align: center;

    font-size: 25px;

    color: cadetblue;

    font-family: "宋体";

    line-height: 50px;

    

}

#center{

    height: 500px;

    width: 50%;

    margin: 0 auto;

}

img{

    margin: auto;

    width: 250px;

    height: 500px;

}

p{

    text-align: center;

    margin: 20px;

}

五、更多内容

1.如果我的博客对你有帮助，如果你喜欢我的博客内容，请点赞，评论收藏哦

2.关注我获得更多源码

3.内容技术相关问题欢迎一起交流学习