扁平宽屏公司网站单页模板是一款响应式HTML5单页网站模板下载.rar资源-CSDN文库

共37个文件

jpg：15个

js：4个

css：4个

版权申诉

147 浏览量 2022-11-20 09:26:53 上传评论收藏 2.09MB RAR 举报

【标题与描述解析】标题"扁平宽屏公司网站单页模板是一款响应式HTML5单页网站模板下载 .rar"表明这是一个专为公司设计的、采用扁平化设计风格和宽屏布局的单页网站模板，它基于HTML5技术，并且具有响应式特性。这个模板适合用于那些希望创建简洁、现代感强且能在不同设备上良好展示的企业或个人。.rar文件格式意味着模板的源代码和相关资源被打包成了一个压缩文件。【HTML5知识点】 1. **HTML5新元素**：HTML5引入了许多新的结构元素，如<header>、<nav>、<section>、<article>、<aside>和<footer>等，这些元素有助于提高网站的可读性和可维护性，使内容更加结构化。 2. **语义化**：HTML5强调语义化，使得网页内容对于人类和机器（如搜索引擎）更易于理解。例如，<header>和<footer>用于定义页面头部和底部，<article>用于包裹独立的内容单元。 3. **离线存储**：HTML5的离线存储功能（离线Web应用程序API或AppCache）允许网站在用户离线时也能访问部分内容，提高用户体验。 4. **多媒体支持**：HTML5原生支持音频和视频元素(<audio>和<video>)，无需Flash等插件，简化了媒体内容的集成。 5. **Canvas和SVG**：HTML5的Canvas提供动态图形绘制功能，SVG则用于矢量图的展示，两者结合可以实现丰富的交互式和动画效果。【响应式设计】 1. **媒体查询**：响应式设计的关键在于CSS3的媒体查询，它允许开发者根据设备的屏幕尺寸、分辨率等特性来应用不同的样式。 2. **流式布局**：通过百分比单位而不是固定像素来设定元素宽度，使页面布局能自适应各种屏幕大小。 3. **弹性图片和网格**：使用max-width: 100%可以使图片自适应容器大小，而Flexbox或Grid布局系统则能灵活调整多列布局。 4. **触摸事件**：响应式设计要考虑触控设备的交互，因此需要适配touchstart、touchend等事件。 5. **优化移动优先**：设计时通常先考虑小屏幕设备，然后逐步增加设计元素和功能以适应更大屏幕。【扁平化设计】 1. **简洁明了**：扁平化设计去除冗余的装饰效果，如阴影、渐变和纹理，强调内容本身。 2. **色彩运用**：扁平化设计通常使用大胆、鲜艳的颜色，以增强视觉冲击力和可识别性。 3. **图标设计**：扁平化图标注重简约，用简单的形状和线条表达含义。 4. **层次结构**：尽管扁平，但设计仍需保持良好的层次结构，确保信息的清晰传递。 5. **排版与间距**：良好的字体选择和间距设置是扁平化设计中的重要组成部分，确保可读性和整体美观。【宽屏布局】 1. **利用空间**：宽屏布局充分利用大屏幕的宽度，展示更多的内容或更宽广的视觉效果。 2. **模块化设计**：宽屏通常采用模块化布局，将内容分割成不同区域，方便用户扫描和导航。 3. **响应式调整**：在不同设备上，宽屏设计需要根据屏幕尺寸进行适配，可能需要隐藏或调整某些元素的显示方式。这个模板集成了HTML5的新特性，响应式设计以适应不同设备，采用了扁平化设计原则，并考虑了宽屏显示效果，为创建现代企业网站提供了一个高效且易于维护的起点。使用者可以根据自己的需求对模板进行定制，以满足特定的品牌形象和功能需求。

资源推荐

资源详情

资源评论

收起资源包目录

扁平宽屏公司网站单页模板是一款响应式HTML5单页网站模板下载。.rar （37个子文件）

扁平宽屏公司网站单页模板是一款响应式HTML5单页网站模板下载。

moban1831

css

bootstrap.min.css 138KB

ionicons.min.css 50KB

style.css 16KB

images

slider

slide1.jpg 63KB

slide3.jpg 260KB

slide2.jpg 107KB

team

team-1.jpg 47KB

team-2.jpg 111KB

team-3.jpg 80KB

portfolios

logo

2.jpg 104KB

1.jpg 32KB

app

2.jpg 76KB

1.jpg 84KB

icon

2.jpg 88KB

1.jpg 80KB

web

2.jpg 94KB

1.jpg 97KB

breadcumb.jpg 107KB

logo.png 815B

fonts

ionicons.eot 118KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.ttf 40KB

ionicons.ttf 184KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.svg 61KB

ionicons.woff 66KB

index.html 33KB

jquery.js 94KB

bootstrap.min.js 36KB

jquery.mixitup.min.js 28KB

custom.js 1KB

font-awesome

css

font-awesome.min.css 28KB

fonts

fontawesome-webfont.eot 55KB

fontawesome-webfont.woff 64KB

FontAwesome.otf 84KB

fontawesome-webfont.svg 280KB

fontawesome-webfont.ttf 110KB

<!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 rel="apple-touch-icon" sizes="76x76" href="images/apple-icon.png"> <link rel="icon" type="image/png" href="images/favicon.png">  <link href="css/bootstrap.min.css" rel="stylesheet">  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:regular,700,600&latin" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet">  <link href="css/style.css" rel="stylesheet">  <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">  <link href="css/ionicons.min.css" rel="stylesheet" type="text/css"> </head> <body>  <div class="navbar navbar-default navbar-fixed-top menu-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="index.html" class="navbar-brand"><img src="images/logo.png" alt="logo"></a> </div> <div class="navbar-collapse collapse"> <nav> <ul class="nav navbar-nav navbar-right"> <li><a class="page-scroll active" href="#home">Home</a></li> <li><a class="page-scroll" href="#about">About</a></li> <li><a class="page-scroll" href="#work-process">Process</a></li> <li><a class="page-scroll" href="#service">Service</a></li> <li><a class="page-scroll" href="#portfolio">Portfolio</a></li> <li><a class="page-scroll" href="#team">Team</a></li> <li><a class="page-scroll" href="#blog">Blog</a></li> <li><a class="page-scroll" href="#contact">Contact</a></li> </ul> </nav> </div> </div> </div>   <section id="home" class="welcome-area"> <div class="welcome-slider-area"> <div id="welcome-slide-carousel" class="carousel slide carousel-fade" data-ride="carousel"> <ol class="carousel-indicators carousel-indicators-slider"> <li data-target="#welcome-slide-carousel" data-slide-to="0" class="active"></li> <li data-target="#welcome-slide-carousel" data-slide-to="1" class=""></li> <li data-target="#welcome-slide-carousel" data-slide-to="2" class=""></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="single-slide-item slide-1"> <div class="hero-clouds"></div> <div class="single-slide-item-table"> <div class="single-slide-item-tablecell"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>create your company website <br><span>with Osahan</span></h2> <span></span> <p>Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p> <a class="btn btn-lg btn-custom" href="#about">Learn More</a> </div> </div> </div> </div> </div> </div> </div> <div class="item"> <div class="single-slide-item slide-2"> <div class="hero-clouds"></div> <div class="single-slide-item-table"> <div class="single-slide-item-tablecell"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>best services we provide <br><span>with care</span></h2> <span></span> <p>Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p> <a class="btn btn-lg btn-custom" href="#about">Learn More</a> </div> </div> </div> </div> </div> </div> </div> <div class="item"> <div class="single-slide-item slide-3"> <div class="hero-clouds"></div> <div class="single-slide-item-table"> <div class="single-slide-item-tablecell"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>We create an awesome design <br><span>with care</span></h2> <span></span> <p>Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p> <a class="btn btn-lg btn-custom" href="#about">Learn More</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section>   <section id="about" class="about-us section-padding"> <div class="container"> <div class="row text-center"> <div class="section-title"> <h2>About us</h2> <span></span> <p>Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p> </div> <div class="col-md-3 col-sm-3 col-xs-12"> <div class="about_single"> <i class="ion-ios-monitor-outline"></i> <h4>Our Mission</h4> <span></span> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam nonumy.</p> </div> </div> <div class="col-md-3 col-sm-3 col-xs-12"> <div class="about_single"> <i class="ion-ios-eye-outline"></i> <h4>Our vision</h4> <span></span> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam nonumy.</p> </div> </div> <div class="col-md-3 col-sm-3 col-xs-12"> <div class="about_single"> <i class="ion-ios-people-outline"></i> <h4>Our history</h4> <span></span> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam nonumy.</p> </div> </div> <div class="col-md-3 col-sm-3 col-xs-12"> <div class="about_single"> <i class="ion-ios-loop"></i> <h4>Our process</h4> <span></span> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam nonumy.</p> </div> </div> </div> </div> </section>   <section id="work-process" class="process-box section-padding"> <div class="container"> <div class="row text-center"> <div class="section-title text-center"> <h2 class="section-title-white">Work Process</h2> <span class="section-title-white-span"></span> <p class="section-title-white">Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p> </div> </div> <div class="row"> <div class="col-md-2 col-sm-6"> <div class="process-item text-center process-item-alt"> <div class="process-item-icon"> <span class="ion-ios-lightbulb-outline"></span> </div> <div class="process-item-content"> <span class="process-item-number">1</span> <h3 class="process-item-title">Interview</h3> </div> </div> </div> <div class="col-md-2 col-sm-6"> <div class="process-item highlight text-center process-item-alt"> <div class="process-item-icon"> <span class="ion-ios-bookmarks-outline"></span> </div> <div class="process-item-content"> <span class="process-item-number">2</span> <h3 class="process-item-title">Plan</h3> </div> </div> </div> <div class="col-md-2 col-sm-6">

评论收藏

内容反馈

版权申诉