HTML做一个节日页面【六一儿童节】纯HTML代码

于 2022-11-05 20:18:00 发布
阅读量115 收藏 1
点赞数 1
分类专栏： web前端期末大作业 文章标签： 网页设计 网页设计与制作 web课程设计 web前端期末大作业 html期末大作业
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38514354/article/details/127708264
版权

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

一、👨‍🎓网站题目

🏮传统春节网页设计、🎅圣诞节节日发展、🥮中秋、端午传统节日习俗庆祝、🎏地区特色，网站模板 、等网站的设计与制作。

二、✍️网站描述

🏷️ 大学生传统节日网页作业成品采用DIV CSS布局制作，主要内容包括节日介绍、节日发展、习俗庆祝、地区特色等内容，作品共多个页面，学生HTML静态网页基础水平制作，页面排版干净简洁。网页技术方面应用包括网页背景颜色、字号字体设置、超链接、图文页面、菜单栏、顶部大图等网页基础知识点

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成。
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转。
  5. 要有JS特效，如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
  7. 页面清爽、美观、大方，不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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代码）。

四、🌐网站演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、⚙️ 网站代码

🧱HTML结构代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>六一儿童节</title>

    <link href="css/styles.css" rel="stylesheet" type="text/css">

</head>

<body>

    <!-- TOP -->

    <div id="topContainer">

        <div id="header">

            <div id="logo">
                <a href="#"><img src="picture/logo.gif" alt="PrintingCo." width="196" height="57" border="0"></a>
            </div>

            <ul class="menu">
                <li class="home"><a href="index.html" title="home">主页</a></li>
                <li class="about"><a href="" title="about">about</a></li>
                <li class="services"><a href="China.html" title="services">services</a></li>
                <li class="equipment"><a href="news.html" title="equipment">equipment</a></li>
                <li class="contact"><a href="origin.html" title="contact">contact</a></li>
            </ul>

        </div>

    </div>

    <!-- MIDDLE -->

    <div id="middleContainer">

        <div id="adsContainer">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>相关趣闻</h2>

            <div style="width: 690px">


                <a target="_self" href="javascript:;">韩国</a>的儿童节开始于1923年，是从“<a target="_self" href="javascript:;">男孩节</a>”演变过来的。这也是韩国的公众<a target="_self" href="javascript:;">假日</a>，定在每年的5月5日。家长们通常会在这一天带孩子去公园、
                <a target="_self" href="javascript:;">动物园</a>或者其他游乐设施，让孩子开心地度过假日。
                <div></div>
                印度将独立后的第一任政府总理庄亚鲁的
                <a target="_self" href="javascript:;">诞辰</a>纪念日11月14日作为儿童节，在这个特别的日子里，印度的<a target="_self" href="javascript:;">儿童会</a>有各种民族气息浓郁的舞蹈、音乐表演，政府也会出面组织一些庆祝活动。
                <div></div>
                大多数
                <a target="_self" href="javascript:;">伊斯兰</a>国家都将斋月后第14天定为“糖果节”，对孩子们来说，这也是最快乐的儿童节。“糖果节”一般为期三天，小朋友们三五成群，到附近的各家各户索要糖果。按照当地<a target="_self" href="javascript:;">民俗</a>，大人们不能拒绝儿童的要求，所以孩子们这一天总是能满载而归，欢天喜地。
                <div></div>

                <a target="_self" href="javascript:;">非洲</a>西部的儿童节是疯狂的，他们的国家大都有专门的“儿童狂欢节”，而且往往持续一个月。<a target="_self" href="javascript:;">非洲人</a>历来能歌善舞，在“儿童狂欢节”里，尽管人们的生活条件各不相同，但所有孩子都会尽情欢乐，热闹非凡。
                <div></div>
                不过，比起上述国家的儿童，
                <a target="_self" href="javascript:;">伊拉克</a>的孩子们就可怜多了，当许多国家的小朋友在欢庆儿童节的时候，伊拉克儿童大多根本不知道世界上还有一个属于他们自己的节日。他们仍一如既往，或在学校上课，或在作坊打工，或沿街乞讨。
                <div></div>
                一些伊拉克人透露，在
                <a target="_self" href="javascript:;">萨达姆</a>执政的20多年里，6月1日被定为伊拉克的石油国有化日。每到这一天，伊拉克全国要举办各种庆祝活动，但与儿童无关，所以孩子们就没有过过儿童节。
                <div></div>
                在被忽略的儿童节里，伊拉克幼儿园、小学里没有任何节日气氛，自然也不会有庆祝活动。
                <div></div>
                日本的儿童节，叫做“儿童日”（
                <a target="_self" href="javascript:;">日语</a>：こどもの日)，是一个<a target="_self" href="javascript:;">传统节日</a>。在每年的5月5日，日本的家庭都会庆祝孩子的长大。二战前，这个节日被称为“<a target="_self" href="javascript:;">端午节</a>”（日语：端午の节句)，并且只是男孩的节日。1948年，当这个节日成为公众假日的时候，便成了庆祝所有儿童幸福和福利的节日。在节日当天，日本的家庭都会在屋顶上悬挂鱼状的标志，用来象征儿童消除厄运，克服困难，顺利成长。
                <div></div>
                不过日本在3月3日还有单独的女孩节，从
                <a target="_self" href="javascript:;">上巳节</a>发展过来，<a target="_self" href="javascript:;">女儿节</a>以摆放各种玩偶来庆祝。男儿节悬挂<a target="_self" href="javascript:;">鲤鱼旗</a>是源自中国的“望子成龙”和“
                <a target="_self" href="javascript:;">鲤鱼跳龙门</a>”的传说。
                <div></div>
            </div>
            <div></div>

            <p>&nbsp;</p>
            <div class="clear"></div>


        </div>

    </div>

    <!-- CONTENT -->

    <div id="content">

        <div id="leftPan" style="margin-top: 50px;">

            <div id="welcome">
                <div align="center">
                    <p>&nbsp;</p>
                    <p><img src="picture/7.jpg" width="515" height="338"> </p>
                </div>
                <p align="center">&nbsp;</p>
            </div>
        </div>

        <div id="rightPan">

            <div id="why">
                <p align="center">&nbsp;</p>
            </div>

        </div>

        <div class="clear" style="margin-bottom:15px"></div>

    </div>

    <!-- BOTTOM -->

    <div id="bottomContainer">
        <div id="footer">
            <p>
                版权所有©
            </p>
        </div>
    </div>

</body>

</html>

💒CSS样式代码


/* CSS Document */
body{padding:0px; margin:0px; background:#FFF; color:#535353; font:11px/14px Tahoma, sans-serif;}
div, p, ul, h2, h3, h4, img{padding:0px; margin:0px;}
ul{list-style-type:none;}

.clear {clear: both; margin: 0px}

p a{font:11px/14px Tahoma, sans-serif; color:#bf2208; text-decoration:underline}
p a:hover{color:#81929b;}

/* TOP */

#topContainer{background:#FFF url(../image/b_top.gif) 0 0 repeat-x; height:260px;}

#header{background:url(../image/b_header.jpg) 0 0 no-repeat; height:260px; position:relative; margin:0 auto; width:773px}

#logo{position:absolute; top:103px; left:85px}

#header ul.menu{position:absolute; top:16px; left:305px; width:440px}
#header ul.menu li{float:left; margin-right:12px;}
#header ul.menu li a{height:26px; display:block; text-indent:-20000px; }
#header ul.menu li a:hover{height:26px;}

#header ul.menu li.home a{width:62px; background:url(../image/btn_1.gif) 0 0 no-repeat; }
#header ul.menu li.home a:hover{width:62px; background:url(../image/btn_1_over.gif) 0 0 no-repeat;}

#header ul.menu li.about a{width:62px; background:url(../image/btn_2.gif) 0 0 no-repeat; }
#header ul.menu li.about a:hover{width:62px; background:url(../image/btn_2_over.gif) 0 0 no-repeat;}

#header ul.menu li.services a{width:81px; background:url(../image/btn_3.gif) 0 0 no-repeat; }
#header ul.menu li.services a:hover{width:81px; background:url(../image/btn_3_over.gif) 0 0 no-repeat;}

#header ul.menu li.equipment a{width:94px; background:url(../image/btn_4.gif) 0 0 no-repeat; }
#header ul.menu li.equipment a:hover{width:94px; background:url(../image/btn_4_over.gif) 0 0 no-repeat;}

#header ul.menu li.contact a{width:75px; background:url(../image/btn_5.gif) 0 0 no-repeat; }
#header ul.menu li.contact a:hover{width:75px; background:url(../image/btn_5_over.gif) 0 0 no-repeat;}

/* MIDDLE */

#middleContainer{background:#FFF url(../image/b_middle.gif) 0 0 repeat-x; height:269px;}

#adsContainer{background:url(../image/b_ads.gif) 0 0 no-repeat; height:269px; position:relative; margin:0 auto; width:721px; padding:0 0 0 52px}

#adsContainer ul {margin: 0 0 0 22px}
#adsContainer ul li{font:11px/16px Tahoma, sans-serif; background:url(../image/arrow1.gif) 0 2px no-repeat; padding-left:21px; margin-bottom:6px}
#adsContainer ul li a{color:#81929b; text-decoration:none;}
#adsContainer ul li a:hover{color:#000}

#ad1{width:231px; height:260px; float:left; position:relative; background:url(../image/b_ad1.jpg) 0 0 no-repeat; margin-top:9px}
#ad1 h2{ height:29px; background:url(../image/h_ad1.gif) 0 0 no-repeat; margin: 25px 0 35px 24px; position:relative;}
#ad1 p{width: 175px; margin: 0 0 15px 19px}

#ad2{width:231px; height:260px; float:left;  position:relative;  background:url(../image/b_ad2.jpg) 0 0 no-repeat; margin-top:9px}
#ad2 h2{ height:29px; background:url(../image/h_ad2.gif) 0 0 no-repeat; margin: 25px 0 35px 24px; position:relative;}
#ad2 p{width: 175px; margin: 0 0 15px 19px}

#ad3{width:231px; height:260px; float:left;  position:relative;  background:url(../image/b_ad3.jpg) 0 0 no-repeat; margin-top:9px}
#ad3 h2{ height:29px; background:url(../image/h_ad3.gif) 0 0 no-repeat; margin: 25px 0 35px 24px; position:relative;}
#ad3 p{width: 175px; margin: 0 0 15px 19px}


/* CONTENT */

#content{width:773px; background:url(../image/b_content.gif) 0 0 repeat-y; margin:0 auto;}

#content ul li{font:11px/16px Tahoma, sans-serif; background:url(../image/arrow2.gif) 0 2px no-repeat; padding-left:24px; margin-bottom:6px}
#content ul li a{color:#81929b; text-decoration:none;}
#content ul li a:hover{color:#000}

#leftPan{width: 297px; padding:25px 49px 0 61px; float:left}
#rightPan{width: 327px; padding:25px 0 0 0; float:left}

#welcome h2{ height:31px; background:url(../image/h_welcome.gif) 0 0 no-repeat; position:relative;}
#welcome p.headline{display:block; width:287px; border-bottom:#c0c8cd 1px dotted; border-top:#c0c8cd 1px dotted; font:12px/12px Trebuchet MS, sans-serif; color:#dd137b; padding:5px 5px 5px 3px; text-transform:uppercase; margin-bottom:11px; float:none}

#welcome img{float:left; margin-right:10px}

#welcome p{width:180px; float:left}

#welcome ul{ margin-left: 12px;}


#why h2{ height:31px; background:url(../image/h_why.gif) 0 0 no-repeat; position:relative; margin-bottom:7px}
#why p{width:318px; margin-left:8px; margin-bottom:12px}
#why ul{ margin-left: 19px;; margin-bottom:15px}


/* BOTTOM */

#bottomContainer{background:#FFF url(../image/b_bottom.gif) 0 0 repeat-x; height:93px;}

#footer{background:url(../image/b_footer.gif) 0 0 no-repeat; height:93px; position:relative; margin:0 auto; width:773px;}

#footer p{padding: 35px 0 0 0; font:11px/16px Trebuchet MS, sans-serif; font-weight:normal; text-align:center; color:#fff;}
#footer p a{font:11px/16px Trebuchet MS, sans-serif; font-weight:normal; color:#fff; text-decoration:none; padding: 0 5px }
#footer p a:hover{text-decoration:none; background:#fff; color:#000}
.sponsor {
	margin: auto;
	width: 728px;
	padding-top: 10px;
	padding-bottom: 15px;
	text-align: center;
}
.sponsor img {
	margin-top: 5px;
}

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习 。

七、🎁更多干货

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

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

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

在这里插入图片描述

html5网页设计
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 1万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
【html + css】六一快乐
weixin_45562037的博客
07-07 985
效果视频展示：六一快乐
夏天html源码,这才是一个正规程序猿夏天应该使用的骚气冰人的烂漫飘雪HTML5登录页面模版...
weixin_39581571的博客
06-15 156
假如你的系统是很多妹子用的，比如OA，ERP系统，这个模版还是挺适合的。动态GIT体验下，浪漫雪花输入密码，猫头鹰同志还懵逼小闭眼用这种系统做界面，夏天心情凉爽。干活就起劲。好了，如果觉得这个登录页面模版还可以，如果需要的话，往下看：部分源码：content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-sca...
HTML做一个个人博客页面（纯html代码）
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
【网页设计】HTML做一个属于我的音乐页面（纯html代码）
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
我的大二web课程设计 使用HTML做一个简单漂亮的页面（纯html代码）
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
如何制作传统节日网站（纯HTML代码）
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
大学生网页制作(六一儿童节)
11-28
这个是大二制作的网页作品,不知道大家需要不?有兴趣不?我现在免费送给大家.希望大家有用.是关于六一儿童节的题材,我还有设计FLASH,JSP,JAVA,PHP,ASP等等一系列的代码,如果同学有需要的可以加我QQ 1442923112
静态网页——儿童节作品
06-10
静态网页、6个静态网页\毕业设计作品，比较简单、但很是实用
61儿童节源码网站源码
08-29
中国最大的儿童网站源码中国最大的儿童网站源码中国最大的儿童网站源码中国最大的儿童网站源码中国最大的儿童网站源码
html期末作业代码网页设计 我的家乡网站设计——我的家乡-四川成都(4页) HTML+CSS+JavaScript
qq_524614081的博客
06-17 1462
HTML5期末大作业：我的家乡网站设计——我的家乡-四川成都(4页) HTML+CSS+JavaScript 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 作品介绍 1.网页作
夏日小风扇（.html实现）——小太阳给她带去凉爽
weixin_46039719的博客
06-22 1504
目录🍌写在前面💞🍓小小前端实现 💞📢快乐鸭带走 💞 已经很久没给她写文章了，然后呢，夏日的酷暑，感觉自己该写点什么了。这不，灵感就来了。先商店买了一个小风扇给她，现在在电脑旁，准备代码实现出来。网上买的小风扇这个可爱样，分享看看：...
第一章 HTML基础 ② 代码练习
Liu_wen_wen的博客
06-06 1932
HTML基础 多种标签的代码
如何制作六一儿童节H5页面
周末简设
09-15 317
/ 01 / 标题 如何制作六一儿童节H5页面 / 02 / 图摘 / 03 /
六一儿童节代码html
最新发布
06-02
以下是一个简单的六一儿童节祝福页面的 HTML 代码： ```html <!DOCTYPE html> <html> 六一儿童节快乐！ body { background-color: #F7DEE5; font-family: Arial, sans-serif; text-align: center;...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

html5网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值