新增加的HTML5标签
Html5标签页面..
新增加的HTML5标签
<section>
<article>:定义 article
<aside>:定义页面内容之外的内容。
<audio>:定义声音内容。
<canvas>:定义图像。
<command>:定义命名按钮
<datalist>:定义数列(tree_list)中的数据
<datalist>:定义下拉列表。
<embed>定义外部交互内容或插件
<footer>:定义section或page的页脚。
<header>:定义section或page的页眉。
<nav>:定义导航链接。
<section>:定义section。
HTML5 布局.
<!DOCTYPE html>
<meta charset=”utf-8”>
<html>
<head></head>
<body>
</body>
</html>
<meta name="format-detection"content="telephone=no" />
Rem和px单位换算
Html5 公共样式(移动端app)
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0 auto; padding:0;}
li{ list-style:none;}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit;}
del,ins{text-decoration:none;}
q:before,q:after { content:''; }
abbr,acronym { border:0; }
sup,sub{vertical-align:baseline;}
a,p,span,strong,b,h1,h2,h3,h4,h5,input,dl,dt,dd,li,th,td,i,em{font:26px/1.5 arial,"Microsoft Yahei","Hiragino SansGB",sans-serif; font-size:0.650rem;}
a{ text-decoration:none;color:#656565;}
a:link{ color:#000000;cursor:pointer; text-decoration:none; }
a,p,span,strong,b{ color:#000000;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
.b{ font-weight:bold;}
.clear{ clear:both;}
js:自动适应手机屏幕大小的js,基本尺寸640的屏幕(实例智慧旅游app端)
<script src="js/af.min.js"></script>
<script>
var hjMoApp={
init:function(){
this.setHtmlFont(640);
this.bindOrientation();
},
bindOrientation:function(){
var _this=this;
supportsOrientationChange = "orientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
$(window).bind(orientationEvent, function(e){
_this.setHtmlFont(640);
});
},
setHtmlFont:function(deMaxWidth){
var deviceWidth=$(document).width(),
htmlFont=((deviceWidth/640)*40).toFixed(3),
maxFont=((deMaxWidth/640)*40).toFixed(3),
htmlEle=$("html");
if(deviceWidth<deMaxWidth){
htmlEle.css("fontSize",htmlFont+"px");
}else{
htmlEle.css("fontSize",maxFont+"px");
};
}
};
hjMoApp.init();
</script>