黑色个性设计培训学校网站bootstrap模板_黑色大图个性时间轴设计师培训学校bootstrap单页.rar资源-CSDN文库

共39个文件

png：20个

jpg：7个

js：5个

141 浏览量 2023-08-05 16:19:30 上传评论收藏 692KB RAR 举报

标题中的“黑色个性设计培训学校网站bootstrap模板”指的是一个专门针对设计培训学校的网站模板，它采用了Bootstrap框架，具有黑色调的界面设计，旨在展现一种专业且独特的风格。Bootstrap是Twitter开发的一个开源前端框架，用于快速构建响应式和移动优先的网站。这个模板利用了Bootstrap的网格系统、组件和JavaScript插件，确保在各种设备上都能有良好的用户体验。描述中的“黑色大图个性时间轴设计师培训学校 bootstrap 单页”表明该模板包含了一些特定的设计元素：黑色背景强调专业性；大图可能是指首页或特定区域的大尺寸图像展示，用于吸引用户的注意力；个性化的设计可能体现在独特的布局和视觉效果上，以区别于常规的网站模板；时间轴可能是用来展示学校的历史、课程进度或者学生作品的发展；设计师培训和学校部分则说明该模板主要面向设计类教育机构，提供展示课程、师资力量和学生成果的功能。标签中的“网站模板 js css”意味着模板包含了HTML、JavaScript和CSS三个关键的前端技术。JavaScript（js）用于增加交互性和动态功能，如表单验证、页面动画等；CSS（css）则负责样式设计，确保网站的视觉一致性。根据压缩包子文件的文件名称，“黑色个性设计培训学校网站bootstrap模板_黑色大图个性时间轴设计师培训学校 bootstrap 单页跳转手机响应式 html5”可以推测模板不仅限于桌面端，还考虑到了手机等移动设备的兼容性，具有响应式设计，能自动调整布局以适应不同屏幕尺寸。html5则表明模板基于最新的HTML标准，支持多媒体元素、表单控件和离线存储等功能，提供更丰富的用户体验。总结来说，这个模板是一个专门为设计培训学校打造的，采用Bootstrap框架、HTML5、CSS3和JavaScript技术的响应式网站模板。它拥有黑色主题、大图展示、个性化设计、时间轴元素，并针对移动设备进行了优化，适合那些希望展示其独特品牌形象和课程内容的设计培训机构。

资源推荐

资源详情

资源评论

收起资源包目录

黑色个性设计培训学校网站bootstrap模板_黑色大图个性时间轴设计师培训学校 bootstrap 单页.rar （39个子文件）

黑色个性设计培训学校网站bootstrap模板_黑色大图个性时间轴设计师培训学校 bootstrap 单页跳转手机响应式 html5

cpts_20_ei

responsiveslides.min.js 3KB

easing.js 5KB

move-top.js 1KB

modernizr.custom.js 9KB

jquery.min.js 92KB

css

style.css 39KB

bootstrap.css 118KB

font-awesome.min.css 21KB

index.html 11KB

about.html 7KB

single.html 6KB

images

2.jpg 75KB

banner.png 58KB

dot.png 675B

10.png 1KB

9.png 1KB

3.png 1KB

arrow.png 686B

menu.png 791B

6.jpg 46KB

banner.jpg 93KB

logo.png 1KB

1.jpg 71KB

img-sp.png 2KB

mes.png 466B

1.png 773B

5.jpg 29KB

6.png 50KB

blog.png 118KB

5.png 26KB

4.png 773B

8.png 966B

call.png 596B

7.png 48KB

3.jpg 49KB

img.png 2KB

2.png 712B

4.jpg 37KB

blog.html 8KB

<!DOCTYPE html> <html> <head> <title>Home</title> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /> <link href='#css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'> <link href='#css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,500italic,700italic,900,900italic' rel='stylesheet' type='text/css'> <link href='#css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <link href='#css?family=Raleway:400,100,300,200,500,600,700,800,900' rel='stylesheet' type='text/css'> <link href='#css?family=Merriweather:400,300,300italic,400italic,700,900,900italic,700italic' rel='stylesheet' type='text/css'>  <script src="js/jquery.min.js"></script>   <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="Black and White Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod 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/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>   <link href="css/hover.css" rel="stylesheet" media="all"> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">  </head> <body>   <div class="banner"> <div class="header"> <div class="container"> <div class="banner-nav"> <span class="menu"><img src="images/menu.png" alt=" "/></span> <ul class="nav1"> <nav class="cl-effect-3"> <li><a href="index.html" class="act">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a class="scroll" href="#team">Team</a></li> <li><a class="scroll" href="#services">Services</a></li> <li><a href="blog.html">Blog</a></li> <li><a class="scroll" href="#contact">Contact Us</a></li> </nav> </ul> <div class="logo"> <a href="index.html"><img src="images/logo.png" alt=" " /></a> </div> </div>  <script> $( "span.menu" ).click(function() { $( "ul.nav1" ).slideToggle( 300, function() { // Animation complete. }); }); </script>  </div> </div>   <script src="js/responsiveslides.min.js"></script> <script> // You can also use "$(window).load(function() {" $(function () { // Slideshow 4 $("#slider3").responsiveSlides({ auto: true, pager: true, 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-info"> <h3>We build it with passion</h3> <p>Just to be clear, we do this for fun not for you, just kidding.</p> <div class="more"> <a href="#">READ MORE</a> </div> </div> </li> <li> <div class="banner-info"> <h3>We Protect it with Security</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> <div class="more"> <a href="#">READ MORE</a> </div> </div> </li> <li> <div class="banner-info"> <h3>We build it with passion</h3> <p>Vivamus varius nec diam vitae hendrerit bigus mit consectetur adipiscing.</p> <div class="more"> <a href="#">READ MORE</a> </div> </div> </li> </ul> </div> </div>  <div class="copyrights">Collect from <a href="http://www.moobnn.com/" >免费模板</a></div>  <div id="services" class="banner-bottom"> <div class="container"> <div class="banner-bottom-left"> <div class="year1"> <h3>2011</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiselit. <span>Vivamus varius nec diam vitae hendrerit bigus mit.</span></p> </div> <div class="year-pos"> <img src="images/1.png" alt=" " /> </div> <div class="year1 year3"> <h3>2013</h3> <p>Sed at auctor sem, nec tincidunt elit. Pellentesque <span>enim turpis, porttitor ac orci in, ultrices efficitur nisl.</span> <span>Ut odio libero, sodales a tellus eleifend, suscipit</span> dapibus mi.</p> </div> <div class="year-pos1"> <img src="images/2.png" alt=" " /> </div> </div> <div class="banner-bottom-right"> <div class="year1 year2"> <h3>2012</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiselit. <span>Vivamus varius nec diam vitae hendrerit bigus mit.</span> <span>Begitus vit urna nulla.</span></p> </div> <div class="year-pos2"> <img src="images/3.png" alt=" " /> </div> <div class="year1 year4"> <h3>2014</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiselit. <span>Vivamus varius nec diam vitae hendrerit bigus mit.</span> <span>Begitus vit urna nulla.</span></p> </div> <div class="year-pos3"> <img src="images/4.png" alt=" " /> </div> </div> </div> <div class="grid-bann"> <span> </span> </div> <div class="clearfix"> </div> </div>   <div id="team" class="team"> <div class="container"> <h3>This is our team</h3> <p class="para">We are small but effective and ...</p> <div class="team-grid1 start"> <div class="team-fig"> <span> </span> </div> <h4>Justin Twice</h4> <p>Founder & CEO</p> <ul> <li><a href="#" class="twitter"> </a></li> <li><a href="#" class="instagram"> </a></li> </ul> </div> <div class="team-grids"> <div class="team-grid start"> <div class="team-fig1"> <span> </span> </div> <h4>Mark Once</h4> <p>Designer & Front-End Developer</p> <ul> <li><a href="#" class="twitter"> </a></li> <li><a href="#" class="instagram"> </a></li> </ul> </div> <div class="team-grid start"> <div class="team-fig1"> <span> </span> </div> <h4>Antonio Never</h4> <p>Someone & Somewhere</p> <ul> <li><a href="#" class="twitter"> </a></li> <li><a href="#" class="instagram"> </a></li> </ul> </div> <div class="clearfix"> </div> </div> </div> </div>   <div class="blog"> <div class="container"> <h3>We provide you everything</h3> <p class="para1">Maybe not everything, but we provide you some stuff.</p> <div class="blog-grids"> <div class="blog-grid"> <div class="blog-fig figure"> <span> </span> </div>

评论收藏

内容反馈