HTML 移动响应没有 JavaScript 或 Ebay 表单
HTML mobile responsive no JavaScript or Forms for Ebay
好的，我一直在为我的一个朋友做一个小项目，他的 Ebay 帐户需要一个 HTML5 模板。 Ebay 正在引入新规则，这意味着您不能在描述中包含某些内容，例如 Javascript 和表格。出于某种原因，当我使用 http://www.i-ways.net/mobile-friendly/en-uk/ 检查它是移动响应时，它说它不是，它还告诉我我的代码中有 JavaScript，但我没有。有人可以建议更好的方法吗？
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ title }}</title>
<style>
body {
background-color: #f1f1f1;
}
.wrapper {
margin: 0 auto;
padding: 0 20px 20px 20px;
max-width: 1080px;
min-width: 200px;
background-color: #ffffff;
height: 100%;
}
.header {
width: 100%;
height: 100px;
}
.header-right {
float: right;
height: 15px;
padding: 24px 40px 20px 5px;
margin-bottom: 30px;
}
.logo {
float: left;
display: block;
max-width: 100%;
max-height: 100%;
border: 0;
}
.call-us {
padding-right: 20px;
max-width: 100%;
}
.cartImg {
max-width: 40px;
max-height: 40px;
}
/*MEDIA QUERY at 676 to 808px*/
@media (min-width: 676px) and (max-width: 808px) {
.logo {
float: left;
display: block;
max-width: 100%;
margin-left: 25%;
border: 0;
}
}
@media (min-width: 676px) and (max-width: 808px) {
.call-us {
float: left;
display: block;
margin-right: 25%;
max-width: 100%;
}
}
@media (min-width: 676px) and (max-width: 808px) {
.cartImg {
float: left;
margin-left: 25%;
margin-top: 10px;
}
}
/*MEDIA QUERY at 330 to 456px*/
@media (min-width: 330px) and (max-width: 456px) {
.call-us {
float: left;
display: block;
margin-left: 45px;
max-width: 100%;
}
}
@media (min-width: 330px) and (max-width: 456px) {
.cartImg {
float: left;
margin-left: 50%;
margin-top: 10px;
}
}
/*MEDIA QUERY at 279 to 330px*/
@media (min-width: 279px) and (max-width: 330px) {
.call-us {
float: left;
display: block;
margin-left: 20px;
max-width: 100%;
}
}
@media (min-width: 279px) and (max-width: 330px) {
.cartImg {
float: left;
margin-left: 50%;
margin-top: 10px;
}
}
.main {
width: 100%;
font-family: Segoe UI, Arial;
}
p {
font-family: Segoe UI, Arial;
font-size: 16px;
}
h1 {
text-transform: uppercase;
font-family: Segoe UI, Arial;
font-weight: bold;
letter-spacing: -0.5px;
clear: both;
text-align: center;
}
.styleBottomRed {
height: 40px;
line-height: 40px;
padding: 0 10px;
color: #FFFFFF;
text-transform: uppercase;
font-family: Segoe UI, Arial;
font-weight: bold;
letter-spacing: -0.5px;
background-color: #204393;
border-left: 2px solid white;
text-align: center;
}
.tab_content_main {
padding: 0 15px;
background-color: #F1F1F1;
}
.prod-img {
max-width: 100%;
max-height: 100%;
}
hr {
display: block;
position: relative;
padding: 0;
margin: 8px auto;
height: 0;
width: 100%;
line-height: 0;
clear: both;
border: none;
}
.bottomTabs {
font-size: 20px;
font-family: Segoe UI, Arial;
font-weight: bold;
height: 40px;
max-height: 50px;
text-align: center;
color: white;
background-color: #204393;
}
#iconImg {
float: right;
max-width: 40px;
max-height: 40px;
}
.bottomTabsUL, ul, li {
list-style-type: square;
font-size: 16px;
}
/*MEDIA QUERY at 866 to 2000px hide different content and show other*/
@media screen and (min-width: 866px) and (max-width: 2000px) {
.bottomTabs { display: none; } /* hide it elsewhere */
}
@media screen and (min-width: 866px) and (max-width: 2000px) {
.bottomTabsUL, { display: none; } /* hide it elsewhere */
}
@media screen and (min-width: 866px) and (max-width: 2000px) {
.tdMobile { display: none; } /* hide it elsewhere */
}
@media screen and (min-width: 0px) and (max-width: 866px) {
section { display: none; } /* hide it elsewhere */
}
/*TAB CSS*/
* {
box-sizing: border-box;
}
section {
position: relative;
width: 100%;
margin: 0 auto;
z-index: 0;
color: white;
}
section:after {
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.';
position: absolute;
left: 0;
top: 45px;
font-size: 16px;
text-align: left;
background-color: #F1F1F1;
padding: 8px 20px 20px 20px;
max-width: 100%;
min-width: 200px;
min-height: 125px;
color: black;
}
button {
cursor: pointer;
width: 199px;
display: inline-block;
background-color: #204393;
color: white;
text-align: center;
transition: .25s ease;
border: none;
padding: 10px;
font-size: 18px;
margin-bottom: 145px;
}
.divTab:focus button, button:focus {
background-color: #EE2725;
outline: none;
font-size: 18px;
}
.tabP {
display: none;
font-size: 16px;
padding: 20px 20px 20px 20px;
}
button:focus + .tabP, .divTab:focus P {
display: block;
position: absolute;
background-color: #F1F1F1;
width: 100%;
min-width: 200px;
min-height: 150px;
left: 0;
color: black;
z-index: 2;
outline: none;
top: 29px;
text-align: left;
padding-top: 8px;
}
.divTab {
display: inline-block;
}
.divTab:focus {
outline: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<a href="http://stores.ebay.co.uk/" target="_blank"><img class="logo" title="shopname" src="https://EXAMPLE.gif"/></a>
<div class="header-right">
<a href="tel:0800000000"><img class="call-us" alt="Call Us" title="Call Us" src="https://EXAMPLE.gif"/></a>
<a href="http://stores.ebay.co.uk/" target="_blank"><img class="cartImg" alt="Cart Image" title="CartImg" src="https://EXAMPLE.png" /></a>
</div>
</div>
<hr>
<div class="main">
<hr>
<h1>{{ title }}</h1>
<hr>
<center><img class="prod-img" src="{{ images[0].url }}" width="500px" /></center>
<hr>
<p>{{ description }}</p>
<br>
<!--Footer tabs for selecting payment, delivery, returns and warranty.-->
<section>
<div class="divTab">
<button>Payment</button>
<p class="tabP">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</div>
<div class="divTab">
<button>Delivery</button>
<p class="tabP">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</div>
<div class="divTab">
<button>Returns</button>
<p class="tabP">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</div>
<div class="divTab">
<button>Warranty</button>
<p class="tabP">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</div>
</section>
<!--Footer tabs for Mobile application compatibility. selecting payment, delivery, returns and warranty.-->
<table style="width:100%; text-align:center;">
<tr>
<td class="bottomTabs">Payment</td>
</tr>
<tr>
<td class="tdMobile" style="text-align: left;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</td>
</tr>
<tr>
<td class="bottomTabs">Delivery</td>
</tr>
<tr>
<td class="tdMobile" style="text-align: left;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
<ul class="bottomTabsUL">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</li>
</ul>
</td>
</tr>
<tr>
<td class="bottomTabs">Returns</td>
</tr>
<tr>
<td class="tdMobile" style="text-align: left;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</tr>
<tr>
<td class="bottomTabs">Warranty</td>
</tr>
<tr>
<td class="tdMobile" style="text-align: left;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
这些双花括号会让我认为它是javascript..
从您的代码中删除/修改以下内容。
{{ title }}
{{ images[0].url }}
{{ description }}
好的，我一直在为我的一个朋友做一个小项目，他的 Ebay 帐户需要一个 HTML5 模板。 Ebay 正在引入新规则，这意味着您不能在描述中包含某些内容，例如 Javascript 和表格。出于某种原因，当我使用 http://www.i-ways.net/mobile-friendly/en-uk/ 检查它是移动响应时，它说它不是，它还告诉我我的代码中有 JavaScript，但我没有。有人可以建议更好的方法吗？
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ title }}</title>
<style>
body {
background-color: #f1f1f1;
}
.wrapper {
margin: 0 auto;
padding: 0 20px 20px 20px;
max-width: 1080px;
min-width: 200px;
background-color: #ffffff;
height: 100%;
}
.header {
width: 100%;
height: 100px;
}
.header-right {
float: right;
height: 15px;
padding: 24px 40px 20px 5px;
margin-bottom: 30px;
}
.logo {
float: left;
display: block;
max-width: 100%;
max-height: 100%;
border: 0;
}
.call-us {
padding-right: 20px;
max-width: 100%;
}
.cartImg {
max-width: 40px;
max-height: 40px;
}
/*MEDIA QUERY at 676 to 808px*/
@media (min-width: 676px) and (max-width: 808px) {
.logo {
float: left;
display: block;
max-width: 100%;
margin-left: 25%;
border: 0;
}
}
@media (min-width: 676px) and (max-width: 808px) {
.call-us {
float: left;
display: block;
margin-right: 25%;
max-width: 100%;
}
}
@media (min-width: 676px) and (max-width: 808px) {
.cartImg {
float: left;
margin-left: 25%;
margin-top: 10px;
}
}
/*MEDIA QUERY at 330 to 456px*/
@media (min-width: 330px) and (max-width: 456px) {
.call-us {
float: left;
display: block;
margin-left: 45px;
max-width: 100%;
}
}
@media (min-width: 330px) and (max-width: 456px) {
.cartImg {
float: left;
margin-left: 50%;
margin-top: 10px;
}
}
/*MEDIA QUERY at 279 to 330px*/
@media (min-width: 279px) and (max-width: 330px) {
.call-us {
float: left;
display: block;
margin-left: 20px;
max-width: 100%;
}
}
@media (min-width: 279px) and (max-width: 330px) {
.cartImg {
float: left;
margin-left: 50%;
margin-top: 10px;
}
}
.main {
width: 100%;
font-family: Segoe UI, Arial;
}
p {
font-family: Segoe UI, Arial;
font-size: 16px;
}
h1 {
text-transform: uppercase;
font-family: Segoe UI, Arial;
font-weight: bold;
letter-spacing: -0.5px;
clear: both;
text-align: center;
}
.styleBottomRed {
height: 40px;
line-height: 40px;
padding: 0 10px;
color: #FFFFFF;
text-transform: uppercase;
font-family: Segoe UI, Arial;
font-weight: bold;
letter-spacing: -0.5px;
background-color: #204393;
border-left: 2px solid white;
text-align: center;
}
.tab_content_main {
padding: 0 15px;
background-color: #F1F1F1;
}
.prod-img {
max-width: 100%;
max-height: 100%;
}
hr {
display: block;
position: relative;
padding: 0;
margin: 8px auto;
height: 0;
width: 100%;
line-height: 0;
clear: both;
border: none;
}
.bottomTabs {
font-size: 20px;
font-family: Segoe UI, Arial;
font-weight: bold;
height: 40px;
max-height: 50px;
text-align: center;
color: white;
background-color: #204393;
}
#iconImg {
float: right;
max-width: 40px;
max-height: 40px;
}
.bottomTabsUL, ul, li {
list-style-type: square;
font-size: 16px;
}
/*MEDIA QUERY at 866 to 2000px hide different content and show other*/
@media screen and (min-width: 866px) and (max-width: 2000px) {
.bottomTabs { display: none; } /* hide it elsewhere */
}
@media screen and (min-width: 866px) and (max-width: 2000px) {
.bottomTabsUL, { display: none; } /* hide it elsewhere */
}
@media screen and (min-width: 866px) and (max-width: 2000px) {
.tdMobile { display: none; } /* hide it elsewhere */
}
@media screen and (min-width: 0px) and (max-width: 866px) {
section { display: none; } /* hide it elsewhere */
}
/*TAB CSS*/
* {
box-sizing: border-box;
}
section {
position: relative;
width: 100%;
margin: 0 auto;
z-index: 0;
color: white;
}
section:after {
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.';
position: absolute;
left: 0;
top: 45px;
font-size: 16px;
text-align: left;
background-color: #F1F1F1;
padding: 8px 20px 20px 20px;
max-width: 100%;
min-width: 200px;
min-height: 125px;
color: black;
}
button {
cursor: pointer;
width: 199px;
display: inline-block;
background-color: #204393;
color: white;
text-align: center;
transition: .25s ease;
border: none;
padding: 10px;
font-size: 18px;
margin-bottom: 145px;
}
.divTab:focus button, button:focus {
background-color: #EE2725;
outline: none;
font-size: 18px;
}
.tabP {
display: none;
font-size: 16px;
padding: 20px 20px 20px 20px;
}
button:focus + .tabP, .divTab:focus P {
display: block;
position: absolute;
background-color: #F1F1F1;
width: 100%;
min-width: 200px;
min-height: 150px;
left: 0;
color: black;
z-index: 2;
outline: none;
top: 29px;
text-align: left;
padding-top: 8px;
}
.divTab {
display: inline-block;
}
.divTab:focus {
outline: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<a href="http://stores.ebay.co.uk/" target="_blank"><img class="logo" title="shopname" src="https://EXAMPLE.gif"/></a>
<div class="header-right">
<a href="tel:0800000000"><img class="call-us" alt="Call Us" title="Call Us" src="https://EXAMPLE.gif"/></a>
<a href="http://stores.ebay.co.uk/" target="_blank"><img class="cartImg" alt="Cart Image" title="CartImg" src="https://EXAMPLE.png" /></a>
</div>
</div>
<hr>
<div class="main">
<hr>
<h1>{{ title }}</h1>
<hr>
<center><img class="prod-img" src="{{ images[0].url }}" width="500px" /></center>
<hr>
<p>{{ description }}</p>
<br>
<!--Footer tabs for selecting payment, delivery, returns and warranty.-->
<section>
<div class="divTab">
<button>Payment</button>
<p class="tabP">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</div>
<div class="divTab">
<button>Delivery</button>
<p class="tabP">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</div>
<div class="divTab">
<button>Returns</button>
<p class="tabP">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</div>
<div class="divTab">
<button>Warranty</button>
<p class="tabP">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</div>
</section>
<!--Footer tabs for Mobile application compatibility. selecting payment, delivery, returns and warranty.-->
<table style="width:100%; text-align:center;">
<tr>
<td class="bottomTabs">Payment</td>
</tr>
<tr>
<td class="tdMobile" style="text-align: left;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</td>
</tr>
<tr>
<td class="bottomTabs">Delivery</td>
</tr>
<tr>
<td class="tdMobile" style="text-align: left;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
<ul class="bottomTabsUL">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</li>
</ul>
</td>
</tr>
<tr>
<td class="bottomTabs">Returns</td>
</tr>
<tr>
<td class="tdMobile" style="text-align: left;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</tr>
<tr>
<td class="bottomTabs">Warranty</td>
</tr>
<tr>
<td class="tdMobile" style="text-align: left;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
这些双花括号会让我认为它是javascript..
从您的代码中删除/修改以下内容。
{{ title }}
{{ images[0].url }}
{{ description }}