Web前端期末大作業--響應式舞蹈網頁設計(HTML+CSS+JavaScript)實現

語言: CN / TW / HK

持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第12天,點選檢視活動詳情

前言介紹

臨近期末, 你還在為HTML網頁設計結課作業,老師的作業要求感到頭大?網頁要求的總數量太多?HTML網頁作業無從下手?沒有合適的模板?等等一系列問題。你想要解決的問題,在這裡都能解決、常見網頁設計作業題材有 個人、 美食、 公司、體育、 化妝品、 物流、 環保、 書籍、 婚紗、 軍事、 遊戲、 節日、 戒菸、 電影、 攝影 學校、 旅遊、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 明星、 服裝、 文化、 家鄉、 鮮花、 禮品、 汽車、 其他等網頁設計題目, A+水平作業, 可滿足大學生網頁大作業網頁設計需求都能滿足你的需求。原始HTML+CSS+JS頁面設計, web大學生網頁設計作業原始碼,這是一個不錯的綠色自適應醫療健康醫院網頁設計製作,畫面精明,非常適合初學者學習使用。

設計佈局

主頁設計佈局是在網站的左上角是網站標題名稱為少兒舞蹈、首頁、關於我們、課程展示、等模組,點選相應的導航欄目頁面跳轉到相應位置。首頁採用div+js+css來實現少兒舞蹈培訓學校背景圖的引入和隔一定時間實現迴圈自動來回切換背景圖,通過js設定切換間隔,每張圖的停留時間。網站中央是內容,分別包含幾大大板塊,每個版塊由不同的div塊組成,右上角是主題,下面是詳情的文字介紹,右邊配上相應的圖片,增加網站的觀賞性,吸引性。少兒舞蹈培訓學校美的恰恰是其在不同場景下的景色圖。網站底部分別是網站介紹資訊,採用居中透明顯示,文字大小和樣式用css來控制,美觀大方。

功能截圖

系統首頁:

關於我們:

課程展示:

師資力量:

新聞資訊:

教學成果:

關鍵程式碼:

js (function () { var l = function () { var l1 = function () { 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

```html

<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>

        <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">

            </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">

        </li>

        <li>
          <a href="newsdetail.html?_id=10009" 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年度武漢地區成人優秀舞蹈作品展演
            </p>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

<!--主體內容 end-->

<div class="g_footer">
  <div class="top clearfix">
    <div class="g_cw">
      <p class="pic"><img src="img/logo_bottom.png" /></p>
      <ul class="nav clearfix">
        <li>
          <div class="box">
            <p class="h1">關於我們</p>
            <a href="about.html?_ct"><p class="p1">學校介紹</p></a>
          </div>
        </li>

        <li>
          <div class="box">
            <p class="h1">課程展示</p>
            <a href="#"><p class="p1">少兒芭蕾</p></a>
            <a href="#"><p class="p1">民間民族舞</p></a>
            <a href="#"><p class="p1">古典舞</p></a>
            <a href="#"><p class="p1">拉丁舞</p></a>
          </div>
        </li>
        <li>
          <div class="box">
            <p class="h1">師資團隊</p>
            <a href="#"><p class="p1">教室團隊</p></a>
          </div>
        </li>
        <li>
          <div class="box">
            <p class="h1">教室環境</p>
            <p class="p1">環境展示</p>
          </div>
        </li>

        <li>
          <div class="box">
            <p class="h1">教學成果</p>
            <p class="p1">精彩瞬間</p>
          </div>
        </li>

```

原始碼獲取

大家點贊、收藏、關注、評論啦 、檢視👇🏻👇🏻👇🏻主頁👇🏻👇🏻👇🏻

打卡 文章 更新 275/  365天