【免费】扁平设计公司单页模板是一款HTML模板，适合设计公司类网站模板下载.rar资源-CSDN文库

共27个文件

jpg：7个

js：6个

png：4个

需积分: 0 176 浏览量更新于2023-09-10 收藏 276KB RAR 举报

【扁平设计公司单页模板】是一款专为设计公司打造的HTML模板，旨在提供一个简洁、直观且富有现代感的网站展示平台。该模板采用扁平化设计风格，符合当前互联网设计趋势，能够有效地突出公司的品牌形象和服务内容。下面将详细阐述这款模板中涉及的HTML、CSS等相关知识点。 1. HTML 结构：`index.html`是模板的核心文件，它包含了整个网站的基本结构。HTML5元素如<header>、<nav>、<section>、<article>、<aside>和<footer>被巧妙地用于构建清晰的页面布局，确保内容的逻辑性和可访问性。同时，模板可能还利用了HTML的语义元素，如<main>和<section>，来增强搜索引擎优化（SEO）和辅助技术的兼容性。 2. CSS 框架：`bootstrap.css`是著名的Bootstrap框架的样式文件，提供了响应式布局和预定义的组件，如栅格系统、按钮、表单、导航等。Bootstrap使得模板在不同设备上都能自适应显示，提高了用户体验。 3. 自定义样式：`style.css`和`chocolat.css`是模板的自定义样式文件。`style.css`可能包含了对HTML元素的样式调整，以实现扁平化设计的视觉效果，包括色彩、字体、间距和边框等。`chocolat.css`可能关联到一款图片查看器插件Chocolat，用于优雅地展示作品集中的大图，提供缩放、导航箭头等功能。 4. 字体图标：`glyphicons-halflings-regular.eot`是 Glyphicons 图标字体的一部分，常用于Bootstrap项目中，为按钮、链接等添加图标，提升界面的易用性和美观度。 5. 动态元素：`closew.gif`、`leftw.gif`和`rightw.gif`可能是用于图片查看器或其他交互功能的动画GIF图像，如关闭按钮和导航箭头，增强用户与网站的互动性。 6. 图像资源：`ab.jpg`和`g4.jpg`是模板中的图像文件，可能作为背景图片或设计作品展示，通过高质量的视觉元素吸引用户的注意力。这个扁平设计公司单页模板结合了HTML5、CSS3和Bootstrap框架，创建了一个既现代又实用的网页设计方案。它强调简洁的设计、响应式的布局以及良好的用户体验，对于设计公司来说，是一个快速建立专业在线形象的理想选择。通过调整和扩展这些基本元素，可以轻松定制以满足特定的业务需求。

收起资源包目录

扁平设计公司单页模板是一款HTML模板，适合设计公司类网站模板下载.rar （27个子文件）

g3.jpg 29KB

style.css 35KB

menu_jquery.js 1KB

g2.jpg 26KB

down.png 925B

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.woff2 18KB

jquery.chocolat.js 10KB

closew.gif 70B

cycle.png 10KB

leftw.gif 68B

g6.jpg 31KB

nav.png 3KB

circles.js 7KB

bootstrap.css 118KB

move-top.png 3KB

g5.jpg 35KB

easing.js 5KB

move-top.js 1KB

index.html 15KB

chocolat.css 2KB

jquery-1.11.1.min.js 94KB

g4.jpg 41KB

ab.jpg 53KB

rightw.gif 67B

g1.jpg 13KB

资源推荐

资源预览

资源评论

<!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="Personale 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="applijegleryion/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />  <link href="css/style.css" rel='stylesheet' type='text/css' /> <script src="js/jquery-1.11.1.min.js"></script>  <link href='#css?family=Candal|Raleway:500,600,400' rel='stylesheet' type='text/css'>  <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},900); }); }); </script> </head> <body>  <ul class="side_nav"> <li><a class="active scroll" href="#home"></a></li> <li><a class="scroll" href="#about"></a></li> <li><a class="scroll" href="#experience"></a></li> <li><a class="scroll" href="#skill"></a></li> <li><a class="scroll" href="#project"></a></li> <li><a class="scroll" href="#port"></a></li> <li><a class="scroll" href="#contact"></a></li> </ul> <div class="banner" id="home"> <div class="header-top"> <div class="container">  <span class="menu"> </span> <div class="top-menu"> <nav> <ul class="cl-effect-16"> <li><a class="active 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="#experience" data-hover="experience">experience</a></li> <li><a class="scroll" href="#skill" data-hover="Skills">Skills</a></li> <li><a class="scroll" href="#project" data-hover="Projects">Projects</a></li> <li><a class="scroll" href="#port" data-hover="Portfolio">Portfolio</a></li> <li><a class="scroll" href="#contact" data-hover="Contact">Contact</a></li> <div class="clearfix"></div> </ul> </nav> </div> <div class="login-pop"> <div id="loginpop"><a href="#" id="loginButton"><span>Login <i class="arrow glyphicon glyphicon-chevron-right"></i></span></a> <div id="loginBox"> <form id="loginForm"> <fieldset id="body"> <fieldset> <label for="email">Email Address</label> <input type="text" name="email" id="email"> </fieldset> <fieldset> <label for="password">Password</label> <input type="password" name="password" id="password"> </fieldset> <input type="submit" id="login" value="Sign in"> <label for="checkbox"><input type="checkbox" id="checkbox"> <i>Remember me</i></label> </fieldset> <span><a href="#">Forgot your password?</a></span> </form> </div> </div> </div><script src="js/menu_jquery.js"></script>  <script> $("span.menu").click(function(){ $(".top-menu ul").slideToggle("slow" , function(){ }); }); </script>  <div class="clearfix"></div>  </div> </div>  <div class="container">  <div class="banner-info"> <div class="logo"> <a href="index.html"><h1>Personale </h1></a> </div> <p> Donec rhoncus bibendum tempor.Lorem Ipsum Maecenas tristique orci ac sem.<lable> Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsumipsum dolor sit amet,</lable> consectetuer dolor sit.</p> <div class="scroll-down"> <h4>SCROLL DOWN</h4> <a class="downarrow scroll" href="#about"><span></span></a> </div> </div> </div> </div>  <div class="about" id="about"> <div class="container"> <h3 class="tittle">About Me</h3> <div class="col-md-5 ab-grid pic"> <img src="images/ab.jpg" alt=" " title="ab"> </div> <div class="col-md-7 ab-grid text"> <h4>I am jessica, I live in Newyork. I am WP Theme Developer, UI/UX Developer, Internet Consultant.</h4> <p>We are a professional Software comapny with the best talent and most modern technology for online solutions & focused on providing clients with effective online marketing solutions.</p> <p>We focused on providing clients with effective online marketing solutions.</p> <p>I know 4 languages. Working on this field for 5+ years and got many design awards.</p> </div> <div class="clearfix"> </div> </div> </div>   <div class="experience" id="experience"> <div class="container"> <h3 class="tittle four">Education & Experience</h3> <div class="experience-main"> <span class="devide-line"></span> <div class="experience-left"> <span class="glyphicon glyphicon-book" aria-hidden="true"></span> <h4>MASTER OF FINE ARTS</h4> <h5>DESIGN UNIVERSITY [ 2011 - 2013 ]</h5> <p>Sed a tortor sed ipsum porta iaculis id eget massa. Quisque imperdiet urna sed lorem facilisis, id imperdiet magna dignissim. Maecenas quis dui at magna ullamcorper suscipit. In malesuada, massa at semper fermentum, metus eros imperdiet justo</p> </div> <div class="experience-left-snd"> <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span> </div> <div class="experience-right-snd"> <h4>DESIGN CORPORATION</h4> <h5>UX DEVELOPER [ 2013 - 2014 ]</h5> <p>Lorem ipsum dolor sit amet, rebum dolore labores cu pri. Ferri iudico scripta ut eam, diceret euismod gubergren has eu, an quo tale vivendum. Ad quidam gubergren vituperatoribus sit. Ius etiam nemore consulatu ne, at meliore explicari conceptam qui.</p> </div> <div class="experience-left-trd"> <span class="glyphicon glyphicon-gift" aria-hidden="true"></span> <h4>CREATIVE DESIGN STUDIO</h4> <h5>UX DEVELOPER [ 2016 - 2018 ]</h5> <p>Morbi porta eros diam, vel dictum mauris tristique cursus. Curabitur at feugiat nulla. Morbi facilisis vulputate ligula non dignissim. Nunc sagittis non tellus eu hendrerit. Aenean quis enim tristique, lobortis ligula non, sollicitudin tortor.</p> </div> <div class="clearfix"> </div> </div> </div> </div>   <div class="my-skills text-center" id="skill"> <div class="container"> <h3 class="tittle">My Skills</h3> <div class="skill-grids"> <div class="col-md-2 skills-grid text-center"> <div class="circle" id="circles-1"></div> <p>Photoshop</p> </div> <div class="col-md-2 skills-grid text-center"> <div class="circle" id="circles-2"></div> <p>Illustrator</p> </div> <div class="col-md-2 skills-grid text-center"> <div class="circle" id="circles-3"></div> <p>Photography</p> </div> <div class="col-md-2 skills-grid text-center"> <div class="circle" id="circles-4"></div> <p>Html 5 / CSS 3</p