-2
だから私は彼のEbayアカウント用のHTML5テンプレートが必要な私の友人のための小さなプロジェクトに取り組んできました。 Ebayは新しいルールを導入しています。つまり、JavascriptやFormsなどの特定のコンテンツを記述することはできません。何らかの理由で私がhttp://www.i-ways.net/mobile-friendly/en-uk/を使用してモバイルレスポンスであることを確認すると、そのコードは表示されず、自分のコードにJavaScriptが含まれていることがわかります。誰もより良いアプローチを提案することはできますか？これらの二重の中括弧はiwaysが、それはjavascriptのだと思うようになりますHTMLモバイルレスポンスいいえJavaScriptやForms for Ebay
<!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>
なぜダウンボートを取得しましたか？答えは正しいと受け入れられました – johnashu