12款免费的优秀高质量 HTML5+CSS3 模板

HTML5是下一代主要的HTML编码规范,HTML5为网页设计者们提供了一些强大的新功能,HTML5的新功能包括:表单控制、APIS、拖拽、多媒体、屏幕绘图等。本文向大家推荐12款免费的优秀高质量 HTML5+CSS3 模板。

1. Touch The Future: Create An Elegant Website With HTML 5 And CSS3

The aim of this tutorial is to create an elegant blog/portfolio for an efficient professional (graphic and web designer or photographer). You will can download the template at the end of the tutorial.

2. Free 2 Column & 3Column HTML5 template

2 column layout and another 3 column with a little contact box, .psd file is included with each template.

3. One-Page Website Template

An HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in.

4. EarthDay HTML5 and CSS3 Template

EarthDay is a 3-column HTML5 and CSS3 template designed to honor Earth Day. Sporting the blues and greens we’ve come to expect from eco-friendly sites, the template should work well for any green inspired content.

5. Coding A HTML 5 Layout From Scratch

Coding A HTML 5 Layout From Scratch

A very basic layout which covers most of the elements we can start coding using HTML5. Basically: the page’s name and it’s slogan, a menu, a highlighted (featured) area, a post listing, an extras section with some external links, an about box and finally a copyright statement.

6. FlipThru HTML5 and CSS3 Template

FlipThru is a 1-column business-oriented HTML5 and CSS3 template that makes extensive use of CSS3 to create a horizontal accordion effect. This effect does work in IE as well.

7. HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this tutorial, we are going to learn how to build a blog page using next-generation techniques from HTML 5 and CSS 3. Pretty much your every day blog design. Header with title, horizontal navigation, content area with comments and form, sidebar and a footer.

Take a look at the markup:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Page title</title>
  5. </head>
  6. <body>
  7. <header>
  8. <h1>Page title</h1>
  9. </header>
  10. <nav>
  11. <!– Navigation –>
  12. </nav>
  13. <section id=”intro”>
  14. <!– Introduction –>
  15. </section>
  16. <section>
  17. <!– Main content area –>
  18. </section>
  19. <aside>
  20. <!– Sidebar –>
  21. </aside>
  22. <footer>
  23. <!– Footer –>
  24. </footer>
  25. </body>
  26. </html>
<!doctype html>
<html>
<head>
	<title>Page title</title>
</head>
<body>
	<header>
		<h1>Page title</h1>
	</header>
	<nav>
		<!-- Navigation -->
	</nav>
	<section id="intro">
		<!-- Introduction -->
	</section>
	<section>
		<!-- Main content area -->
	</section>
	<aside>
		<!-- Sidebar -->
	</aside>
	<footer>
		<!-- Footer -->
	</footer>

</body>
</html>

8. Simple Website Layout Tutorial

A very Simple web page with HTML 5 and styling with CSS3.

9. Gotta’ love HTML5 & CSS3

A tabbed image gallery but animated using some CSS transitions. All of this is going to be built with HTML5 & CSS3, there is going to be NO use of flash or javascript for this layout.

10. HTML5 CSS3 starting template

It’s always useful to have a base to start a new website build from and what better way to encourage people to use HTML5 and CSS3 than sharing my basic HTML5/CSS3 template.

11. H5 WordPress Theme Template

The H5 Theme Template provides everything you need to create beautiful themes with HTML 5 right now. H5 contains a complete set of theme files and folders, and each file has been meticulously crafted with all of the latest and greatest WordPress functionality.

12. A free HTML5 and CSS3 theme

A truly HTML5 and CSS3 elegant theme with a Fully working Ajax PHP contact form, Uses the ChunkFive font to headings and IE6 & IE7 warning.

思章老师

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2012.04.28

    不用插件让WordPress集成支付宝

    这样的教程我是没有时间去原创的,文章引自id…

  2. 没有图片

    2011.04.15

    WordPress日志置顶方法及添加置顶图片标志

    WordPress不知道从哪个版本已经自带了…

  3. 没有图片

    2013.12.31

    MacBook 校准电池方法

    如果您的便携式 Mac 配备有可拆装电池,请…

  4. 没有图片

    2010.02.05

    网站弹出登陆窗口设计

    大家都知道,很多博客或网站都有一个点击弹出登…

  5. 没有图片

    2011.10.12

    博客添加jQuery页面载入进度条

    今天花生给博客添加了页面载入进度条,普通的页…

  6. 没有图片

    2013.12.31

    OS X Mavericks 10.9正式版下载地址

    OS X Mavericks终于免费了!拥有…

评论

  1. 花脸猴 2011.03.23 10:45上午

    现在真怕看代码,呵呵