【免费】大气扁平钢铁行业网站模板适合钢铁行业工业网站单页模板下载.rar资源-CSDN文库

共36个文件

jpg：14个

js：10个

png：5个

需积分: 0 127 浏览量 2023-09-10 10:34:08 上传评论收藏 830KB RAR 举报

"大气扁平钢铁行业网站模板"是一款专为钢铁和工业领域设计的单页网站模板，旨在提供一个简洁而具有专业感的在线展示平台。这个模板采用现代设计趋势，扁平化的设计理念，强调清晰、直观的用户体验，同时通过深色背景和高质量的图像，营造出钢铁行业的硬朗形象。 "html"表明该模板是基于HTML（HyperText Markup Language）构建的，这是创建网页的标准标记语言。HTML5是目前最常用的版本，它提供了更多的语义元素和增强的功能，如多媒体支持、离线存储等，使得开发者可以更轻松地创建功能丰富的动态网站。 "html"进一步确认了这个模板的基础结构，意味着开发人员可以利用HTML来定义页面内容的结构，包括标题、段落、链接、图像等元素，并通过CSS（Cascading Style Sheets）来控制样式和布局。【压缩包子文件的文件名称列表】中的文件揭示了模板的基本组成部分： 1. **bootstrap.css** - Bootstrap是世界上最流行的前端开发框架，它的CSS文件用于提供响应式布局和预设的样式，使网站在不同设备上都能良好显示。 2. **style.css** - 这是自定义样式表，通常包含模板特有的设计元素和样式规则，如颜色、字体、间距等，以实现独特的视觉效果。 3. **lightbox.css** - Lightbox是一种JavaScript插件，用于在全屏模式下显示大图，常用于图片展示，点击小图后会弹出放大版的图片。 4. **loading.gif** - 这是一个加载动画，通常在页面加载时显示，提高用户体验，让用户知道网站正在准备内容。 5. **index.html** - 这是网站的主页面，包含了整个网站的结构和内容，是用户访问的第一个页面。 6. **banner.jpg、slid.jpg、g8.jpg、g7.jpg、g4.jpg** - 这些是图片文件，可能用作网站的横幅、滑动图像或者产品展示，通过视觉元素提升网站的吸引力。综合以上信息，这款钢铁行业网站模板结合了Bootstrap的灵活性、HTML5的语义化以及自定义CSS的个性化设计，为钢铁行业的企业提供了易于维护、视觉冲击力强的在线存在。Lightbox功能则增强了图片的展示效果，让用户能更好地欣赏产品细节。通过精心设计的HTML结构和CSS样式，模板能够适应各种屏幕尺寸，确保在桌面、平板和手机上的良好浏览体验。

资源推荐

资源详情

资源评论

收起资源包目录

大气扁平钢铁行业网站模板适合钢铁行业工业网站单页模板下载.rar （36个子文件）

g3.jpg 36KB

style.css 29KB

bootstrap.js 66KB

g2.jpg 48KB

lightbox-plus-jquery.min.js 91KB

responsiveslides.min.js 3KB

glyphicons-halflings-regular.woff 23KB

prev.png 1KB

g8.jpg 66KB

glyphicons-halflings-regular.woff2 18KB

banner.jpg 148KB

loading.gif 8KB

slid.jpg 136KB

img2.jpg 9KB

easyResponsiveTabs.js 6KB

social-icons.png 4KB

move-up.png 3KB

next.png 1KB

g7.jpg 58KB

g6.jpg 26KB

img4.jpg 13KB

jquery.circlechart.js 3KB

uisearch.js 6KB

bootstrap.css 138KB

img1.jpg 8KB

g5.jpg 27KB

easing.js 5KB

img3.jpg 11KB

close.png 280B

classie.js 2KB

move-top.js 1KB

index.html 25KB

jquery-1.11.1.min.js 94KB

lightbox.css 4KB

g4.jpg 54KB

g1.jpg 31KB

<!DOCTYPE html> <html> <head> <title>Home</title>  <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="" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>  <link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all"> <link href="css/style.css" type="text/css" rel="stylesheet" media="all"> <link rel="stylesheet" href="css/lightbox.css">  <script src="js/jquery-1.11.1.min.js"></script>   <link href='#css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'> <link href='#css?family=Dosis:400,200,300,500,600,700,800' rel='stylesheet' type='text/css'>   <script src="js/jquery.circlechart.js"></script>  </head> <body>  <div class="header"> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header navbar-left"> <h1><a href="index.html">STEEL <span>Industry</span></a></h1> </div>  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="header-right"> <div class="top-nav-text"> <p>Call Us: <span>+00 111 2222 333</span></p> <div id="sb-search" class="sb-search"> <form action="#" method="post"> <input class="sb-search-input" name="Search" placeholder="Enter your search term..." id="search" required=""> <input class="sb-search-submit" type="submit" value=""> <span class="sb-icon-search"> </span> </form> <div class="clearfix"> </div>  <script src="js/classie.js"></script> <script src="js/uisearch.js"></script> <script> new UISearch( document.getElementById( 'sb-search' ) ); </script>  </div> </div>  <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-left cl-effect-14"> <li><a href="index.html" class="active">Home</a></li> <li><a href="#team" class="scroll">Team</a></li> <li><a href="#services" class="scroll">Services</a></li> <li><a href="#portfolio" class="scroll">Portfolio</a></li> <li><a href="#contact" class="scroll">Contact Us</a></li> </ul> <div class="clearfix"> </div> </div> </div> <div class="clearfix"> </div> </div> </nav> </div>   <div class="banner"> <div class="container"> <div class="banner-text"> <div id="top" class="callbacks_container"> <ul class="rslides" id="slider3"> <li> <div class="banner-text-info"> <h2>WELCOME TO STEEL INDUSTRY</h2> <h4>Lorem Ipsum was popularised In sit amet sapien eros Integer</h4> <div class="more"> <a href="#" data-toggle="modal" data-target="#myModal"> Read More</a> </div> </div> </li> <li> <div class="banner-text-info"> <h3>VIVAMUS MAXIMUS ODIO EU</h3> <h4>In sit amet sapien eros Integer,Lorem Ipsum was popularised </h4> <div class="more"> <a href="#" data-toggle="modal" data-target="#myModal"> Read More</a> </div> </div> </li> <li> <div class="banner-text-info"> <h3>ETIAM SODALES LACUS DOLOR</h3> <h4>Popularised In sit amet sapien eros Integer was Lorem Ipsum </h4> <div class="more"> <a href="#" data-toggle="modal" data-target="#myModal"> Read More</a> </div> </div> </li> <li> <div class="banner-text-info"> <h3>SED EGESTAS LIBERO VITAE ELIT</h3> <h4>Popularised In sit amet sapien eros Integer was Lorem Ipsum </h4> <div class="more"> <a href="#" data-toggle="modal" data-target="#myModal"> Read More</a> </div> </div> </li> </ul> </div> </div> </div> </div>  <div class="modal bnr-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <section> <div class="modal-body modal-spa"> <img class="img-responsive" src="images/slid.jpg" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum iaculis enim, non convallis felis mattis at. Donec fringilla lacus eu pretium rutrum. Cras aliquet congue ullamcorper. Etiam mattis eros eu ullamcorper volutpat. Proin ut dui a urna efficitur varius. uisque molestie cursus mi et congue consectetur adipiscing elit cras rutrum iaculis enim, Lorem ipsum dolor sit amet, non convallis felis mattis at. Maecenas sodales tortor ac ligula ultrices dictum et quis urna. Etiam pulvinar metus neque, eget porttitor massa vulputate in. Fusce lacus purus, pulvinar ut lacinia id, sagittis eu mi. Vestibulum eleifend massa sem, eget dapibus turpis efficitur at. Aliquam viverra quis leo et efficitur. Nullam arcu risus, scelerisque quis interdum eget, fermentum viverra turpis. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut At vero eos </p> </div> </section> </div> </div> </div>    <div class="about"> <div class="container"> <h3 class="title">About Us </h3> <div class="about-text"> <h4>Nulla at dolor at ipsum convallis pulvinar a non nunc non leo sollicitudin </h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum iaculis enim, non convallis felis mattis at. Donec fringilla lacus eu pretium rutrum. Cras aliquet congue ullamcorper. Etiam mattis eros eu ullamcorper volutpat. Proin ut dui a urna efficitur varius. uisque molestie cursus mi et congue consectetur adipiscing elit cras rutrum iaculis enim, Lorem ipsum dolor sit amet, non convallis felis mattis at. Maecenas sodales tortor ac ligula ultrices dictum et quis urna. Etiam pulvinar metus neque, eget porttitor massa vulputate in. Fusce lacus purus, pulvinar ut lacinia id, sagittis eu mi. Vestibulum eleifend massa sem, eget dapibus turpis efficitur at. Aliquam viverra quis leo et efficitur. Nullam arcu risus, scelerisque quis interdum eget, fermentum viverra turpis. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut At vero eos</p> </div> </div> </div>   <div class="team" id="team"> <div class="team-info"> <div class="container"> <h3 class="title">Our Team</h3> <div class="team-row"> <div class="col-md-3 team-grids"> <div class="team-img"> <img class="img-responsive" src="images/img1.jpg" alt=""> <div class="captn"> <div class="captn-top"> <h4>Edwards Doe</h4> <p>Aenean pulvinar ac enimet posuere tincidunt velit Utin tincidunt</p> </div> <div class="social-icons">

评论收藏

内容反馈