代码转化平台
https://tool.chinaz.com/Tools/Html_Js.aspx
解决兼容代码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-Frame-Options" content="SAMEORIGIN / DENY ">
/*字体大小自适应*/
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
H5布局
自适应屏幕
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
固定首尾中间滚动
<style>
position: fixed;
top: 0;
left: 0;
right: 0;
</style>
水平居中
div {
width: 320px;
height: 50px;
margin: 50px auto;
}
标签
圆角
border-radius: 25px;
渐变色
且需兼容不同浏览器标准语法
/* Safari 5.1 - 6.0 */
background: -webkit-linear-gradient(top,#0082EF,#00BFFF);
/* Opera 11.6 - 12.0 */
background: -o-linear-gradient(top,#0082EF,#00BFFF);
/* Firefox 3.6 - 15 */
background: -moz-linear-gradient(top,#0082EF,#00BFFF);
/* 标准的语法 */
background: linear-gradient(to top,#0082EF,#00BFFF);
背景变色
鼠标悬浮选择选项是修改背景颜色
a:hover {
background-color: #00b386;
color: white;
}
iframe内嵌页面跳转
可规避第三方界面登陆界面显示异常
<script type="text/javascript">
function jumpURL(url){
document.getElementById("myIframe").src =url;
}
<html>
<iframe src="#" width="100%" height="800px" frameborder="0" id="myIframe"></iframe>
<a href="javascript:void(0)" onclick="jumpURL('#')" >仪表盘</a>