自适应式国外艺术学校介绍单页html源码模板_自适应html单页源码资源-CSDN文库

共38个文件

jpg：17个

png：6个

js：6个

需积分: 1 180 浏览量 2023-06-02 02:50:10 上传评论收藏 917KB RAR 举报

在IT领域，网页设计是不可或缺的一部分，特别是在教育行业中，一个吸引人的、功能完善的网站能够有效提升学校的形象和知名度。这款“自适应式国外艺术学校介绍单页html源码模板”正是为满足这样的需求而设计的。它是一个专为艺术学校定制的网页模板，具有响应式布局，能在不同设备上展示良好的视觉效果，无论是桌面电脑、平板还是手机，用户都能获得一致的浏览体验。 HTML（超文本标记语言）是构建网页的基础，是网站内容的结构化语言。此模板使用了HTML5，这是HTML的最新版本，引入了许多新特性，如语义化标签、多媒体支持（音频和视频）、离线存储以及更好的表单控件等。这些特性使得网页内容更丰富，同时提高了用户体验。 CSS（层叠样式表）和JavaScript则是让网页具备交互性和动态效果的关键技术。在这个模板中，JavaScript被用于实现图片gallery的onmouseover特效，当鼠标悬停在图片上时，可能会出现放大、旋转或淡入淡出等效果，增强了用户的互动感。JavaScript还允许动态更新内容、验证表单数据等功能，是现代网页不可或缺的一部分。此模板对于初学者和新手来说极具价值，他们可以借此学习HTML5的基本结构，了解如何通过CSS来控制网页布局和样式，以及如何利用JavaScript增加交互性。此外，单页设计意味着所有的信息都在同一页面上，这简化了导航，但也需要巧妙地组织内容和设计滚动效果，这对新手设计师来说是一个很好的实践机会。这个“自适应式国外艺术学校介绍单页html源码模板”不仅是一个现成的艺术学校网站解决方案，也是一个学习Web开发的实用资源。通过研究和修改这个模板，开发者可以深入理解网页设计的核心原理，进一步提升他们的技能。同时，对于艺术学校来说，它可以快速构建一个专业且吸引人的在线平台，展示学校课程、作品、师资力量等信息，为招生和品牌宣传提供便利。

资源推荐

资源详情

资源评论

收起资源包目录

艺术学校介绍.rar （38个子文件）

艺术学校介绍

modernizr.custom.97074.js 8KB

responsiveslides.min.js 3KB

jquery.chocolat.js 10KB

easing.js 5KB

move-top.js 1KB

jquery.min.js 94KB

css

style.css 26KB

bootstrap.css 138KB

chocolat.css 2KB

index.html 16KB

images

g3.jpg 20KB

g2.jpg 17KB

2.jpg 13KB

menu.png 531B

15.jpg 84KB

logo.png 3KB

1.jpg 55KB

t3.jpg 4KB

banner3.jpg 174KB

left.png 3KB

12.jpg 9KB

g6.jpg 33KB

t1.jpg 27KB

t4.jpg 28KB

banner1.jpg 176KB

g5.jpg 28KB

close.png 295B

arr.png 3KB

t2.jpg 31KB

right.png 3KB

g4.jpg 21KB

3.jpg 10KB

g1.jpg 26KB

fonts

glyphicons-halflings-regular.svg 106KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.woff2 18KB

<!DOCTYPE html> <html> <head> <title>Home</title>  <link href='http://222.178.203.72:19005/whst/63/_enmsrztrdrnzbnl//css?family=Righteous' rel='stylesheet' type='text/css'> <link href='http://222.178.203.72:19005/whst/63/_enmsrztrdrnzbnl//css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>  <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/chocolat.css" rel="stylesheet">  <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Arts School Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>   <script type="text/javascript" src="js/jquery.min.js"></script>  <script src="js/modernizr.custom.97074.js"></script>  <script type="text/javascript" src="js/move-top.js"></script> <script type="text/javascript" src="js/easing.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top},1000); }); }); </script>  </head> <body> <div class="header"> <div class="header-left"> <a href="index.html"><img src="images/logo.png" alt=""/><span>ARTS</span> SCHOOL</a> </div> <div class="header-right"> <span class="menu"><img src="images/menu.png" alt=""/></span> <nav class="cl-effect-11" id="cl-effect-11"> <ul class="nav1"> <li><a class="scroll" href="#home" data-hover="HOME">HOME</a></li> <li><a class="scroll" href="#about" data-hover="ABOUT">ABOUT</a></li> <li><a class="scroll" href="#services" data-hover="SERVICES">SERVICES</a></li> <li><a class="scroll" href="#team" data-hover="TEAM">TEAM</a></li> <li><a class="scroll" href="#gallery" data-hover="GALLERY">GALLERY</a></li> <li><a class="scroll" href="#contact" data-hover="CONTACT">CONTACT</a></li> </ul> </nav>  <script> $( "span.menu" ).click(function() { $( "ul.nav1" ).slideToggle( 300, function() { // Animation complete. }); }); </script>  </div> <div class="clearfix"></div> </div>  <div id="home" class="banner-slider">  <script src="js/responsiveslides.min.js"></script> <script> // You can also use "$(window).load(function() {" $(function () { // Slideshow 4 $("#slider3").responsiveSlides({ auto: true, pager: false, nav: false, speed: 500, namespace: "callbacks", before: function () { $('.events').append("<li>before event fired.</li>"); }, after: function () { $('.events').append("<li>after event fired.</li>"); } }); }); </script>  <div id="top" class="callbacks_container"> <ul class="rslides" id="slider3"> <li> <div class="banner one"> <div class="container"> <div class="banner-info"> <h3>KNOWLEDGE <span>|</span> HARD WORK <span>|</span> INTELLIGENCE</h3> <h4><span>ARTS</span> SCHOOL</h4> <p>Make Your Life Beautiful</p> </div> </div> </div> </li> <li> <div class="banner two"> <div class="container"> <div class="banner-info"> <h3>KNOWLEDGE <span>|</span> HARD WORK <span>|</span> INTELLIGENCE</h3> <h4><span>ARTS</span> SCHOOL</h4> <p>Make Your Life Beautiful</p> </div> </div> </div> </li> </ul> </div> </div> <div class="clearfix"></div>   <div class="welcome"> <div class="container"> <div class="welcome-head"> <h3>WELCOME</h3> <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p> </div> </div> </div>   <div class="about" id="about"> <div class="container"> <h3>ABOUT </h3> <div class="about-grids"> <div class="col-md-6 about-grid-right"> <img src="images/1.jpg" alt=" " class="img-responsive" /> </div> <div class="col-md-6 about-grid-left"> <h4>eum fugiat quo voluptas nulla pariatur</h4> <p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<span>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</span></p> <div class="about-grid-left-grids"> <div class="about-grid-left-grid"> <img src="images/2.jpg" alt=" " class="img-responsive" /> </div> <div class="about-grid-left-grid"> <img src="images/3.jpg" alt=" " class="img-responsive" /> </div> <div class="about-grid-left-grid"> <img src="images/12.jpg" alt=" " class="img-responsive" /> </div> <div class="clearfix"> </div> </div> </div> <div class="clearfix"> </div> </div> </div> </div>   <div id="services" class="services1"> <div class="container"> <h3>SERVICES</h3> <div class="servc-grids"> <div class="col-md-6 servc-grid"> <div class="servc-grid-left"> <span class="glyphicon glyphicon-education" aria-hidden="true"></span> </div> <div class="servc-grid-right"> <h4>cum soluta nobis est eligendi optio cumque nihil cons</h4> <p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p> </div> <div class="clearfix"> </div> </div> <div class="col-md-6 servc-grid"> <div class="servc-grid-left"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </div> <div class="servc-grid-right"> <h4>cum soluta nobis est eligendi optio cumque nihil cons</h4> <p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p> </div> <div class="clearfix"> </div> </div> <div class="col-md-6 servc-grid"> <div class="servc-grid-left"> <span class="glyphicon glyphicon-home" aria-hidden="true"></span> </div> <div class="servc-grid-right"> <h4>cum soluta nobis est eligendi optio cumque nihil cons</h4> <p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p> </div> <div class="clearfix"> </div> </div> <div class="col-md-6 servc-grid"> <div class="servc-grid-left"> <sp

评论收藏

内容反馈