【网页制作-端午】html+css制作关于节日端午的网页（5页面）

涉及知识

节日主题网页制作，table布局，CSS+DIV布局，期末网页大作业，网页作业成品，web前端源码实例，如何制作网页，网页设计思路，如何从零开始制作web页面。

---

专栏：web前端大作业网页制作
关于我：一个持续输出型博主，爱分享，喜技术，期待关注与交流！
公众号：《IT黄大大》更多分享抢先看；
研究主题：影视，明星，节日，家乡，旅游，个人，美食，校园，商城，宠物，公益，运动，特效等
技术涉猎：HTML+CSS，HTML+CSS+JS，Java+数据库，vue项目等
开发软件：vscode，dreamweaver，hbuilder，sublime text，eclipse，idea等；

---

写在前面

又到了分享页面的环节了，这次我给大家整理了节日主题的网页，端午节的介绍网页，当然因为是之前写的所以有点时差，主要希望能给大家带来一些作业上的灵感，也希望大家能够从中得到启发，解决自己眼前的作业窘境，当然能够学到知识是最好的，废话也不多说了，我尽量做到定期更新哈，希望大家能持续关注我哈！

一、网页主题

本次主要分享的网站是一个节日主题相关的网页，绿色的主题与浓香的粽叶搭配，定然让你心动，这个也是基于div+css,table表格+css开发的节日端午主题网页，更多源码可以公众号《IT黄大大》私信，希望大家能谅解，创作不易。
看下面的效果图，主要是和端午贴切，希望大家能够喜欢这类风格的哈。

二、网页效果

Page1、首页

Page2、公益端午

Page3、各地端午

Page4、校园端午

Page5、本地民俗

三、网页架构与技术

3.1 脑海构思

要想做好一个页面，首先脑子里面得去有个架构，就好比是庖丁解牛，将架构了然于胸，什么困难都会迎刃而解，在制作这种类似网页作业的时候我们一般都是采用浮动布局的方式来实现的，因为这类静态页面的兼容性要求不高，所以我们要想好大致的框架。

3.2 整体布局

在我的页面制作过程中，我主要采用的是浮动式布局，从左往右，从上至下的顺序来进行设计制作的，当然在制作之前我会先给页面框架做一个布局，首先我会设计下面几部分：
头部：banner（主要包括导航图和logo之类的）
菜单：menu（主要是采用a标签进行跳转的）
主体：main（核心内容展示）
底部：foot（版权声明）
其中头部和菜单及底部三个模块都是公用的，针对每个页面的切换主要体现在中间的主体模块，这也是一个好的网页作品必要的四大元素，不然就是斜坡上盖房子了。

3.3 技术说明书

主要应用了web前端2个模块的技术HTML + CSS
HTML模块：主要针对页面的结构搭建，该网站整体采用的是div标签作为盒子，其中包含:
有关无序列表 ul li 、
段落标签 p、
图片标签 img 、
行内标签span、
表格标签table,tr,td
字体标签 h2 h3.等
CSS模块：
主要采用的是浮动式布局的方式，页面搭建主要通过设置div的border属性来确定每个div的位置，然后针对不同的位置定位。针对每个元素通过margin和padding属性来设置不同模块的相对位置，设置文字颜色color属性等。

主要用到了font的文字基本属性，background设置相关背景色。文本居中text-align:center
然后标签模块采用的是border属性，设置div的左边框的厚度和颜色。

四、网页源码

4.1 各地端午模块

Html

 <div class="con">
      <h3 class="title2">踏青路上，放飞心情</h3>
      <div class="jianjie">
        <h2 style="color:seagreen">人生中，总有做不完的事情，累了，就停一停，放松心情；生活中，总有看不惯的世俗，烦了，就静一静，顺其自然；而我最喜欢的就是端午佳节出去走走，看看这盛世繁华</h2><br>
        <h3>婺源的端午</h3>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td>
                <p style=" text-align:center;"><img src="images/w_1.jpg" /></p>
              </td>
              <td>
                <p>“上下街连五里遥，青帘酒肆接花桥。十年争战风光别，满地芊芊草色娇”<br>
                  在旅行记忆里已经颇有些回数和年月了，但令自己怪异的就是一直未能留下一星半点的文字来，总是不甘地交了白卷。有时细想，是由于我的慵懒？浅薄？“蒋”郎才尽之故吗？抑或是婺源的那山那水那幽深的青石板路和满目的青瓦白墙徽派建筑及其凝重的历史文化<br>
                  站在婺源的面前,呼吸着从那里飘来的清新气息,我忽然有了一种冲动想立刻走进她.但公务的重要迫使我按捺住了情绪.走得这么近了,贸然进入是否会搅了她的宁静呢？不如暂且保持一点对她的神秘为好,日后,有的是机缘.婺源是一幅美妙绝伦的山水画卷,只有仰视或是俯瞰她,才能充分体味她的神韵.古树、歙砚、茶香,小桥、流水、人家,婺源,这颗“中国旅游精品线路上的明珠”,在某一个春风化雨的日子里,我一定会走进你,用心聆听你的脉搏
                </p>
              </td>
            </tr>
          </tbody>
        </table>
        <h3>西湖的端午</h3>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td>
                <p style=" text-align:center;"><img src="images/w_2.jpg" /></p>
              </td>
              <td>
                <p>龙舟佳节，自然少不了的一项活动-赛龙舟，也有幸经历过这个画面<br>
                  站在柳丝轻拂的西湖边放眼远眺，只见湖的南北西三面是层层叠叠、连绵起伏的山峦，一山绿，一山青，一山浓，一山淡，真像一幅优美的山水画。平静的湖面，犹如一面硕大的银镜。一群群白鸥掠过湖面，在阳光下一闪一闪的，好看极了。
                  围绕着西湖的是一圈树木织成的绿色镶边。十里明湖中，葱绿的孤山显得格外秀美典雅。孤山东边的白堤和西南的苏堤，就像两条绿色的绸带，轻柔地飘浮在碧水之上。湖心的三个小岛——小瀛洲、湖心亭、阮公墩，掩映在绿树丛中。明净的湖水晃动着绿岛和白云的倒影，仿佛仙境一般。在这如画的西湖边走一走，看一看，怎能不令人心旷神怡呢！

                </p>
              </td>
            </tr>
          </tbody>
        </table>
        <h3>路上的端午</h3>
        <p>花开一春，人活一世，一生之计在于勤，一日之计在于晨，一年之计在于春，一事之计在于人。该珍惜的须珍惜，该抓住的须抓住，宁可错过事情，不可错过人生</p>
        <p>走过的路长了，遇见的人多了，经历的事杂了。不经意间发现，人生最曼妙的风景是内心的淡定与从容，头脑的睿智与清醒。很多时候，我们不缺方法，缺的是一往无前的决心和魄力。不要在事情开始的时候畏首畏尾，不要在事情进行的时候瞻前顾后，唯有如此，一切才皆有可能</p>
      </div>
    </div>
    <div class="bottom">IT黄大大版权所有</div>

css

.jianjie p, .jianjie h3 {
	margin-bottom: 20px;
}

五、源码获取

5.1 获取方式

A、关注公众号：《IT黄大大》
B、回复“节日端午”。
C、即可领取。

作者寄语

如果我的这篇博客对您有帮助、而且您喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！当然如果这个文章对您带来不好的体验还希望能多多包涵，一起学习进步。

【关注我 | 获取更多源码 | 优质文章】 带您学习前端知识、CSS特效、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板等! 「在公众号<IT黄大大>里也会定期分享一些免费好看的html页面，期待您的关注哈」！

2024年我们一起加油，一起成长，感谢您的支持与谅解！