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. 没有图片

    2010.01.30

    30个精选的CSS技术和实例

    1.Hoverbox 图片集 一个纯净的基于…

  2. 没有图片

    2010.05.05

    网页设计可用的免费图案和纹理资源

    对于设计者来说,收藏一些图案和纹理资源非常有…

  3. 没有图片

    2012.02.28

    Windows 2003 Server 权限设置教程

    整理了一下Windows 2003 Serv…

  4. 没有图片

    2012.11.22

    服务器端口被占用解决方案

    在服务器上安装某服务时,可能会遇到端口被占用…

  5. 没有图片

    2009.10.07

    网站SEO关键词密度分析工具

    Image via Wikipedia 其实…

  6. 没有图片

评论

  1. 搓板 2011.03.22 10:53下午

    咋想的。 换域名。

    • 落花生 2011.03.23 7:31上午

      是啊,打算直接用我的名字当域名。

    • 落花生 2011.03.23 7:44上午

      好像同步一次就会在博客后台注册一个帐号。。。

  2. 学夫子 2011.03.22 9:42下午

    我是喜欢比较精致的模板,这些都不和我意

  3. 韩国 2011.03.22 11:21上午

    支持中文吗? 有没有图片主题。

    • 李思章 2011.03.23 7:42上午

      当然支持中文,主题没有不支持的。图片类的好像还没有。。。