html胶州秧歌舞蹈

一、👨‍🎓网站题目

旅游，当地特色，历史文化，特色小吃等网站的设计与制作。

二、✍️网站描述

👨‍🎓静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

三、📚网站介绍

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

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

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

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

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

 四、🌐网站效果

五、🪓 代码实现

🧱HTML

 <div class="banner">
        <img src="images/b5.png" height="500px"  width="100%"/>
        <div class="head">
            <div class="logo">
                <a href="#">
                    <img src="images/logo.png" />
                </a>
            </div>
            <div class="nav">
            <a href="index.html">首页 </a>
            <a href="industry.html" > 胶州秧歌</a>
            <a href="products.html" class="cur">来源 </a>
            </div>
            <div class="search">
                <input type="text" placeholder="站内信息搜索" />
                <a href="#">搜索 </a>
            </div>
        </div>
    </div>
    <div class="industry">
        <div class="all">
            <div class="tit">
                <h2>
                    景点
                </h2>
            </div>
            <ul>
                <li>
                    <div class="img">
                        <img src="images/p1.png" />
                    </div>
                    <div class="txt">
                        胶州秧歌
                    </div>
                </li>
                <li>
                    <div class="img">
                        <img src="images/p2.png" />
                    </div>
                    <div class="txt">
                        胶州秧歌
                    </div>
                </li>
                <li>
                    <div class="img">
                        <img src="images/p3.png" />
                    </div>
                    <div class="txt">
                        胶州秧歌
                    </div>
                </li>
            </ul>
            <br />
            <br />
            <div class="c">
            </div>
        </div>
    </div>
    <div class="scenarios">
        <div class="all">
            <div class="tit">
                <h4>发展历程</h4>
                <h4>
                 胶州秧歌最初是舞蹈加民歌的小调秧歌，后由“扭扭唱唱”形式发展成以“舞戏结合”为主的小戏秧歌。胶州秧歌传承模式也由初始的以家庭、村落为主的体系演变为有班主组织的科班形式，当地名曰“安锅”。自1864年胶州楼子埠村人刘彩建立第一个“安锅”点起，通过实践中不断的锻炼、磨合，安锅这种训练形式也不断成熟起来，开始向着规范化、专业化的方向发展。
胶州秧歌分为两个流派：以刘彩为首的流派称“文秧歌”，又称“东路秧歌”；以陈銮增为首的秧歌称“武秧歌”又称“西路秧歌”。文秧歌与武秧歌经过十余年的竞争，在自身的发展中，互相取长补短，使胶州秧歌保留了文秧歌的妩媚抻展，又带有武秧歌的粗犷豪放，逐渐文武两派融为一体，把胶州秧歌推向了一个新的发展阶段。
解放后，通过挖掘、整理和宣传推广，胶州秧歌有了更大的发展，进入20世纪90年代后，农村的生活习俗和价值观念与之前相较有很大改变，年青一代不再把扭胶州秧歌当做挣钱养家的谋生手段，而是闲暇时偶尔哼上几声小调，甚至是跳几个舞蹈动作。     
                      </h4>
 
            <div class="c">
            </div>
        </div>
    </div>
            <div class="c">
            </div>
        </div>
    </div>
    <div class="foot">
    <p align="center">胶州秧歌</p>
    </div>
</body>
</html>

🧱css

*{ margin:0px; padding:0px;}
body 
{
    line-height:1.5;
    font-family:微软雅黑;
}
a{ text-decoration:none;}
ul,li{ list-style:none; }
img{ max-width:100%; vertical-align:middle; }
.c{ clear:both; }
.all{ width:1000px; margin:0 auto; }
.tit { text-align:center; margin-bottom:20px; }
.tit h2{ font-size:30px; }
.tit p{ font-size:24px; font-weight:bolder; }
.banner{ position:relative; }
.banner .head{ position:absolute; left:0px; top:0px; background:rgba(0,0,0,0.5); width:100%; box-sizing:border-box; padding:2px 10%; }
.banner .head .logo{ float:left; }
.banner .head .nav{ float:left; margin-left:40%; }
.banner .head .nav a{ line-height:41px; font-size:16px; color:#feffff; margin:0px 10px; }
.banner .head .nav a:hover{ color:#969696; }
.banner .head .nav a.cur{ color:#969696; }
.banner .head .search{ float:right; padding-top:5px; }
.banner .head .search input{ background:#424848; border-radius:10px; text-align:center; border:0; margin-right:20px; font-size:12px; padding:4px 20px; }
.banner .head .search a{ color:#fff;font-size:12px; background:#424848; padding:4px 20px; border-radius:10px;   }

.tech { margin-top:40px; }
.tech .techl{ float:left; width:50%; line-height:50px; }
.tech .techr{ float:right; width:48%; }
.tech .techr p{ font-size:15px; }
.tech .techr img{ margin-top:20px; }
.tech .techr .tit{ margin-left:100px; margin-bottom:10px;  text-align:left; }
.tech .techr .tit p{ margin-left:0px; }
.tech .techr p{ margin-left:100px; margin-bottom:4px; }
.pro{ margin-top:40px; }
.pro ul{ overflow:hidden; }
.pro ul li{ overflow:hidden; width:19.2%; margin-right:1%; text-align:center; float:left; }
.pro ul li:nth-child(2n+1){ margin-top:100px; }
.pro ul li .txt{ font-size:16px; color:#787878; line-height:3; }
.pro ul li img{ width:100%; }
.pro ul li:last-child{ margin-right:0px; }
.ad{ margin-top:40px; }
.news{ margin-top:40px; }
.news .newsl{ float:left; width:50%; overflow:hidden; }
.news .newsr{ float:left; width:50%; }
.news .newsl img{ float:left; }
.news .newsl .links{ float:left; background:#ebedee; padding:60px 10px; margin-top:200px; }
.news .newsl .links a{ font-size:24px; color:#000000; }
.news .newsl .links p{ margin:10px 0px; }
.news .newsr .links{ background:#ebedee; width:100%; padding:10px 20px; font-size:24px; margin-bottom:30px;  }
.news .newsr .links a{ float:right; color:#000000;  margin-right:40px;  }
.news .newsr h3{ font-size:20px; font-weight:normal; margin-bottom:30px;   }
.news .newsr p{ font-size:18px; color:#787878; line-height:2.5; padding-left:2em;  }
.news .newsr a.xq{ font-size:16px; background:#ebedee;  color:#787878; padding:10px 20px; display:inline-block; margin-left:400px; margin-top:20px;  }
.foot{ margin-top:40px; }
.ad{ background:url(../images/ad.png) no-repeat top center; background-size:100% 100%; text-align:center; padding:40px 0px;  }
.ad p{ font-size:24px; line-height:1.8; color:#ffffff; }
.foot{ background:url(../images/bottom.png) no-repeat top center; background-size:100% 100%; 
          padding:50px 0px; position:relative; } 
.foot a{ color:#fffefe;  font-size:17px; } .foot p{ color:#fffefe; font-size:24px;  } 
.foot ul{ overflow:hidden; }
.foot ul li{ float:left; width:25%;  }
.foot .ewm{ position:absolute; left:100px; top:60px; text-align:center; }
.copy{ background:#4d5254; text-align:center; padding:5px 0px; }
.copy p{ color:#fff; font-size:17px; color:#fffefe; }

.industry{ margin-top:40px; }
.scenarios{ margin-top:40px; }
.case{ margin-top:40px; }

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

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

七、🎁更多干货

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

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