HTML5 final assignment: Blue campus culture development enterprise template html(7 pages) HTML+CSS+JavaScript

HTML5 final assignment: Blue campus culture development enterprise template html(7 pages) HTML+CSS+JavaScript final assignment HTML code student web page course design final assignment Download Web page design

Near the end of the term, you are still designing your final homework for HTML web pages. Do you feel the teacher's homework requirements are great? Can't you start HTML web page homework? The total number of pages required is too much? No suitable template? And so on. The problems you want to solve can basically meet your needs in this blog post~

Original HTML+CSS+JS page design, web college students' web design homework source code, this is a good web page production, the picture is smart, and is very suitable for beginners to learn and use.

Introduction to works

1. Introduction to web works: HTML final college students' web design homework can be downloaded if they like. The article page supports mobile PC responsive layout.

2. Web page work editing: this work is the subject of web page design for students' final homework, and the code is simple student level html+css layout. After the work is downloaded, any HTML editing software can be used (for example, all editors of DW, HBuilder, NotePAD, vscade, Sublime and Webstorm can be used)

3. Web page work layout: the overall web page layout includes LOGO, navigation and main content layout. There are many layouts of sub pages. The contents of interests and hobbies use the picture list layout. The score page inserts a table. Contact us to set the left alignment using the picture alignment.

4. Web page work technology: CSS is used to make web page background, mouse passing, selected navigation color change effect, underline, etc. A message form is made on the home page, and a form judgment is made simply using JavaScript (the form cannot be empty when submitted)

1, Work demonstration

2, Code directory

3, Code implementation

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Home page of foster culture Co., Ltd</title>
    <meta name="keywords" content="keywords"/>
    <meta name="description" content="description"/>
    <script type="text/javascript" src="js/base-loading.min.js"></script>
    <link rel="stylesheet" href="css/style.css"/>
  </head>
  <body>
    <div class="s_header w">
      <div class="s_header_top w">
        <div class="header_top w1000 auto">
          <div class="header_top_fl fl">Welcome to Sichuan foster culture development Co., Ltd</div>
          <div class="header_top_fr fr"><span class="header_email dib">scwjedu@163.com</span><span class="header_tel dib">028-65652769</span>
            <div class="cb"></div>
          </div>
          <div class="cb"></div>
        </div>
      </div>
      <div class="s_header_nav w">
        <div class="header_nav w1000 auto">
          <div class="logo fl"><a href="index.html"><img src="images/logo.png" alt=""/></a></div>
          <div class="nav fr">
            <ul>
              <li><a href="index.html">home page</a></li>
              <li class="pr"><a href="about.html">About us </a>
                <div class="nav_son pa none">
                  <ul>
                    <li><a href="">School concept orientation</a></li>
                    <li><a href="">VI Visual design</a></li>
                    <li><a href="">Corridor culture</a></li>
                    <li class="sonlast"><a href="">picture album</a></li>
                  </ul>
                </div>
              </li>
              <li class="pr"><a href="design.html">Design appreciation</a>
                <div class="nav_son pa none">
                  <ul>
                    <li><a href="">School concept orientation</a></li>
                    <li><a href="">VI Visual design</a></li>
                    <li><a href="">Corridor culture</a></li>
                    <li class="sonlast"><a href="">picture album</a></li>
                  </ul>
                </div>
              </li>
              <li class="pr"><a href="server.html">Scope of services </a>
                <div class="nav_son pa none">
                  <ul>
                    <li><a href="">School concept orientation</a></li>
                    <li><a href="">VI Visual design</a></li>
                    <li><a href="">Corridor culture</a></li>
                    <li class="sonlast"><a href="">picture album</a></li>
                  </ul>
                </div>
              </li>
              <li class="pr"><a href="news.html">Design process</a>
                <div class="nav_son pa none">
                  <ul>
                    <li><a href="">School concept orientation</a></li>
                    <li><a href="">VI Visual design</a></li>
                    <li><a href="">Corridor culture</a></li>
                    <li class="sonlast"><a href="">picture album</a></li>
                  </ul>
                </div>
              </li>
              <li class="pr"><a href="news.html">Expert lecture hall</a>
                <div class="nav_son pa none">
                  <ul>
                    <li><a href="">School concept orientation</a></li>
                    <li><a href="">VI Visual design</a></li>
                    <li><a href="">Corridor culture</a></li>
                    <li class="sonlast"><a href="">picture album</a></li>
                  </ul>
                </div>
              </li>
              <li class="last pr"><a href="contact.html">contact us</a>
                <div class="nav_son pa none">
                  <ul>
                    <li><a href="">School concept orientation</a></li>
                    <li><a href="">VI Visual design</a></li>
                    <li><a href="">Corridor culture</a></li>
                    <li class="sonlast"><a href="">picture album</a></li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
          <div class="cb"></div>
        </div>
      </div>
    </div>
    <div class="header_line"></div>
    <div class="banner">
      <div id="banner" class="dv_5"><a href="" style=" background:url(images/banner1.png) center center no-repeat; display: block; z-index: 1; " class="d1"></a><a href="" style=" background:url(images/banner2.png) center center no-repeat; display: block; z-index: 1; " class="d1"></a><a href="" style=" background:url(images/banner3.png) center center no-repeat; display: block; z-index: 1; " class="d1"></a>
        <div id="banner_id" class="d2">
          <table cellspacing="0" cellpadding="0">
            <tr>
              <td>
                <div class="nuw"></div>
              </td>
              <td>
                <div></div>
              </td>
              <td>
                <div></div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="cen_tip w">
      <div class="tip auto">
        <ul>
          <li class="first"><a href="" class="pr">
              <div class="tit">Online consultation</div>
              <div class="entit">CONSULTING</div>
              <div class="pa tip_img_1"><img src="images/tip_1.png" alt=""/></div></a></li>
          <li><a href="" class="pr">
              <div class="tit">Cooperation process</div>
              <div class="entit">COOPERATION</div>
              <div class="pa tip_img_2"><img src="images/tip_2.png" alt=""/></div></a></li>
          <li><a href="" class="pr">
              <div class="tit">Case display</div>
              <div class="entit">CASES SHOWS</div>
              <div class="pa tip_img_3"><img src="images/tip_3.png" alt=""/></div></a></li>
          <li><a href="" class="pr">
              <div class="tit">contact us</div>
              <div class="entit">CONTACT US</div>
              <div class="pa tip_img_4"><img src="images/tip_4.png" alt=""/></div></a></li>
        </ul>
      </div>
    </div>
    <div class="s_cen w">
      <div class="center w1000 auto">
        <div class="cen_one">
          <div class="cen_one_fl fl">
            <div class="jqal_top">
              <div class="jqal_top_tit fl">Recent cases</div>
              <div class="jqal_top_more fr"><a href="">more></a></div>
              <div class="cb"></div>
            </div>
            <div class="jqal_bom mychgPic">
              <div id="myFocus" class="mF_liuzg">
                <div class="loading"><span>please wait a moment...</span></div>
                <ul class="pic">
                  <li><a href="" target="_blank"><img src="images/focus_1.png" alt="Jintang Foreign Language Experimental School"/></a></li>
                  <li><a href="" target="_blank"><img src="images/ink_120603pic2.jpg" alt="Jintang foreign language experimental school 2"/></a></li>
                  <li><a href="" target="_blank"><img src="images/ink_120603pic3.jpg" alt="Jintang foreign language experimental school 3"/></a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="cen_one_fr fr">
            <div class="cen_one_fr_top">
              <div class="cen_one_fr_tit fl">About us</div>
              <div class="cen_one_fr_more fr"><a href="">more></a></div>
              <div class="cb"></div>
            </div>
            <div class="cen_one_fr_bom">
              <div class="cen_one_img fl"><img src="images/cen_one_img.png" alt=""/></div>
              <div class="cen_one_desc fr">
                Sichuan foster culture development Co., Ltd., founded in 2013, is a Chengdu wanjuan education and training school and two cultural institutions					A company specialized in Campus (enterprise) culture, planning				The comprehensive cultural industry organization of design, construction and enterprise brand promotion is the "campus culture" of Western Education Research Institute					The franchising recommendation unit of "industrialization construction".
                The company has well-known education experts inside and outside the province for guidance. The company's business covers the extraction of school spirit and ideas, VI System design the design, construction and construction of campus characteristic landscape, garden, sculpture and function room. The company focuses on school culture research and development, campus culture design and construction, space display design and construction, picture album /Packaging design, printing and other professional services. We hope to create the best quality and style for each of our schools through professional services.
                <p><a href=""> [ View details ]</a></p>
              </div>
              <div class="cb"></div>
            </div>
          </div>
          <div class="cb"></div>
        </div>
        <div class="cen_two">
          <div class="cen_two_fl fl">
            <div class="fwfw_top">
              <div class="fwfw_top_tit fl">Scope of services</div>
              <div class="fwfw_top_more fr"><a href="">more></a></div>
              <div class="cb"></div>
            </div>
            <div class="fwfw_bom picMarquee-top">
              <div class="bd">
                <ul>
                  <li><a href="" alt=""><img src="images/marquee_1.png" alt="" class="fl"/>
                      <div class="fwfw_marquee fr">
                        <div class="fwfw_tit">School concept orientation</div>
                        <div class="fwfw_desc">Coordinate the management of foreign teachers and foreign teachers</div>
                      </div>
                      <div class="cb">										</div></a></li>
                  <li><a href="" alt=""><img src="images/marquee_2.png" alt="" class="fl"/>
                      <div class="fwfw_marquee fr">
                        <div class="fwfw_tit">School concept orientation</div>
                        <div class="fwfw_desc">Coordinate the management of foreign teachers and foreign teachers</div>
                      </div>
                      <div class="cb">	</div></a></li>
                  <li><a href="" alt=""><img src="images/marquee_3.png" alt="" class="fl"/>
                      <div class="fwfw_marquee fr">
                        <div class="fwfw_tit">School concept orientation</div>
                        <div class="fwfw_desc">Coordinate the management of foreign teachers and foreign teachers</div>
                      </div>
                      <div class="cb">											</div></a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="cen_two_cen fl">
            <div class="s_news_top">
              <div class="s_news_top_tit fl">news information</div>
              <div class="s_news_top_more fr"><a href="">more></a></div>
              <div class="cb"></div>
            </div>
            <div class="s_news_bom">
              <div class="s_news_flag_tit">Special research and suggestions of the CPPCC in Jinniu District, Chengdu importance of campus culture construction to build a beautiful school for students</div>
              <div class="s_news_flag_desc">"It is necessary to consolidate the achievements, popularize the experience and make a demonstration for the construction of campus culture in the whole region. This is a special survey of Jinniu District, Chengdu, Sichuan Province recently organized by some members of the CPPCC <a href="">[ View details ]</a></div>
              <div class="s_news_bom_ul">
                <ul>
                  <li><a href="">The unique campus culture benefits students a lot. With the balanced development of quality education...</a></li>
                  <li><a href="">Recently, the CPPCC Jinniu District, Chengdu City, Sichuan Province organized some members to conduct a special investigation on the campus culture construction of the whole region...</a></li>
                  <li><a href="">In the era of parallel development of diversified cultures, the style and genre of environmental art design are unique....</a></li>
                  <li><a href="">Special investigation and suggestions of the CPPCC in Jinniu District, Chengdu on the construction of campus culture...</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="cen_two_fr fr">
            <div class="cont_top">
              <div class="cont_top_tit fl">contact us</div>
              <div class="cont_top_more fr"><a href="">more></a></div>
              <div class="cb"></div>
            </div>
            <div class="cont_bom"><a href=""><img src="images/s_lxwm_bg.png" alt=""/></a>
              <p>Address: 712, building 4, No. 2, Xingsheng West Road, high tech Industrial Park, Jinniu District, Chengdu</p>
              <p>Tel: 028-65652769  69687568  13008198228</p>
              <p>Fax: 028-61892011</p>
              <p>E-Mail: scwjedu@163.com</p>
            </div>
          </div>
          <div class="cb"></div>
        </div>
      </div>
    </div>
    <div class="s_footer w">
      <div class="footer w1000 auto">
        <div class="footer_fl fl">
          <div class="footer_logo"><a href=""><img src="images/footer_logo.png" alt=""/></a></div>
          <div class="footer_line"></div>
          <div class="footer_fl_ul">
            <ul>
              <li><a href="">About us </a></li>
              <li><a href="">Design appreciation </a></li>
              <li><a href="">Scope of services  </a></li>
              <li><a href="">Design process </a></li>
              <li><a href="">Expert lecture hall</a></li>
              <li><a href="">contact us</a></li>
            </ul>
          </div>
          <div class="cb"></div>
          <div class="footer_fl_record">Shu ICP B 11022706 Copyright 2006-2016 Sichuan foster culture development Co., Ltd All Rights Reserved</div>
        </div>
        <div class="footer_fr fr">
          <div class="footer_fr_top">contact us</div>
          <div class="footer_line"></div>
          <p>Address: 712, building 4, No. 2, Xingsheng West Road, high tech Industrial Park, Jinniu District, Chengdu</p>
          <p>Tel: 028-65652769  69687568  13008198228</p>
          <p>Fax: 028-61892011</p>
          <p>E-Mail: scwjedu@163.com</p>
          <div class="footer_from">technical support|<a href="" target="_blank">Yunmu Technology</a></div>
        </div>
        <div class="cb"></div>
      </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
    <!--home page banner Special effects-->
    <script type="text/javascript" src="js/banner.js"></script>
    <script type="text/javascript" src="js/main.js"> </script>
    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
    <script>
      banner();
      //-Service scope and special effects
      jQuery(".picMarquee-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:3,interTime:50});
    </script>
  </body>
</html>


4, A complete set of web front-end introduction to advanced (Video + source code + materials + interview) (Tutorial)

A complete set of web front-end zero foundation - Introduction to advanced (Video + source code + development software + learning materials + interview questions) (Tutorial)
Suitable for entry-level to advanced children's shoes ~ send 1000 sets of HTML+CSS+JavaScript template websites

5, Source code acquisition

❉ ~ pay attention to me and praise the blog ~ bring you up knowledge every day!

❉1. See here, with the support of [praise + praise + collection] three companies, your "praise, praise and collection" is the driving force of my creation.

❉ 2. Pay attention to me ~ take you to learn every day: various front-end plug-ins, 3D cool effects, picture display, text effects, whole station templates, college students' Graduation HTML templates, final homework templates, etc! "There are many front-end developers here to discuss front-end Node knowledge and learn from each other"!

❉3. You can learn from each other about the above content and technology. You can wx public Z -- > Web front-end diary to get more source code!

6, More HTML final assignments (finished product download)

>>>Poke me > > > Click to enter 200 final assignments

The source code of more than 200 HTML5 final assessment assignments includes individuals, food, companies, schools, tourism, e-commerce, pets, electrical appliances, tea, home, hotels, dance, animation, stars, clothing, sports, cosmetics, logistics, environmental protection, books, wedding dress, military, games, festivals, smoking cessation, movies, photography, culture, hometown, flowers Gifts, cars and others can meet the web design needs of College Students' Web homework. You can download what you like!

Keywords: Javascript html5 css

Added by finkrattaz on Sun, 19 Dec 2021 02:11:06 +0200