1.匹配手机窗体
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
2.背景图片 且 匹配窗体
<body background="images/index.jpg"
style=" background-repeat:no-repeat; background-size:100% 100%; background-attachment: fixed;">
3.居中显示
<center></center>
4.文本颜色变更
style="color: rgb(255, 62, 155);"
这里举例的是橘红色
附赠调色板一个
5.超链接
这里举例的是加群的 可以加在所有的两边 缺点是文字颜色会变蓝
<a target="_blank" href="https://jq.qq.com/?_wv=1027&k=5O9DynF"></a>
可以在超链接中添加颜色属性例如:
<a target="_blank" href="https://jq.qq.com/?_wv=1027&k=5O9DynF" style="color: rgb(255, 62, 155);">
6.事件的获取 及 展示
<script>
$(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// 获取已激活的标签页的名称
var activeTab = $(e.target).text();
// 获取前一个激活的标签页的名称
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
</script>
<p class="active-tab"><strong>激活的标签页</strong>：<span></span></p>
<p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p>
7.背景音乐
这里例举的是网易云音乐的外链 将宽高显示设置为0 即可隐藏 问题是:手机默认播放 电脑不默认播放 且容易受到网易云音乐官方的影响
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=0 height=0 src="//music.163.com/outchain/player?type=2&id=857606&auto=1&height=66"></iframe>
下面这个都是原本的:
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=857606&auto=1&height=66"></iframe>
8.bootstrap3
| 超小设备手机（<768px） | 小型设备平板电脑（≥768px） |
|---|---|
| .col-xs- | .col-sm- |
| 中型设备台式电脑（≥992px） | 大型设备台式电脑（≥1200px） |
|---|---|
| .col-md- | .col-lg- |
匹配手机例如: class="col-xs-12"
9.底部 一直在底部显示 需要刚好三个换行
<!-- bottom -->
<br/><br/><br/>
<body style="background-color:#124E76;">
<div class="container-fluid">
<div class="row" style="margin:0 -15px">
<div class="col-xs-12" style="position:fixed;bottom:0;background-color:#104467;text-align:center;">
<span style="color:#F0F8FD;"><h4 >
<a target="_blank" href="http://www.beian.miit.gov.cn"><font style="margin: 0px 0px 0px 5px">陕ICP备19021888号</font></a><br/>
<a target="_blank" href="https://mail.qq.com/"> 邮箱：xyecy1314@qq.com</a>
</h4></span>
</div>
</div>
</div>
10.意见反馈
这里使用的是邮我 宽设置110px,一个图片一个超链接
<tr><td width="110">
<a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=altbWVpdUl9ZU1sqGxtECQUH" style="text-decoration:none;">
<img src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_12.png"/></a>
</td></tr>
11.实现展示
点进去可以看到我做的页面,这里做的是匹配手机的页面
x.xyecy.cn
12.小贴士
因为全都写在了html里面,有需要的话,在示例网页里面,按下F12,可以看到源码
