中秋节的静态html页面

简介: 中秋节的静态html页面

设计主题:

中秋节,又称祭月节、月光诞、月夕、秋节、仲秋节、拜月节、月娘节、月亮节、团圆节等,是中国民间的传统节日。

设计原型图:

image.png

设计具体内容介绍

1.类选择器设置LOGO背景图片

image.png

2.下方设置导航栏,在标签选择器中将颜色设置为红色

           <ul>
                    <li><a href="#zqsy"><b>中秋赏月</b></a>
                    <li><a href="#lsyg"><b>历史沿革</b></a>
                    <li><a href="#jrbc"><b>节日别称</b></a>
                    <li><a href="#fsxg"><b>风俗习惯</b></a>
                    <li><a href="#shcs"><b>神话传说</b></a>
                    <li><a href="#wxjs"><b>文学记述</b></a>
                </ul>

3.下面插入图片

image.png

4.下面分三部分

Left:

中秋赏月:

image.png

 Mid:历史沿革

image.png

 Right:节日别称

image.png

5、插入图片

image.png

6.下面分三部分

Left:风俗习惯

image.png

Mid:神话传说

image.png

 Right:文学艺术

image.png

7.下面为页脚部分

1.        <footer class="footer">
            <nav class="nav">
                <ul>
                    <li class="li"><b>在线活动</b></li>
                    <li class="li"><a href="#">活动抽奖</a></li>
                    <li class="li"><a href="#">中秋大礼</a></li>
                    <li class="li"><a href="#">中奖名单</a></li>
                </ul>
            </nav>
            <nav class="nav2">
                <ul>
                    <li class="li"><b>综合快讯</b></li>
                    <li class="li"><a href="#">最新动态</a></li>
                    <li class="li"><a href="#">中秋要闻</a></li>
                </ul>
            </nav>
            <nav class="nav3">
                <ul>
                    <li class="li"><b>相关服务</b></b></li>
                    <li class="li"><a href="#">音乐网</a></li>
                    <li class="li"><a href="#">电影网</a></li>
                </ul>
            </nav>
            <nav class="nav4">
                <ul>
                    <li class="li"><b>关于我们</b></li>
                    <li class="li"><a href="#">合作关系</a></li>
                    <li class="li"><a href="#">寻求帮助</a></li>
                    <li class="li"><a href="#">给予意见</a></li>
                </ul>
            </nav>
<br/><br/><br/><br/><br/><br/><br/>Email:864232360@qq.com&nbsp;&nbsp;2021 龍弟</h2>
        </footer>

8.设置隐藏音乐,自动循环播放

<embed src="renxi.mp3" hidden="true"autostart="true"loop="true"/>

四、设计结果

image.png

gitee源码下载

github源码下载

相关文章
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
72 7
|
2月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
73 11
|
2月前
太便利了 !通义灵码方便生成html页面
太便利了 !通义灵码方便生成html页面
66 0
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
60 2
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
43 0
|
3月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
46 1
|
4月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
55 6
|
3月前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `&lt;html&gt;`, `&lt;head&gt;`, `&lt;body&gt;` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
90 0
|
3月前
|
XML Web App开发 数据格式
HTML 页面显示 XML 数据
10月更文挑战第2天
|
3月前
|
数据可视化 小程序 JavaScript
DIYGW可视化快速生成VUE3静态html页面
DIYGW可视化快速生成VUE3静态html页面
61 0