<!DOCTYPE >
<HTML>
<HEAD>
<META charset="utf-8"><META name="description" content="微单品">
<META name="keywords" content="微单品"><!-- uc强制竖屏 -->
<META name="screen-orientation" content="portrait"><!-- QQ强制竖屏 -->
<META name="x5-orientation" content="portrait"><!-- UC强制全屏 -->
<META name="full-screen" content="yes"><!-- QQ强制全屏 -->
<META name="x5-fullscreen" content="true"><!-- UC应用模式 -->
<META name="browsermode" content="application"><!-- QQ应用模式 -->
<META name="x5-page-mode" content="app"><!-- windows phone 点击无高光 -->
<META name="msapplication-tap-highlight" content="no"><!-- 适应移动端end -->
<META name="format-detection" content="telephone=no,email=no,adress=no"><!--拨打电话邮箱和地址禁止--><TITLE>微单品</TITLE><LINK
href="微单品_files/haodanpin.css" rel="stylesheet" type="text/css">
<SCRIPT src="微单品_files/jquery-1.7.2.min.js" type="text/javascript"></SCRIPT>
<META name="GENERATOR" content="MSHTML 11.00.9600.17728"></HEAD>
<BODY><HEADER></HEADER>
<DIV class="contaner">
<P class="img-box"><IMG style="display: inline-block;" src="微单品_files/logo_haodanpin_1024.png"></P>
<DIV class="main-msg">
<FORM name="form" action="demo_form.php" method="get" autocomplete="on">
<P class="public"><!-- <input type="text" value="" placeholder="版本1.0" autofocus="autofocus" id="pub" > --><SPAN>版本1.0</SPAN></P>
<DIV class="line"></DIV><!-- <div class="ygw"></div> -->
<DIV class="nw">
<DIV
class="pable"><LABEL>邮 箱:</LABEL><!-- <input value="" type="email" placeholder="moblie@99114.com"autofocus="autofocus" id="email"> --><SPAN>mobile@99114.com</SPAN></DIV>
<DIV class="pable"><LABEL>官方 QQ群:</LABEL><!-- <input type="text" value="" placeholder="339118955"autofocus="autofocus" id="qq"> --><SPAN>339118955</SPAN></DIV>
<DIV class="pable"><LABEL>官方微信号:</LABEL><!-- <input type="text" value="" placeholder="wxbongv"autofocus="autofocus" id="wx"> --><SPAN>wxbongv</SPAN></DIV></DIV><!-- <div class="sub">提交</div> --><INPUT name="__hash__" type="hidden" value="4ee18551d7b633b89f21924988ed7444_d3ac8d751f634eb10fe03aef3230eece"></FORM></DIV>
<DIV class="tip-box">
<DIV class="tip"></DIV></DIV></DIV><FOOTER class="footer">
<P>本产品解释权由帮微所有</P>
<P>www.bongv.com</P></FOOTER>
<SCRIPT type="text/javascript">$(document).ready(function(){
//提交验证
//1、邮箱验证》》》
//2、qq号码验证
//3、官方微信号验证
//4、好单品版本号验证
/*
var sub=$(".sub");
sub.on("click",function(){
var pub=$("#pub");
var pubTest=$.trim(pub.val());
var email=$("#email");
var textEmail=$.trim(email.val());
var emailTest= /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
var qq=$("#qq");
var textQQ=$.trim(qq.val());
var qqTest=/^[1-9]\d{4,8}$/ ;//5-10位数字
var wx=$("#wx");
var textWx=$.trim(wx.val());
var tipArr=[
"版本内容不为空!",
"邮箱不能为空!",
"邮箱格式不对!",
"qq不能为空!",
"qq格式错误!",
"微信号不能为空!"
];
if(!pubTest){
//alert("版本内容不为空");
tip(tipArr[0]);
pub.focus();
return false;
}
if(!textEmail){
//alert("邮箱不能为空!!");
tip(tipArr[1]);
email.focus();
return false;
}else if(!emailTest.test(textEmail)){
//alert("邮箱格式不对!");
tip(tipArr[2]);
email.focus();
return false;
}
if(!textQQ){
//alert("qq不能为空");
tip(tipArr[3]);
qq.focus();
return false;
}else if(!qqTest.test(textQQ)){
//alert("qq格式错误");
tip(tipArr[4]);
qq.focus();
return false;
}
if(!textWx){
//alert("微信号不能为空!");
tip(tipArr[5]);
wx.focus();
return false;
}
function tip(msg){
var box=$(".tip-box").show();
box.find(".tip").html(msg);
setTimeout(function(){
box.hide();
box.find(".tip").html("oUo");
},1000);
}
})*/
$('body').on('touchmove', function (event) {
event.preventDefault();
});
})
</SCRIPT>
</BODY></HTML>
css>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
body {
margin: 0px; padding: 0px;
}
div {
margin: 0px; padding: 0px;
}
dl {
margin: 0px; padding: 0px;
}
dt {
margin: 0px; padding: 0px;
}
dd {
margin: 0px; padding: 0px;
}
ul {
margin: 0px; padding: 0px;
}
ol {
margin: 0px; padding: 0px;
}
li {
margin: 0px; padding: 0px;
}
h1 {
margin: 0px; padding: 0px;
}
h2 {
margin: 0px; padding: 0px;
}
h3 {
margin: 0px; padding: 0px;
}
h4 {
margin: 0px; padding: 0px;
}
h5 {
margin: 0px; padding: 0px;
}
h6 {
margin: 0px; padding: 0px;
}
pre {
margin: 0px; padding: 0px;
}
code {
margin: 0px; padding: 0px;
}
form {
margin: 0px; padding: 0px;
}
fieldset {
margin: 0px; padding: 0px;
}
legend {
margin: 0px; padding: 0px;
}
input {
margin: 0px; padding: 0px;
}
textarea {
margin: 0px; padding: 0px;
}
p {
margin: 0px; padding: 0px;
}
blockquote {
margin: 0px; padding: 0px;
}
th {
margin: 0px; padding: 0px;
}
td {
margin: 0px; padding: 0px;
}
table {
border-collapse: collapse; border-spacing: 0;
}
fieldset {
border: 0px currentColor; border-image: none;
}
img {
border: 0px currentColor; border-image: none;
}
address {
font-style: normal; font-weight: normal;
}
caption {
font-style: normal; font-weight: normal;
}
cite {
font-style: normal; font-weight: normal;
}
code {
font-style: normal; font-weight: normal;
}
dfn {
font-style: normal; font-weight: normal;
}
em {
font-style: normal; font-weight: normal;
}
strong {
font-style: normal; font-weight: normal;
}
th {
font-style: normal; font-weight: normal;
}
var {
font-style: normal; font-weight: normal;
}
ol {
list-style: none;
}
ul {
list-style: none;
}
caption {
text-align: left;
}
th {
text-align: left;
}
h1 {
font-size: 100%; font-weight: normal;
}
h2 {
font-size: 100%; font-weight: normal;
}
h3 {
font-size: 100%; font-weight: normal;
}
h4 {
font-size: 100%; font-weight: normal;
}
h5 {
font-size: 100%; font-weight: normal;
}
h6 {
font-size: 100%; font-weight: normal;
}
q::before {
content: "";
}
q::after {
content: "";
}
abbr {
border: 0px currentColor; border-image: none; font-variant: normal;
}
acronym {
border: 0px currentColor; border-image: none; font-variant: normal;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input {
font-family: inherit; font-size: inherit; font-weight: inherit;
}
textarea {
font-family: inherit; font-size: inherit; font-weight: inherit;
}
select {
font-family: inherit; font-size: inherit; font-weight: inherit;
}
legend {
color: rgb(0, 0, 0);
}
.clear {
height: 0px; line-height: 0; overflow: hidden; clear: both; font-size: 0px;
}
.clearfix::after {
height: 0px; clear: both; display: block; visibility: hidden; content: ".";
}
* html .clearfix {
-ms-zoom: 1;
}
*:first-child + html .clearfix {
-ms-zoom: 1;
}
img {
display: block;
}
body {
color: rgb(0, 0, 0); font-family: "微软雅黑","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",sans-serif; font-size: 100%; -ms-overflow-y: hidden; min-width: 320px;
}
input {
font: 13.33px/normal "微软雅黑"; font-size-adjust: none; font-stretch: normal;
}
.contaner {
margin: 0px auto; text-align: center; font-size: 14px; position: relative;
}
.img-box {
margin: 10% auto; text-align: center;
}
.img-box img {
height: 100%; display: inline-block; max-width: 100%;
}
.line {
background: url("./images/bg.png") repeat-x rgb(190, 190, 190); margin: 0px auto; border: currentColor; border-image: none; width: 80%; height: 1px; text-align: center;
}
.nw {
margin-top: 20px; margin-bottom: 20px;
}
.footer {
margin: 0px auto; width: 100%; text-align: center; bottom: 1%; color: rgb(81, 78, 78); font-size: 12px; position: absolute;
}
.public {
margin: 2% auto;
}
.ygw {
margin: 2% auto;
}
.pable {
width: 300px; height: 34px; text-align: center; line-height: 34px; display: inline-block;
}
.public input {
padding: 6px; border: currentColor; border-image: none; text-align: center;
}
.pable label {
padding: 6px; width: 78px; display: inline-block;
}
.pable span {
padding: 6px; width: 136px; text-align: left; color: rgb(0, 0, 0); text-decoration: none; display: inline-block;
}
.pable input {
padding: 6px; border: currentColor; border-image: none;
}
@media screen and (max-width:992px) and (min-width:769px)
{
.img-box {
width: 200px; height: 200px;
}
}
@media screen and (max-width:768px) and (min-width:641px)
{
.img-box {
width: 180px; height: 180px;
}
}
@media screen and (max-width:640px) and (min-width:577px)
{
.img-box {
width: 160px; height: 160px;
}
}
@media screen and (max-width:576px) and (min-width:481px)
{
.img-box {
width: 140px; height: 140px;
}
}
@media screen and (max-width:480px) and (min-width:321px)
{
.img-box {
width: 120px; height: 120px;
}
}
@media screen and (max-width:320px) and (min-width:300px)
{
.img-box {
width: 100px; height: 100px;
}
}
.sub {
background: rgb(98, 207, 92); margin: 0px auto; border-radius: 4px; width: 160px; height: 44px; text-align: center; color: rgb(255, 255, 255); line-height: 44px; cursor: pointer;
}
.sub:link {
background: rgb(6, 190, 4); border-radius: 4px;
}
.sub:visited {
background: rgb(6, 190, 4); border-radius: 4px;
}
.sub:hover {
background: rgb(6, 190, 4); border-radius: 4px;
}
.sub:active {
background: rgb(6, 190, 4); border-radius: 4px;
}
.tip-box {
background: rgba(0, 0, 0, 0.4); border-radius: 4px; left: 50%; top: 45%; width: 180px; height: 44px; text-align: center; color: rgb(255, 255, 255); line-height: 44px; font-size: 14px; margin-left: -90px; display: none; position: fixed;
}
主要的想法是:
一、
iphone上9位数字变成可打电话的电话号码》》》修改方法:
<META name="format-detection" content="telephone=no,email=no,adress=no"><!--拨打电话邮箱和地址禁止-->
二、页面点击可放大禁用:
<META name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
三、css3横屏与竖屏:
/*横竖屏判断*/
@media all and (orientation : landscape) { /*竖着*/
/*body {
background-color: #ff0000;
} */
}
@media all and (orientation : portrait){ /*横着*/
/* body {
background-color: #00ff00;
}
*/
}
四、css3media属性判断屏幕的大小修改图片的大小
@media screen and (max-width:992px) and (min-width:769px)
{
.img-box {
width: 200px; height: 200px;
}
}
@media screen and (max-width:768px) and (min-width:641px)
{
.img-box {
width: 180px; height: 180px;
}
}
@media screen and (max-width:640px) and (min-width:577px)
{
.img-box {
width: 160px; height: 160px;
}
}
@media screen and (max-width:576px) and (min-width:481px)
{
.img-box {
width: 140px; height: 140px;
}
}
@media screen and (max-width:480px) and (min-width:321px)
{
.img-box {
width: 120px; height: 120px;
}
}
@media screen and (max-width:320px) and (min-width:300px)
{
.img-box {
width: 100px; height: 100px;
}
}