-2
好吧，所以我一直在爲我的一個朋友的小項目工作，他需要一個HTML5模板爲他的易趣帳戶。 Ebay正在推出新的規則，這意味着你不能在描述中包含諸如Javascript和Forms等特定內容。由於某種原因，當我使用http://www.i-ways.net/mobile-friendly/en-uk/來檢查它是否爲移動響應時，它說不是，它也告訴我我的代碼中有JavaScript，這是我沒有的。任何人都可以提出更好的方法？HTML手機響應沒有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>
爲什麼我得到一個downvote？答案被認爲是正確的 – johnashu