h5网站模版代码（h5网站模板）

本篇文章给大家谈谈h5网站模版代码，以及h5网站模板对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、html5 怎么制作响应式网页
• 2、html5网站模板怎么加百度统计？
• 3、如何复用HTML模板代码，比如头部尾部等相同代码的部分，具体怎么做
• 4、h5模板怎么添加url
• 5、HTML5实现播放PPT的方法是什么？
• 6、微信朋友圈转发的带背景音乐的H5页面是怎么做的，求大神发一个源码。

html5 怎么制作响应式网页

步骤1 创建空白的HTML 5模版

首先，我们创建一个空白的模版，代码很简单，如下所示：

复制代码

步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：

复制代码

读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的 步骤3 往HTML 5标签中增加代码

1）首先往标题中增加如下代码：

　Simple HTML5 Template

复制代码

2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：

Home About Parent Page Child

One Child Two with child Child One Child

Two Child Three Child Three

Contact

复制代码

3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示：

This is a title for post

Richard KS 20th March 2013 Tutorials HTML5, CSS3

and Responsive 10 Comments Lorem

Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the

1500s

复制代码

4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。

根据目前的规范，元素有两种使用方法：

被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。

在之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

代码如下：

Categories Category 1 Category 2

Parent Category Child One Child Two

Grandchild One Grandchild Two Grandchild Three

Child Three Category 3

Text Lorem Ipsum is simply dummy

text of the printing and typesetting industry.

复制代码

5）加上最后的标签，代码为：

Copyright@ 2013 HTML5.com Privacy Policy - About Us

复制代码

步骤4 增加CSS样式

首先创建一个空白的样式，如下：

[/code] 然后在中下载这个css,然后将其内容复制到该空白的文件中代码如下： [code]body {

font-family: arial, sans-serif;

font-size: 100%; /* best for all browser using em */

padding:0;

margin:0;

}

*, html { line-height: 1.6em; }

article img { width:auto; max-width:100%; height:auto; }

.sidebar a, article a, header a, footer a { color: #C30; }

header a { text-decoration: none; }

#wrapper {

font-size: 0.8em; /* 13px from 100% global font-size */

max-width: 960px; /* standard 1024px wide */

margin: 0 auto;

}

/* css for */

header { padding: 1em 0; margin: 0px; float: left; width: 100%;

}

header hgroup { width: 100%; font-weight:normal; }

/* css for */

nav

{ display: block; margin: 0 0 2em; padding: 0px;

float: left; width: 100%; background-color: #181919;

}

nav ul ul {display: none;}

nav ul li:hover ul {display: block;}

nav

ul { padding: 0; list-style: none; position:

relative; display: inline-table; z-index: 9999;

margin: 0px; float: left; width: 100%;

}

nav ul:after {content: ""; clear: both; display: block;}

nav ul li {float: left;}

nav ul li:hover a {color: #fff;}

nav

ul li a { display: block; padding: 1em; font-size:

1.125em; color: #ccc; text-decoration: none;

margin: 0px; background-color: #000; border-right: 1px

solid #333;

}

nav ul li:last-of-type a {border-right: 1px solid transparent !important;}

nav

ul ul { background: #5f6975; border-radius: 0px;

padding: 0; position: absolute; top: 100%; width:

auto; float: none;

}

nav ul li:hover { background: #5f6975; color: #FFF;

}

nav ul ul li a:hover { background-color: #4b545f;

}

nav ul ul li {

float: none;

border-bottom: 1px solid #444240;

position: relative;

}

nav ul ul li a {

padding: 0.5em 1em;

font-size: 1em;

width:10em;

color: #fff;

}

nav ul ul ul {

position: absolute; left: 100%; top:0;

}

/* css for */

section.content { width: 70%; float:left; }

.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }

article .entry { clear:both; padding: 0 0 1em; }

h1.post-title { font-size: 1.8em; margin:0; padding:0;}

.entry.post-meta { color: #888; }

.entry.post-meta span { padding: 0 1em 0 0; }

.entry.post-content { font-size: 1.125em; margin:0; padding:0;}

/* css for */

aside.sidebar { width: 25%; float:right; }

aside.sidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;

}

aside.sidebar

ul li { width:100%; margin: 0px 0px 2em; padding:

0px; float: left; list-style: none;

}

aside.sidebar ul li ul li { margin: 0px 0px 0.2em; padding: 0px;

}

aside.sidebar

ul li ul li ul li { margin: 0px; padding: 0px 0px 0px

1em; width: 90%; font-size: 0.9em;

}

aside.sidebar

ul li h3.widget-title { width:100%; margin: 0px;

padding: 0px; float: left; font-size: 1.45em;

}

/* css for */

footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;

}

footer .footer-left { width: 45%; float:left; text-align:left; }

footer .footer-right { width: 45%; float:right; text-align:right; }

复制代码

步骤5 为移动应用使用@media query查询 为了进行响应式设计，最佳的方案是使用@media query去进行查询，在上面的CSS代码中添加如下代码：

/* ipad 768px */

@media only screen and (min-width:470px) and (max-width:770px){

body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }

section.content, aside.sidebar { width:100%; }

}

/* iphone 468px */

@media only screen and (min-width:270px) and (max-width:470px){

body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }

section.content, aside.sidebar { width:100%; }

}

复制代码

步骤6 增加jquery,modernizer和html5shiv到标签中 这里推荐使用Modernizr 和html5shiv，它们都是一个能在多种浏览器中通过运行各种脚本兼容运行支持大部分HTML 5标签的插件。我们将它们和jQuery库放在标签前，代码如下：

复制代码

html5网站模板怎么加百度统计？

1、首先搜索进入百度统计，如果没有站长账号的可以注册一个。进入的页面显示的是网站的大致统计信息，新网站还没有，那就新增吧。

2、选择最上面的网站中心。点击新增网站，添加自己网站地址。

3、点击网站后面的获取代码，跳转到一个统计代码页面，可以将代码复制放在网页body内。

4、也可以将统计代码复制到网站首页，其他页面也一样，或者使用百度的一键安装功能对所有页面添加统计。

5、这样百度统计代码就安装完毕了。以后网站的统计信息就可以在报告中查看了。

如何复用HTML模板代码，比如头部尾部等相同代码的部分，具体怎么做

HTML复用，不需要任何模板就可以复用相同的内容

条件：控制页面布局显示就可以完成

示例：

主页

!DOCTYPE html

html

head

meta charset='utf-8' /

titleHTML调试/title

script type='text/javascript' src='js/jquery-1.8.0.min.js'/script

script src='js/zui.min.js' type='text/javascript' charset='utf-8'/script

script src='js/jquery-barcode.js' type='text/javascript' charset='utf-8'/script

link rel='stylesheet' type='text/css' href='css/zui.css' /

style type='text/css'

#container {

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

width: 100%;

height: 100%;

overflow: auto;

font-family: '宋体';

}

/style

/head

body

div id='container'

!--复用页面容器1--

div style="position: absolute;left: 0px;top: 0px;height: 70px;width: 100%;border-bottom: 1px solid #F1F1F1;"

iframe align="center" width="100%" height="70px" src="html/page_header.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"/iframe

/div

div id="contents" style="position: absolute;left: 0px;top: 70px;width: 100px;"

!--不相同内容容器--

/div

!--复用页面容器2--

div style="position: absolute;left: 0px;top: 585px;height: 70px;width: 100%;border-top: 1px solid #F1F1F1;"

iframe align="center" width="100%" height="70px" src="html/page_footer.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"/iframe

/div

/div

/body

/html

复用页面1

!DOCTYPE html

html

head

meta charset="UTF-8"

script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"/script

link rel="stylesheet" href="../css/bootstrap.min.css" /

title复用头部/title

/head

body

div style="position: absolute;left: 0px;top: 0px;height: 70px;width:100%;background: #ff0;font-size: 30px;text-align: center;line-height: 70px;"

复用头部

/div

/body

/html

复用页面2

!DOCTYPE html

html

head

meta charset="UTF-8"

script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"/script

link rel="stylesheet" href="../css/bootstrap.min.css" /

title复用底部/title

/head

body

div style="position: absolute;left: 0px;top: 0px;height: 70px;width:100%;background: #ff0;font-size: 30px;text-align: center;line-height: 70px;"

复用底部

/div

/body

/html

项目结构

实现结果：

h5模板怎么添加url

1、h5模板添加url方法右键点击该图片，然后点属性，把地址也就是URL复制下来，然后粘到签名档里，保存就行了。

2、但是通常有些网站会关闭，所以最好把图片保存在硬盘上，上传到空间里，这样就不会丢失。

HTML5实现播放PPT的方法是什么？

HTML5实现播放PPT的方法可以调用CSS样式，步骤如下；

1、调用JS插件代码：

script src="js/yhc.js"/script

script src="js/main.js" charset="utf-8"/script

scriptimpress().init();/script

2、添加CSS样式代码：link href="css/qqguoji.css" rel="stylesheet" /。

3、添加HTML代码：将!--效果html开始--......!--效果html结束--之间的html和js代码；放在body/body之间。

该HTML5网页模版是一款基于html5实现的网页旋转、移动切换PPT展示效果。请用支持HTML5+CSS3主流浏览器预览效果，兼容测试：IE11、Firefox、Chrome、Opera、Safari、360等支持HTML5+CSS3主流浏览器

微信朋友圈转发的带背景音乐的H5页面是怎么做的，求大神发一个源码。

1、有网站专门做这个，你可以选个模版去制作一个。

2、如果你是程序员，可以自己个页面。上传到web服务器上。我就是程序员我写了一个供参考。

源代码：码云

关于h5网站模版代码和h5网站模板的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。