Web前端期末大作业--响应式少儿舞蹈网页设计(HTML+CSS+JavaScript)实现_舞蹈网页html

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量182 收藏 5
点赞数 1
分类专栏： 程序员 文章标签： 前端 课程设计 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84437982/article/details/138325221
版权 
        var sg = document.createElement("SCRIPT");
        sg.setAttribute("src", "/g/js/freedom.js?v1.19.03.19");
        (
          document.head || document.getElementsByTagName("head")[0]
        ).appendChild(sg);
        sg.onload = function () {
          _g.take($(document));
        };
      };
      if (!window.jQuery) {
        var sj = document.createElement("SCRIPT");
        sj.setAttribute("src", "/g/js/jquery-1.11.1.min.js");
        (
          document.head || document.getElementsByTagName("head")[0]
        ).appendChild(sj);
        sj.onload = l1;
      } else l1();
    };
    window.addEventListener
      ? window.addEventListener("load", l)
      : window.attachEvent("onload", l);
  })();


**首页index.html**

欢迎来到某某舞蹈培训官方网站

服务热线: 400-0000-000

<div class="banners-pc">
  <div
    class="frame"
    style="background-image: url(img/banner-index-p.jpg)"
  ></div>
  <div
    class="frame"
    style="background-image: url(img/banner-index-p.jpg)"
  ></div>
</div>
<div class="banners-mb" zoom-width="1024" zoom-heigh="685">
  <div
    class="frame"
    style="background-image: url(img/banner-index-m.jpg)"
  ></div>
  <div
    class="frame"
    style="background-image: url(img/banner-index-m.jpg)"
  ></div>
</div>
<script>
  (function () {
    $(".banners-pc, .banners-mb").slick({
      arrows: true,
      dots: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 5000,
      speed: 500,
    });
  })();
</script>
<style>
  .banners-pc .slick-dots,
  .banners-mb .slick-dots {
    bottom: 60px;
  }
</style>

<!--主体内容-->
<!--课程选择-->
<div class="main1">
  <div class="g_cw">
    <div class="g_title">
      <p class="l2">
        CURRICULUM
        <span class="ico"><img src="img/logo_m.png" /></span> SELECTION
      </p>
      <p class="l1">课程选择</p>
    </div>

    <div class="offset">
      <ul class="list">
        <li class="li1">
          <a href="coursedetail.html?_id=10021" class="box" target="_blank">
            <p class="pic">
              <img src="img/rvzqwzq3ef0pjy1.jpg" class="g_imgf" />
            </p>
            <div class="font">
              <p class="p1">少儿拉丁舞<span class="line"></span></p>
              <p class="p2">
                童通过拉丁舞的训练可以再未来的身体发育中曲线变得更美，身心健康活动，增强体质，气质高贵。
              </p>
              <p class="btn"><span class="more">MORE</span></p>
            </div>
          </a>
        </li>

        <li class="li1">
          <a href="coursedetail.html?_id=10020" class="box" target="_blank">
            <p class="pic">
              <img src="img/3a66kpukvktvaby.jpg" class="g_imgf" />
            </p>
            <div class="font">
              <p class="p1">少儿民族舞<span class="line"></span></p>
              <p class="p2">
                童通过民族舞的训练可以再未来的身体发育中曲线变得更美，身心健康活动，增强体质，气质高贵。
              </p>
              <p class="btn"><span class="more">MORE</span></p>
            </div>
          </a>
        </li>

        <li class="li1">
          <a href="coursedetail.html?_id=10019" class="box" target="_blank">
            <p class="pic">
              <img src="img/arjjxkvl0fv5iyq.jpg" class="g_imgf" />
            </p>
            <div class="font">
              <p class="p1">少儿中国舞<span class="line"></span></p>
              <p class="p2">
                童通过中国舞的训练可以再未来的身体发育中曲线变得更美，身心健康活动，增强体质，气质高贵。
              </p>
              <p class="btn"><span class="more">MORE</span></p>
            </div>
          </a>
        </li>

        <li class="li1">
          <a href="coursedetail.html?_id=10018" class="box" target="_blank">
            <p class="pic">
              <img src="img/34dji6sorejd59t.jpg" class="g_imgf" />
            </p>
            <div class="font">
              <p class="p1">少儿芭蕾<span class="line"></span></p>
              <p class="p2">
                童通过芭蕾的训练可以再未来的身体发育中曲线变得更美，身心健康活动，增强体质，气质高贵。
              </p>
              <p class="btn"><span class="more">MORE</span></p>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="main2">
  <div class="g_cw">
    <div class="g_title">
      <p class="l2" style="color: #b54884">
        TEACHER
        <span class="ico"><img src="img/logo_m.png" /></span> INTRODUCED
      </p>
      <p class="l1" style="color: #df3d47">名师介绍</p>
    </div>
    <div class="intro">
      <div class="font">
        <p class="h1">教学总监：李文丽</p>
        <p class="p1">
          硕士学位，毕业于沈阳音乐学院。从教6年，曾担任浙江省歌剧舞剧院独舞演员，全国“桃李杯”舞蹈比赛一等奖，全国舞蹈比赛表演三等奖。<br />
          辽宁省“荷花杯”舞蹈比赛表演金奖，。曾参加辽宁电视台、湖南卫视春节文艺晚会......
        </p>
        <a href="#" class="more">READ MORE ></a>
      </div>

      <ul class="list">
        <li>
          <a href="teacherdetail.html?_id=10017" class="box" target="_blank"
            ><img src="img/h1vztvumx5satbp.jpg"
          /></a>
        </li>

        <li>
          <a href="teacherdetail.html?_id=10016" class="box" target="_blank"
            ><img src="img/yvyrw621gfw1qw1.jpg"
          /></a>
        </li>

        <li>
          <a href="teacherdetail.html?_id=10015" class="box" target="_blank"
            ><img src="img/bp0zq4z62fy7u38.jpg"
          /></a>
        </li>

        <li>
          <a href="teacherdetail.html?_id=10014" class="box" target="_blank"
            ><img src="img/kiexw21qgljqyn6.jpg"
          /></a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="main3">
  <div class="g_cw">
    <div class="g_title">
      <p class="l2" style="color: #0b8f54">
        NEWS
        <span class="ico"><img src="img/logo_m.png" /></span> INFORMATION
      </p>
      <p class="l1" style="color: #ec8520">新闻资讯</p>
    </div>
    <div class="top">
      <p class="pic">
        <span class="tp"
          ><img src="img/index_news1.jpg" class="g_imgf"
        /></span>
        <span class="bg"></span>
      </p>
      <div class="font">
        <ul class="nav">
          <li><a href="news.html?_ct=最新活动" class="box">最新活动</a></li>
          <li style="border-left: 1px solid #fff">
            <a href="news.html?_ct=行业新闻" class="box">行业新闻</a>
          </li>
        </ul>

        <div class="con">
          <a href="newsdetail.html?_id=10010" class="box" target="_blank">
            <p class="p1 g_ell">
              单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演
            </p>
            <p class="p2">
              单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演
            </p>
            <span class="more">READ MORE ></span>
          </a>
        </div>
      </div>
    </div>
    <div class="bottom">
      <ul class="list">
        <li>
          <a href="newsdetail.html?_id=10010" class="box" target="_blank">
            <p class="time">2019.02.28</p>
            <span class="line"></span>
            <p class="p1 g_ell">
              单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演
            </p>
            <p class="p2">
              单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演
            </p>
          </a>
        </li>

        <li>
          <a href="newsdetail.html?_id=10010" class="box" target="_blank">
            <p class="time">2019.02.28</p>
            <span class="line"></span>
            <p class="p1 g_ell">
              单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

">

2019.02.28




单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端资料图.PNG

2401_84437982
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端期末大作业--响应式少儿舞蹈网页设计(HTML+CSS+JavaScript)实现
java李阳勇的博客
06-05 4472
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在这里都能解决、常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生
web前端网页设计期末课程大作业：企业网页主题网站设计——舞蹈培训11页HTML+CSS+JavaScript
网页设计与制作
10-21 122
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
HTML网页设计制作大作业-制作漫画网页设计6个页面(HTML+CSS+JavaScript)
热门推荐
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-22 3万+
HTML期末大作业~制作简单漫画网页设计6个页面(HTML+CSS+JavaScript) 学生动漫网页设计模板下载 海贼王大学生HTML网页制作作品 简单漫画网页设计成品 dreamweaver学生网站模板 HTML网页设计制作大作业-供包含注册 登录 首页 动漫电影 日本动漫 国产动漫 OVA版 排行榜 等 8个页面 网页制作介绍 关于动漫的HTML网页制作，，HTML期末作业大作业A+水平！！主要特色：附带音效，8个网页8个风格。每个都有不同的美感~ 随着动漫产业，动漫文化的不断发展，动漫已经从过去的
Web网页设计制作-毕业设计期末大作业-HTML+CSS+JavaScript的前端网页项目源码
06-13
内含详细文档说明，可作为高分课程设计和期末大作业的使用，含有代码注释小白也可看的懂，有能力的小伙伴也可以在此基础上进行二开，Web网页设计制作-毕业设计期末大作业-HTML+CSS+JavaScript的前端网页项目源码。...
Web网页设计制作-毕业设计期末大作业-HTML、CSS、JavaScript前端网页项目源码
06-15
Web网页设计制作-毕业设计期末大作业-HTML、CSS、JavaScript前端网页项目源码，非常精美的个人手打98分静态网页设计项目源码，看存储大小就知道足够精美，代码完整下载即用无需修改，确保可以运行。 Web网页设计...
web前端期末结课大作业 html+css+javascript网页设计实例 企业网站制作
11-15
期末结课大作业 html+css+javascript网页设计实例 企业网站制作，资源里面有网页的HTML文件、CSS文件、JAVASCRIPT文件和网页中的图片文件，用于大学web网页课程设计参考以及相关从业人员参考学习
web前端期末大作业：HTML+CSS+JavaScript绿色的盆栽花店网站响应式模板 大学生鲜花网页设计
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
Web前端大作业-个人网页(html+css+javascript)
06-28
【标题】"Web前端大作业-个人网页(html+css+javascript)"揭示了这个项目的核心是构建一个基于HTML、CSS和JavaScript的个人网页。这三种技术是Web开发的基础，用于创建动态、交互式的网页内容。 HTML（HyperText ...
前端与HTML
m0_65544927的博客
07-21 513
HTML 不是一种编程语言，而是一种标记语言HyperTextMarkupLanguage。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 283
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 227
【代码】TS如何处理js模块的类型？
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 233
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 248
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 973
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 628
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 909
CTFWP，ctfshow-web42
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 534
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
web前端期末结课大作业 html+css+javascript网页设计代码
06-07
很抱歉，我不能帮你直接提供代码。但是，我可以给你一些建议和指导，帮助你完成这个项目。 首先，你需要确定你的网页设计主题和目标受众。然后，你需要创建HTML文件并编写页面的基本结构，包括头部、主体和底部。在HTML文件中，你需要使用语义化标签来描述页面内容，这有助于SEO优化和提高页面可访问性。 接下来，你需要使用CSS样式来美化页面。你可以使用CSS的各种属性来调整颜色、字体、布局和其他元素的样式。你可以使用CSS框架或预处理器来简化样式表的编写，例如Bootstrap或Sass。 最后，你可以使用JavaScript来添加交互性和动态元素。你可以使用JavaScript库和框架来简化编写，例如jQuery或React。 总之，完成这个项目需要耐心和实践，希望我的建议能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值