左栏全屏响应式工业机械行业模板_全屏响应式工业机械建筑整站bootstrap响应式手机侧栏设计展.rar

共39个文件

jpg：14个

png：6个

html：6个

45 浏览量 2023-08-05 16:11:48 上传评论收藏 808KB RAR 举报

该压缩包文件包含了一个专为工业机械行业设计的左栏全屏响应式网站模板，它融合了现代网页设计的趋势和技术，旨在提供一个优秀的用户体验，无论用户是在桌面、平板还是手机设备上浏览。模板的设计风格强调专业性和功能性，适用于展示机械设备、建筑项目或其他相关行业的详细信息。 1. **全屏设计**：全屏设计让网站更具视觉冲击力，可以展示大图或视频背景，提升品牌形象，使用户在打开网站时即被吸引。 2. **响应式布局**：响应式设计是现代网页设计的关键特性，能够根据用户设备的屏幕尺寸自动调整页面布局，确保在任何设备上都能提供良好的浏览体验。Bootstrap框架正是实现这一功能的强大工具。 3. **Bootstrap框架**：Bootstrap是Twitter开发的开源前端框架，包含CSS（层叠样式表）和JS（JavaScript）组件，提供了预设的网格系统、导航、表单、按钮等元素，大大简化了网页开发过程。 4. **侧栏设计**：侧栏通常用于放置导航菜单、搜索栏、快捷链接等，为用户提供方便的导航。在这个模板中，侧栏可能包含工业机械行业的分类、产品目录或相关服务列表。 5. **CSS与JS技术**：CSS负责网页的样式和布局，JS则处理交互效果和动态功能。在这个模板中，CSS可能用于定制颜色、字体、动画效果，而JS则可能用于实现下拉菜单、滑动展示、表单验证等功能。 6. **手机优化**：考虑到移动设备的普及，模板特别强调了手机端的用户体验，这包括清晰的触摸操作、快速加载速度和简洁的移动端布局。 7. **展示功能**：这个模板可能包含了各种展示工业机械产品或项目的模块，如轮播图、网格展示、详细产品页面等，帮助用户直观了解公司的产品和服务。 8. **整站设计**：这意味着模板不仅包含首页，还包括其他内页，如关于我们、联系我们、产品详情页等，形成一套完整的网站结构。这个模板提供了一套完整的工业机械行业网站解决方案，利用最新的网页设计技术和工具，确保了在多设备上的出色表现和用户体验。无论是用于展示产品、分享行业资讯，还是作为企业在线形象的门户，都是理想的选择。开发者可以根据实际需求进行定制和扩展，以满足特定的业务需求。

资源推荐

资源详情

资源评论

收起资源包目录

左栏全屏响应式工业机械行业模板_全屏响应式工业机械建筑整站 bootstrap 响应式手机侧栏设计展.rar （39个子文件）

左栏全屏响应式工业机械行业模板_全屏响应式工业机械建筑整站 bootstrap 响应式手机侧栏设计展示

cpts_437_qy

project.html 8KB

typo.html 25KB

lightbox-plus-jquery.min.js 91KB

responsiveslides.min.js 3KB

jquery.min.js 94KB

css

style.css 25KB

bootstrap.min.css 115KB

dashboard.css 1KB

bootstrap.css 118KB

lightbox.css 4KB

index.html 8KB

contact.html 6KB

about.html 9KB

images

pic5.jpg 31KB

pic6.jpg 21KB

abt.jpg 50KB

prev.png 1KB

pic8.jpg 26KB

t3.jpg 27KB

pic4.jpg 18KB

social.png 7KB

pic2.jpg 26KB

next.png 1KB

pic3.jpg 18KB

t1.jpg 24KB

pic1.jpg 25KB

t4.jpg 13KB

close.png 280B

t2.jpg 24KB

pic7.jpg 23KB

lines.png 181B

bnr3.jpg 52KB

icon2.png 3KB

fonts

glyphicons-halflings-regular.woff 23KB

OpenSans-Bold.ttf 219KB

OpenSans-Semibold.ttf 216KB

OpenSans-Regular.ttf 212KB

OpenSans-ExtraBold.ttf 217KB

gallery.html 8KB

<!DOCTYPE HTML> <html> <head> <title>Typography</title> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />  <script src="js/jquery.min.js"></script>  <link href="css/dashboard.css" rel="stylesheet"> <link href="css/style.css" rel='stylesheet' type='text/css' />  <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="Rissner 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>  </head> <body>  <div class="col-md-2 sidebar"> <div class="sidebar_top"> <h1><a href="index.html">RISS<span>NER</span></a></h1> </div> <div class="top-navigation"> <div class="t-menu">MENU</div> <div class="t-img"> <img src="images/lines.png" alt="" /> </div> <div class="clearfix"> </div> </div> <div class="drop-navigation"> <div class="top-menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="project.html">Projects</a></li> <li class="active"><a href="typo.html">Shortcodes</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div>  <script> $( ".top-navigation" ).click(function() { $( ".drop-navigation" ).slideToggle( 300, function() { // Animation complete. }); }); </script> <div class="side-btm"> <div class="social-icons"> <ul> <li><a href="#"><span class="fa"> </span></a></li> <li><a href="#"><span class="tw"> </span></a></li> <li><a href="#"><span class="g"> </span></a></li> <li><a href="#"><span class="in"> </span></a></li> </ul> <div class="clearfix"></div> </div> <div class="copyright"> <p>Copyright © 2015.Company name All rights reserved.<a target="_blank" href="http://www.moobnn.com/">网页模板</a></p> </div> </div> </div> </div> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <div class="side-content"> <div class="banner"> <script src="js/responsiveslides.min.js"></script> <script> $(function () { $("#slider").responsiveSlides({ auto: true, nav: false, speed: 500, namespace: "callbacks", pager: true, }); }); </script> <div class="slider"> <div class="callbacks_container"> <ul class="rslides" id="slider"> <li> <h2>Vestibulum</h2> <h3>Maecenas dignissim nibh.</h3> </li> <li> <h2>Suspendisse</h2> <h3>Fusce vel lacus dapibus.</h3> </li> <li> <h2>Phasellus</h2> <h3>Aenean maximus in sem.</h3> </li> </ul> </div> </div>  </div> </div> <div class="side-pics"> <img src="images/pic1.jpg" class="img-responsive pic1" alt=""/> <img src="images/pic4.jpg" class="img-responsive pic1" alt=""/> </div> <div class="clearfix"></div>   <div class="pages"> <h3 class="typogrphy">Shortcodes</h3> <div class="headdings"> <h3 class="ghj">Headings</h3> <div class="bs-example"> <table class="table"> <tbody> <tr> <td><h1 id="h1.-bootstrap-heading">h1. Bootstrap heading<a class="anchorjs-link" href="#h1.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h1></td> <td class="type-info">Semibold 36px</td> </tr> <tr> <td><h2 id="h2.-bootstrap-heading">h2. Bootstrap heading<a class="anchorjs-link" href="#h2.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h2></td> <td class="type-info">Semibold 30px</td> </tr> <tr> <td><h3 id="h3.-bootstrap-heading">h3. Bootstrap heading<a class="anchorjs-link" href="#h3.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h3></td> <td class="type-info">Semibold 24px</td> </tr> <tr> <td><h4 id="h4.-bootstrap-heading">h4. Bootstrap heading<a class="anchorjs-link" href="#h4.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h4></td> <td class="type-info">Semibold 18px</td> </tr> <tr> <td><h5 id="h5.-bootstrap-heading">h5. Bootstrap heading<a class="anchorjs-link" href="#h5.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h5></td> <td class="type-info">Semibold 14px</td> </tr> <tr> <td><h6>h6. Bootstrap heading</h6></td> <td class="type-info">Semibold 12px</td> </tr> </tbody> </table> </div> </div> <div class="Buttons"> <h3 class="ghj">Buttons</h3> <h1 class="b1"> <a href="#"><span class="label label-default">Default</span></a> <a href="#"><span class="label label-primary">Primary</span></a> <a href="#"><span class="label label-success">Success</span></a> <a href="#"><span class="label label-info">Info</span></a> <a href="#"><span class="label label-warning">Warning</span></a> <a href="#"><span class="label label-danger">Danger</span></a> </h1> <h2 class="b2"> <a href="#"><span class="label label-default">Default</span></a> <a href="#"><span class="label label-primary">Primary</span></a> <a href="#"><span class="label label-success">Success</span></a> <a href="#"><span class="label label-info">Info</span></a> <a href="#"><span class="label label-warning">Warning</span></a> <a href="#"><span class="label label-danger">Danger</span></a> </h2> <h3 class="b3"> <a href="#"><span class="label label-default">Default</span></a> <a href="#"><span class="label label-primary">Primary</span></a> <a href="#"><span class="label label-success">Success</span></a> <a href="#"><span class="label label-info">Info</span></a> <a href="#"><span class="label label-warning">Warning</span></a> <a href="#"><span class="label label-danger">Danger</span></a> </h3> <h4 class="b4"> <a href="#"><span class="label label-default">Default</span></a> <a href="#"><span class="label label-primary">Primary</span></a> <a href="#"><span class="label label-success">Success</span></a> <a href="#"><span class="label label-info">Info</span></a> <a href="#"><span class="label label-warning">Warning</span></a> <a href="#"><span class="label label-danger">Danger</span></a> </h4> <h5 class="b5"> <a href="#"><span class="label label-default">Default</span></a> <a href="#"><span class="label label-primary">Primary</span></a> <a href="#"><span class="label label-success">Success</span></a> <a href="#"><span class="label label-info">Info</span></a> <a href="#"><span class="label label-warning">Warning</span></a> <a href="#"><span class="label label-danger">Danger</span></a> </h5> <h6 class="b6"> <a href="#"><span class="label label-default">Default</span></a> <a href="#"><span class="label label-primary">Primary</span></a> <a href="#"><span class="label label-success">Success</spa

评论收藏

内容反馈