16个时髦的扁平化设计的 HTML5 & CSS3 网站模板

ゝ一世哀愁。 2023-06-02 10:41 17阅读 0赞

创建网站最好办法之一是使用现成的网站模板或使用开源 CMS 应用程序。所以，今天这篇文章给大家带来的是16款基于 [**HTML5**][HTML5] & [**CSS3**][CSS3] 的精美的扁平风格网站模板，大家可以借助这些优秀的网站模板创建自己的优秀网站。这些网站模板虽然是收费，但是都提供了在线演示，所以……你懂的：）

您可能感兴趣的相关文章

*  [35款精致的 CSS3 和 HTML5 网页模板][35_ CSS3 _ HTML5]
 *  [12款高质量的免费 CSS 网站模板下载][12_ CSS]
 *  [25款创新和免费的精美 CSS 网站模板][25_ CSS]
 *  [12款高质量的免费 HTML 网页模板下载][12_ HTML]
 *  [12款很漂亮的免费 CSS 网页模板下载][12_ CSS 1]

### Persona – HTML5 Parallax Portfolio Theme ###

充满吸引力的一款网站模板，扁平化设计风格，动感的视差滚动效果。

[![images0-cnblogs-com_blog_36987_201310_29095808-fe92e80e451d4c9a9cdb9d9db26224f5.jpg][]][images0-cnblogs-com_blog_36987_201310_29095808-fe92e80e451d4c9a9cdb9d9db26224f5.jpg 1]

**[在线演示][images0-cnblogs-com_blog_36987_201310_29095808-fe92e80e451d4c9a9cdb9d9db26224f5.jpg 1]**     **[模板下载][Link 1]**

### Superb – Responsive One-Page Portfolio ###

Superb 是一个基于 HTML5 & CSS3 的响应式单页作品集网站模板。

[![images0-cnblogs-com_blog_36987_201310_29095820-d61c1a86bfd9424abf7526c8b03f9b53.jpg][]][images0-cnblogs-com_blog_36987_201310_29095820-d61c1a86bfd9424abf7526c8b03f9b53.jpg 1]

**[在线演示][images0-cnblogs-com_blog_36987_201310_29095820-d61c1a86bfd9424abf7526c8b03f9b53.jpg 1]**     **[模板下载][Link 2]**

### Next – Unique & Easy Portfolio Template ###

这款精美的网站模板提供了三套风格的设计：全屏背景、单页滚动以及 Metro 面板。

[![images0-cnblogs-com_blog_36987_201310_29095830-7f3a66a695ea48c08da3a3bbe5f42c01.jpg][]][images0-cnblogs-com_blog_36987_201310_29095830-7f3a66a695ea48c08da3a3bbe5f42c01.jpg 1]

**[在线演示][images0-cnblogs-com_blog_36987_201310_29095830-7f3a66a695ea48c08da3a3bbe5f42c01.jpg 1]**     **[模板下载][Link 3]**

** **

### Creatrix – Flat Responsive Template ###

扁平化设计风格的响应式网站模板，大量使用了 CSS3 动画效果。

[![images0-cnblogs-com_blog_36987_201310_29095839-09d27855a9864a43b5e55f5b326143dc.jpg][]][images0-cnblogs-com_blog_36987_201310_29095839-09d27855a9864a43b5e55f5b326143dc.jpg 1]

**[在线演示][images0-cnblogs-com_blog_36987_201310_29095839-09d27855a9864a43b5e55f5b326143dc.jpg 1]**     **[模板下载][Link 4]**

### Flatnica – Ultimate Flat Template ###

带有 jQuery 滑块以及精美字体图标的扁平风格的 HTML5 & CSS3 模板。

[![2.flat portfolio template][]][2.flat portfolio template 1]

**[在线演示][2.flat portfolio template 1]**     **[模板下载][Link 5]**

### Flati – Flat Design Bootstrap Template ###

一款专业的响应式的 HTML5 作品集网站模板，基于 Twitter Bootstrap 创建。

[![3.flat portfolio template][]][3.flat portfolio template 1]

**[在线演示][3.flat portfolio template 1]**     **[模板下载][Link 6]**

### Straight – Creative Flat Template ###

适合设计师、自由职业者的创意扁平化风格网站模板。

[![4.flat portfolio template][]][4.flat portfolio template 1]

**[在线演示][4.flat portfolio template 1]**     **[模板下载][Link 7]**

### Hypertext – Flat Portfolio Template ###

时下流行的扁平化的、响应式的 HTML5 & CSS3 网站模板。

[![5.flat portfolio template][]][5.flat portfolio template 1]

**[在线演示][5.flat portfolio template 1]**     **[模板下载][Link 8]**

### Rinna – Flat One Page Template ###

很有范的扁平化设计的单页网站模板，基于 HTML5 & CSS3 技术。

[![6.flat portfolio template][]][6.flat portfolio template 1]

**[在线演示][6.flat portfolio template 1]**     **[模板下载][Link 9]**

### iLevel – Flat Design Bootstrap Template ###

这是另一款基于 Twitter Bootstrap 创建的扁平风格网站模板。

[![7.flat portfolio template][]][7.flat portfolio template 1]

**[在线演示][7.flat portfolio template 1]**     **[模板下载][Link 10]**

### Fraiche – Flat One-Page Portfolio Bootstrap Template ###

适合个人和团队的扁平化风格单页网站模板，也是基于 Twitter Bootstrap 创建的。

[![8.flat portfolio template][]][8.flat portfolio template 1]

**[在线演示][8.flat portfolio template 1]**     **[模板下载][Link 11]**

### Paris – Responsive HTML5 Template ###

Paris 是一个功能齐全的响应式的 HTML5/CSS3 网站模板。

[![9.flat portfolio template][]][9.flat portfolio template 1]

**[在线演示][9.flat portfolio template 1]**     **[模板下载][Link 12]**

### Focus – Fully Responsive Portfolio Template ###

Focus 是基于时下流行的响应式 & 扁平化设计风格的作品集网站模板。

[![11.flat portfolio template][]][11.flat portfolio template 1]

**[在线演示][11.flat portfolio template 1]**     **[模板下载][Link 13]**

### Grid – Responsive Portfolio Retina Template ###

Grid 也是一款响应式的个人作品集网站模板，支持 Retina 显示。

[![13.flat portfolio template][]][13.flat portfolio template 1]

**[在线演示][Link 14]**     **[模板下载][Link 15]**

### Renova – Unique One Page Theme ###

Renova 是一款设计独特的单页网站模板，采用扁平化的设计风格。

[![images0-cnblogs-com_blog_36987_201310_29095453-68a621ba6bf441d2955fb915e74a72e8.jpg][]][images0-cnblogs-com_blog_36987_201310_29095453-68a621ba6bf441d2955fb915e74a72e8.jpg 1]

**[在线演示][images0-cnblogs-com_blog_36987_201310_29095453-68a621ba6bf441d2955fb915e74a72e8.jpg 1]**     **[模板下载][Link 16]**

### Alfie – Responsive Bootstrap Html Template ###

最后这款网站模板同样是基于 Twitter Bootstrap 的响应式网站模板。

[![images0-cnblogs-com_blog_36987_201310_29100842-ec5de7f174ea437b8e26a789c1238e7c.jpg][]][images0-cnblogs-com_blog_36987_201310_29100842-ec5de7f174ea437b8e26a789c1238e7c.jpg 1]

**[在线演示][images0-cnblogs-com_blog_36987_201310_29100842-ec5de7f174ea437b8e26a789c1238e7c.jpg 1]**     **[模板下载][Link 17]**

### 您可能感兴趣的相关文章 ###

*  [12款高质量的免费 CSS 网站模板下载][12_ CSS]
 *  [最新30佳精美 PSD 网站模板免费下载][30_ PSD]
 *  [12款高质量的免费 HTML 网页模板下载][12_ HTML]
 *  [45款高质量的免费(X)HTML/CSS模板][45_X_HTML_CSS]
 *  [12款很漂亮的免费 CSS 网页模板下载][12_ CSS 1]

英文来源：[HTML5/CSS3 Flat Portfolio Website Template][HTML5_CSS3_Flat Portfolio Website Template]

编译来源：[梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源][_ _ _]

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[HTML5]: http://www.cnblogs.com/lhb25/category/146076.html
[CSS3]: http://www.cnblogs.com/lhb25/category/146075.html
[35_ CSS3 _ HTML5]: http://www.cnblogs.com/lhb25/archive/2012/08/03/5-creative-html5-and-css3-templates.html
[12_ CSS]: http://www.cnblogs.com/lhb25/archive/2011/11/01/high-quality-css-templates-free-download.html
[25_ CSS]: http://www.cnblogs.com/lhb25/archive/2013/01/27/creative-and-beautiful-css-website-templates.html
[12_ HTML]: http://www.cnblogs.com/lhb25/archive/2011/11/11/high-quality-html-templates-free-download.html
[12_ CSS 1]: http://www.cnblogs.com/lhb25/archive/2011/11/17/free-high-quality-css-templates.html
[images0-cnblogs-com_blog_36987_201310_29095808-fe92e80e451d4c9a9cdb9d9db26224f5.jpg]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/images0-cnblogs-com_blog_36987_201310_29095808-fe92e80e451d4c9a9cdb9d9db26224f5.jpg
[images0-cnblogs-com_blog_36987_201310_29095808-fe92e80e451d4c9a9cdb9d9db26224f5.jpg 1]: http://www.yyyweb.com/demo/inner-show/st-persona.html
[Link 1]: http://themeforest.net/item/persona-html5-responsive-creative-parallax/3036342?ref=cinim
[images0-cnblogs-com_blog_36987_201310_29095820-d61c1a86bfd9424abf7526c8b03f9b53.jpg]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/images0-cnblogs-com_blog_36987_201310_29095820-d61c1a86bfd9424abf7526c8b03f9b53.jpg
[images0-cnblogs-com_blog_36987_201310_29095820-d61c1a86bfd9424abf7526c8b03f9b53.jpg 1]: http://www.yyyweb.com/demo/inner-show/st-superb.html
[Link 2]: http://themeforest.net/item/superb-responsive-onepage-portfolio/5801938?ref=cinim
[images0-cnblogs-com_blog_36987_201310_29095830-7f3a66a695ea48c08da3a3bbe5f42c01.jpg]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/images0-cnblogs-com_blog_36987_201310_29095830-7f3a66a695ea48c08da3a3bbe5f42c01.jpg
[images0-cnblogs-com_blog_36987_201310_29095830-7f3a66a695ea48c08da3a3bbe5f42c01.jpg 1]: http://www.yyyweb.com/demo/inner-show/st-designova.html
[Link 3]: http://themeforest.net/item/next-unique-easy-portfolio-responsive-html5/5726946?ref=cinim
[images0-cnblogs-com_blog_36987_201310_29095839-09d27855a9864a43b5e55f5b326143dc.jpg]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/images0-cnblogs-com_blog_36987_201310_29095839-09d27855a9864a43b5e55f5b326143dc.jpg
[images0-cnblogs-com_blog_36987_201310_29095839-09d27855a9864a43b5e55f5b326143dc.jpg 1]: http://ivang-design.com/creatrix/parallax/
[Link 4]: http://themeforest.net/item/creatrix-flat-responsive-template/5315308?ref=cinim
[2.flat portfolio template]: http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2013/10/2.flat-portfolio-template1.jpg
[2.flat portfolio template 1]: http://themes.wpbrickr.com/flatnica/index.php
[Link 5]: http://themeforest.net/item/flatnica-ultimate-flat-template/5343665?ref=cinim
[3.flat portfolio template]: http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2013/10/3.flat-portfolio-template.jpg
[3.flat portfolio template 1]: http://themes.spiralpixelthemes.co.uk/?theme=Flati
[Link 6]: http://themeforest.net/item/flati-responsive-flat-design-bootstrap-template/4690890?ref=cinim
[4.flat portfolio template]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/designbeep-designbeep-netdna-cdn-com_wp-content_uploads_2013_10_4-flat-portfolio-template.jpg
[4.flat portfolio template 1]: http://weblusive.com/themes/straight/
[Link 7]: http://themeforest.net/item/straight-creative-flat-html-template/5287512?ref=cinim
[5.flat portfolio template]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/designbeep-designbeep-netdna-cdn-com_wp-content_uploads_2013_10_5-flat-portfolio-template.jpg
[5.flat portfolio template 1]: http://wopethemes.com/demo/hypertext-html/
[Link 8]: http://themeforest.net/item/hypertext-flat-portfolio-html-template/5333337?ref=cinim
[6.flat portfolio template]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/designbeep-designbeep-netdna-cdn-com_wp-content_uploads_2013_10_6-flat-portfolio-template.jpg
[6.flat portfolio template 1]: http://99webpage.com/theme-review/html/rinna/
[Link 9]: http://themeforest.net/item/rinna-flat-and-responsive-onepage-template/5012435?ref=cinim
[7.flat portfolio template]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/designbeep-designbeep-netdna-cdn-com_wp-content_uploads_2013_10_7-flat-portfolio-template.jpg
[7.flat portfolio template 1]: http://themes.spiralpixelthemes.co.uk/?theme=iLevel
[Link 10]: http://themeforest.net/item/ilevel-responsive-flat-design-bootstrap-template/5159974?ref=cinim
[8.flat portfolio template]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/designbeep-designbeep-netdna-cdn-com_wp-content_uploads_2013_10_8-flat-portfolio-template.jpg
[8.flat portfolio template 1]: https://dl.dropboxusercontent.com/u/20516131/WebsiteTemplates/fraiche/index.html
[Link 11]: http://themeforest.net/item/fraiche-flat-onepage-portfolio-bootstrap-template/5351761?ref=cinim
[9.flat portfolio template]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/designbeep-designbeep-netdna-cdn-com_wp-content_uploads_2013_10_9-flat-portfolio-template.jpg
[9.flat portfolio template 1]: http://themes.spiralpixelthemes.co.uk/?theme=Paris
[Link 12]: http://themeforest.net/item/paris-responsive-html5-template/5463894?ref=cinim
[11.flat portfolio template]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/designbeep-designbeep-netdna-cdn-com_wp-content_uploads_2013_10_11-flat-portfolio-template.jpg
[11.flat portfolio template 1]: http://preview.effekthemes.com/focus
[Link 13]: http://themeforest.net/item/focus-fully-responsive-portfolio-template/5706164?ref=cinim
[13.flat portfolio template]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/designbeep-designbeep-netdna-cdn-com_wp-content_uploads_2013_10_13-flat-portfolio-template.jpg
[13.flat portfolio template 1]: http://www.cnblogs.com/lhb25/p/flat-portfolio-website-templates-html5-css3.html
[Link 14]: http://themes.felixplus.com/grid-html/
[Link 15]: http://themeforest.net/item/grid-responsive-portfolio-retina-template/4911028?ref=cinim
[images0-cnblogs-com_blog_36987_201310_29095453-68a621ba6bf441d2955fb915e74a72e8.jpg]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/images0-cnblogs-com_blog_36987_201310_29095453-68a621ba6bf441d2955fb915e74a72e8.jpg
[images0-cnblogs-com_blog_36987_201310_29095453-68a621ba6bf441d2955fb915e74a72e8.jpg 1]: http://themes.designova.net/?theme=renova
[Link 16]: http://themeforest.net/item/renova-unique-one-page-theme-responsive-html5/4803394?ref=cinim
[images0-cnblogs-com_blog_36987_201310_29100842-ec5de7f174ea437b8e26a789c1238e7c.jpg]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/images0-cnblogs-com_blog_36987_201310_29100842-ec5de7f174ea437b8e26a789c1238e7c.jpg
[images0-cnblogs-com_blog_36987_201310_29100842-ec5de7f174ea437b8e26a789c1238e7c.jpg 1]: http://wordpress-themes.derby-web-design-agency.co.uk/?theme=AlfieHtml
[Link 17]: http://themeforest.net/item/alfie-responsive-bootstrap-html-template/5054867?ref=cinim
[30_ PSD]: http://www.cnblogs.com/lhb25/archive/2011/04/27/2025397.html
[45_X_HTML_CSS]: http://www.cnblogs.com/lhb25/archive/2011/03/03/1969402.html
[HTML5_CSS3_Flat Portfolio Website Template]: http://designbeep.com/2013/10/10/collection-trendy-flat-portfolio-website-templates-html5css3/
[_ _ _]: http://www.cnblogs.com/lhb25/archive/2011/07/21/high-quality-free-web-templates-and-layouts-two.html