【免费】简洁清爽设计单页模板是一款HTML5单页模板素材下载.rar资源-CSDN文库

共39个文件

js：9个

jpg：9个

css：7个

需积分: 0 189 浏览量 2023-09-10 10:33:38 上传评论收藏 1.98MB RAR 举报

【简洁清爽设计单页模板】是一款专为网页设计师和开发者准备的HTML5单页模板素材。这个模板以其清晰、简洁的界面设计，旨在提供一种高效、直观的展示方式，适用于个人简历、产品介绍、企业简介等多种场景。通过使用HTML5语言，该模板能够更好地支持现代浏览器，提供更丰富的交互体验。在压缩包中，我们可以看到一系列CSS文件，这些文件是构建模板样式的关键组成部分： 1. **bootstrap.min.css**：这是Bootstrap框架的最小化版本，Bootstrap是一个流行的开源前端框架，提供了响应式布局、栅格系统和大量预定义的UI组件，用于快速开发美观且功能齐全的网页。 2. **animate.css**：这包含了一系列预定义的动画效果，可以为网页元素添加动态效果，如淡入淡出、滑动等，增加视觉吸引力。 3. **font-awesome.min.css**：Font Awesome是一个图标库，它将矢量图标与Web字体技术结合，允许开发者轻松地调整大小和颜色，实现一致的界面图标风格。 4. **theme.css**：这是模板的主题样式文件，包含了定制的颜色、字体和布局设置，确保整个模板的视觉一致性。 5. **line-icons.min.css**：类似于Font Awesome，这个文件提供了线性图标的样式，可能包含一些特定于该模板的设计元素。 6. **responsive.css**：这是一个专门处理响应式布局的CSS文件，使得模板在不同设备和屏幕尺寸下都能正常显示。 7. **bootstrap-modal-carousel.css**：这可能是一个扩展了Bootstrap模态和轮播组件的自定义样式，用于创建具有模态对话框功能的图片或内容轮播。此外，还有字体文件，包括`.eot`格式的字体文件，如**fontawesome-webfont.eot**、**et-line.eot**和**glyphicons-halflings-regular.eot**。这些文件通常用于在网页上显示Web字体，如Font Awesome和 Glyphicons 图标。这个【简洁清爽设计单页模板】利用了HTML5的强大功能和Bootstrap的灵活性，结合各种CSS库和图标集，创建了一个既美观又实用的单页网站解决方案。开发者可以根据自己的需求，修改这些CSS文件来定制模板，或者直接使用提供的样式来快速构建网页项目。对于那些希望快速建立专业且吸引人的在线存在感的个人或企业来说，这是一个非常有价值的资源。

资源推荐

资源详情

资源评论

收起资源包目录

简洁清爽设计单页模板是一款HTML5单页模板素材下载.rar （39个子文件）

jquery.waypoints.min.js 9KB

portfolio3.jpg 101KB

bootstrap.min.css 118KB

line-icons.min.css 6KB

FontAwesome.otf 84KB

validator.min.js 6KB

glyphicons-halflings-regular.svg 61KB

glyphicons-halflings-regular.ttf 40KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.eot 20KB

bootstrap.min.js 36KB

jquery.easing.min.js 5KB

fontawesome-webfont.eot 55KB

banner.jpg 418KB

portfolio7.jpg 318KB

portfolio2.jpg 29KB

logo.png 2KB

responsive.css 3KB

theme.js 3KB

fontawesome-webfont.woff 64KB

bootstrap-modal-carousel.css 2KB

animate.css 56KB

jquery.isotope.js 42KB

bg4.jpg 93KB

font-awesome.min.css 26KB

portfolio5.jpg 146KB

theme.css 16KB

et-line.ttf 32KB

index.html 21KB

form-scripts.js 2KB

et-line.woff 54KB

fontawesome-webfont.svg 280KB

wow.min.js 3KB

portfolio1.jpg 141KB

bg2.jpg 58KB

fontawesome-webfont.ttf 110KB

jquery.js 95KB

et-line.eot 32KB

portfolio6.jpg 159KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Home</title>  <link href="assets/css/bootstrap.min.css" rel="stylesheet">  <link rel="stylesheet" href="css/animate.css">   <link rel="stylesheet" href="css/bootstrap-modal-carousel.css">  <link href="css/theme.css" rel="stylesheet">  <link rel="stylesheet" href="css/responsive.css">   <link rel="stylesheet" href="css/font-awesome.min.css">  <link rel="stylesheet" href="css/line-icons.min.css">    </head> <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">  <nav class="navbar navbar-custom navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fa fa-bars"></i> </button> <a class="navbar-brand page-scroll" href="#page-top"> <img src="images/logo.png" alt="" class="img-responsive"> </a> </div>  <div class="collapse navbar-collapse navbar-right navbar-main-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#section-intro" class="page-scroll">Home</a></li> <li><a class="page-scroll" href="#section-features">About</a></li> <li><a class="page-scroll" href="#section-services">services</a></li> <li><a class="page-scroll" href="#section-portfolio">portfolio</a></li> <li><a class="page-scroll" href="#section-contact">contact</a></li> </ul> </div>  </div>  </nav>  <section id="section-intro"> <div class="bg-overlay"></div> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-5"> <div class="carousel slide" id="banner-slider" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#banner-slider" data-slide-to="0" class="active"></li> <li data-target="#banner-slider" data-slide-to="1"></li> <li data-target="#banner-slider" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <div class="intro-caption"> <div class="subtitle">we are creative agency </div> <h1>Grow your business with us</h1> <div class="btn-container wow fadeInUp"> <a href="#" class="btn btn-white ">Discover</a> <a href="#" class="btn btn-black">contact</a> </div> </div> </div> <div class="item "> <div class="intro-caption"> <div class="subtitle">we are committed</div> <h1>User friendly UI/UX </h1> <div class="btn-container wow fadeInUp"> <a href="#" class="btn btn-white ">Discover</a> <a href="#" class="btn btn-black">contact</a> </div> </div> </div> <div class="item "> <div class="intro-caption"> <div class="subtitle">punctual and supportive</div> <h1>24/7 hours premium support</h1> <div class="btn-container wow fadeInUp"> <a href="#" class="btn btn-white ">Discover</a> <a href="#" class="btn btn-black">contact</a> </div> </div> </div> </div> </div> </div> </div> </div> </section>  <section id="section-features" class="section-padding"> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="feature-wrap"> <ul class="feature-list"> <li class="col-md-6 col-sm-6"> <div class="feature-box"> <div class="feature-icon"> <i class="icon icon-mobile"></i> </div> <div class="feature-inner"> <h4>mobile responsive</h4> <p>Laborum aperiam doloremque sit amet molestiae in quaerat provident optio impedit.</p> </div> </div> </li> <li class="col-md-6 col-sm-6"> <div class="feature-box"> <div class="feature-icon"> <i class="icon icon-wallet"></i> </div> <div class="feature-inner"> <h4>pixel perfect</h4> <p>Laborum aperiam doloremque sit amet molestiae in quaerat provident optio impedit.</p> </div> </div> </li> <li class="col-md-6 col-sm-6"> <div class="feature-box"> <div class="feature-icon"> <i class="icon icon-flag"></i> </div> <div class="feature-inner"> <h4>easy interface</h4> <p>Laborum aperiam doloremque sit amet molestiae in quaerat provident optio impedit.</p> </div> </div> </li> <li class="col-md-6 col-sm-6"> <div class="feature-box"> <div class="feature-icon"> <i class="icon icon-shield"></i> </div> <div class="feature-inner"> <h4>Developer friendly</h4> <p>Laborum aperiam doloremque sit amet molestiae in quaerat provident optio impedit.</p> </div> </div> </li> </ul> </div>  </div>  </div>  </div>  </section>   <section id="section-services" class="section-padding"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="section-heading"> <p>professionalism with commitment</p> <h2>what we do actually</h2> </div> </div> </div>  <div class="row"> <div class="col-md-4 col-sm-6"> <div class="service-box active"> <i class="icon icon-anchor"></i> <h4>Branding</h4> <p>Doloremque deserunt maxime non. Labore inventore tenetur laboriosam alias nesciunt eaque sit libero, placeat nisi minus.</p> <div class="line"></div> </div> <div class="service-box active"> <i class="icon icon-mic"></i> <h4>Marketing</h4> <p>Doloremque deserunt maxime non. Labore inventore tenetur laboriosam alias nesciunt eaque sit libero, placeat nisi minus.</p> <div class="line"></div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="service-box"> <i class="icon icon-layers"></i> <h4>Web Design</h4> <p>Doloremque deserunt maxime non. Labore inventore tenetur laboriosam alias nesciunt eaque sit libero, placeat nisi minus.</p> <div class="line"></div> </div> <div class="service-box"> <i class="icon icon-chat"></i> <h4>App Design</h4> <p>Doloremque deserunt maxime non. Labore inventore tenetur laboriosam alias nesciunt eaque sit libero, placeat nisi minus.</p> <div class="line"></div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="service-box"> <i class="icon icon-laptop"></i> <h4>web Development</h4> <p>Doloremque deserunt maxime non. Labore inventore tenetur laboriosam alias nesciunt eaque sit libero, placeat nisi minus.</p> <div class="line"></div> </div> <div class="service-box"> <i class="icon icon-m

评论收藏

内容反馈