存档

‘html总结’ 分类的存档

h5手机版网页如何添加网页背景音乐?

2017年9月7日 没有评论

如何实现手机版自动播放网页背景音乐?

代码如下:

<!DOCTYPE html>
<html><head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<meta charset=”utf-8″>
<title>背景音乐</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1″>
<style>
html, body {position: relative;height: 100%;}
body {background: #fff;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color:#000;margin: 0;padding: 0;}
</style>
</head>
<body>

<audio id=”audio” preload=”auto” autoplay loop>
<source src=”yuzhouchangwan.mp3″ type=”audio/mpeg”>
</audio>

<script src=”http://libs.baidu.com/jquery/2.0.0/jquery.min.js”></script>
<script type=”text/javascript”>
$().ready(function(){
$(document).one(‘touchstart’,function(e){
var music=document.getElementById(“audio”);
if(music.paused){music.play();}
});
document.addEventListener(“WeixinJSBridgeReady”,function onBridgeReady(){document.getElementById(“audio”).play();});
});
</script>

</body>
</html>

但是这个代码,在微信中打开的时候,会自动播放,普通手机浏览器打开不会自动播放,因为:

移动端浏览器大部分是禁用video和audio的autoplay功能

并且,很多移动浏览器也不支持首次js调用play方法进行播放

这样做主要是为了防止不必要的自动播放浪费流量

分类: html总结 标签: , ,

如何打开网页自动弹出QQ聊天窗口

2015年12月16日 没有评论

现在很多网站只要一打开,首页就会自动弹出一个QQ聊天询问窗口,这种行为有点不友好,但是越来越多人采用,那么如果我们要实现这样的功能,如何增加代码呢?

只要在html里面增加如下代码即可:

<iframe style=”display:none;” src=”tencent://message/?uin=你的QQ号码&Site=&menu=yes”></iframe>

div+css,左侧宽度固定,右侧自适应

2015年7月2日 没有评论

实现了左侧div宽度固定,右侧根据左侧宽度自适应屏幕宽度的功能,代码如下:

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>左侧div宽度固定,右侧根据左侧宽度自适应屏幕宽度</title>
<style type=”text/css”>
* {font-size:12px;margin:0px;padding:0px;}
a {text-decoration:none;color:#000;}
a img {border:none;}
.cl {clear:both;}
div.boxall {position:relative;padding-left:180px;}
div.left {width:180px;margin-left:-180px;float:left;height:300px;background:blue;}
div.right {width:100%;float:left;height:300px;background:red;}
</style>
</head>

<body>
<div class=”boxall”>
<div class=”left”>
左侧内容,左侧固定宽度
</div>
<div class=”right”>
右侧内容,右侧根据左侧宽度自适应屏幕宽度
</div>
</div>
</body>
</html>

分类: html总结 标签: , , ,

2端2种颜色,中间固定宽度和颜色

2015年4月27日 没有评论

要求实现如下效果(根据宽度自适应)

2端2种颜色,中间固定宽度和颜色

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<style type=”text/css”>
* {padding:0px;margin:0px;}
.box {height:28px;background:red;position:relative;}
.leftBlue {width:50%;height:28px;background:blue;position:absolute;left:0px;top:0px;z-index:0}
.content {height:28px;background:black;width:1000px;margin:0px auto;position:relative;z-index:1;text-align:center;color:#fff;line-height:28px;}
</style>
</head>

<body>
<div class=”box”>
<div class=”leftBlue”></div>
<div class=”content”>内容</div>
</div>
</body>
</html>

tagcloud标签云效果源码下载

2013年6月1日 没有评论

首先,有一个调用的index.html,源代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title>
</head>

<body>
<p></p>
<script type=”text/javascript” src=”tagcloud/swfobject.js”></script>
<embed src=”tagcloud/tagcloud.swf” width=”240″ height=”240″ tplayername=”SWF” splayername=”SWF” type=”application/x-shockwave-flash” mediawrapchecked=”true” pluginspage=”http://www.macromedia.com/go/getflashplayer” id=”tagcloudflash” name=”tagcloudflash”  quality=”high” wmode=”transparent” allowscriptaccess=”always” flashvars=”tcolor=0xad433b&amp;tcolor2=0xad433b&amp;hicolor=0xad433b&amp;tspeed=100&amp;distr=true”></embed>
</body>
</html>

 

其次有1个文件夹:tagcloud,里面有swfobject.js和tagcloud.swf和tagcloud.xml

swfobject.js网上很多,就不提供源代码了。

tagcloud.xml的源代码如下:

<tags>
<a href=”http://www.zhanghongliang.com”  title=”1 topics” rel=”tag” style=”font-size:30pt;” color=”#ff0000″>张虹亮</a>
<a href=”http://www.zhanghongliang.com”  title=”1 topics” rel=”tag” style=”font-size:30pt;”>张虹亮</a>
<a href=”http://www.zhanghongliang.com”  title=”1 topics” rel=”tag” style=”font-size:30pt;”>张虹亮</a>
<a href=”http://www.zhanghongliang.com”  title=”1 topics” rel=”tag” style=”font-size:30pt;”>张虹亮</a>
<a href=”http://www.zhanghongliang.com”  title=”1 topics” rel=”tag” style=”font-size:30pt;”>张虹亮</a>
<a href=”http://www.zhanghongliang.com”  title=”1 topics” rel=”tag” style=”font-size:30pt;” hicolor=”0xff6600″>张宏良</a>
<a href=”http://www.zhanghongliang.com”  title=”1 topics” rel=”tag” style=”font-size:30pt;”>张宏良</a>
<a href=”http://www.zhanghongliang.com”  title=”1 topics” rel=”tag” style=”font-size:30pt;”>张宏良</a>
<a href=”http://www.zhanghongliang.com” title=”1 topics” rel=”tag” style=”font-size:30pt;”>张宏良</a>
<a href=”http://www.zhanghongliang.com” title=”1 topics” rel=”tag” style=”font-size:30pt;”>张宏良</a>
<a href=”http://www.zhanghongliang.com” title=”1 topics” rel=”tag” style=”font-size:30pt;”>张宏良博客</a>
<a href=”http://www.zhanghongliang.com” title=”1 topics” rel=”tag” style=”font-size:30pt;”>张宏良博客</a>
<a href=”http://www.zhanghongliang.com” title=”1 topics” rel=”tag” style=”font-size:30pt;”>张宏良博客</a>
<a href=”http://www.zhanghongliang.com” title=”1 topics” rel=”tag” style=”font-size:30pt;”>张宏良博客</a>
<a href=”http://www.zhanghongliang.com” title=”1 topics” rel=”tag” style=”font-size:30pt;”>张宏良博客</a>
<a href=”http://www.zhanghongliang.com” title=”1 topics” rel=”tag” style=”font-size:30pt;”>张洪量</a>
<a href=”http://www.zhanghongliang.com” title=”1 topics” rel=”tag” style=”font-size:30pt;”>张洪量</a>
<a href=”http://www.zhanghongliang.com” title=”1 topics” rel=”tag” style=”font-size:30pt;”>张洪量</a>
<a href=”http://www.zhanghongliang.com” title=”1 topics” rel=”tag” style=”font-size:30pt;”>张洪量</a>
<a href=”http://www.zhanghongliang.com” title=”1 topics” rel=”tag” style=”font-size:30pt;”>张洪量</a>
</tags>
最后奉上压缩包下载:tagcloud标签云效果源码下载

分类: html总结 标签: , ,
css.php