0
Я изучаю код, просто будучи брошенным в разные проекты, и я застрял на своей странице. Я работаю над тем, чтобы эта страница реагировала на несколько дней, и я не могу заставить ее работать. Это мои образы, которые не реагируют? Или это контейнеры, в которых они находятся? Я не могу понять.Почему моя страница не реагирует на 100%?
window.onload=function(){
$("div[id^=Template]").click(function() {
var id = $(this).attr('id');
\t var theContent = $('#contents').find('.' + id);
$('#contents').children().hide();
\t theContent.show();
\t $('body').animate({ scrollTop: $('#contents').offset().top }, 'fast');
});
}.cell1 {
text-align: center;
width: 400px;
}
.cell2 {
padding: 10px 20px 10px 20px;
text-align: center;
width: 100%;
}
.Column {
vertical-align: top;
width: 500px;
display: inline-block;
}
.img1 {
\t padding: 20px 0 2px 0;
}
.img2 {
\t padding: 20px 0 0 0;
\t }
.img3 {
\t padding: 20px 0 46px 0;
\t }
#Template1,
#Template2,
#Template3 {
margin-top: 14px;
background-color: #cb3778;
font-family: Arial;
font-size: 20px;
width: 260px;
float: center;
color: #FFF;
cursor: pointer;
}
.Template0 {
display: block;
clear: both;
width: 100%;
}
.Template1,
.Template2,
.Template3 {
display: none;
clear: both;
width: 100%;
}
@media only screen and (max-width: 480px) {
.mobile {
display: block !important;
margin-top: 14px !important;
margin-bottom: 14px !important;
margin-left: 0px !important;
padding: 10px 0 10px 0 !important;
}
.mobile-img {
display: block !important;
Width: 100% !important;
align: center !important;
\t padding: 0px 0px 0px 0px !important;
}
.mobile-column {
display: block !important;
Width: 100% !important;
align: center !important;
}
.mobile-cell1 {
display: block !important;
width: 100% !important;
}
.mobile-cell2 {
display: block !important;
width: 100% !important;
}<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div align="center">
<div align="center" style="font-size:25px; font-family:Arial, Helvetica, sans-serif; color:#000000; line-height:24px; padding-top:15px; padding-bottom:25px;">Mailing Templates</div>
<div class="Column mobile-column">
<div class="cell1 mobile-cell1"><img width="400" border="0" height="356" spname="col1-2.jpg" name="col1-2.jpg" contentid="12195208" xt="SPIMAGE" alt="Template 1" class="img1 mobile-img" id="IMCvendors-Keena22.jpg" title="Template 1" src="http://contentz.mkt51.net/lp/10613/575195/col1-2.jpg" /></div>
<div id="Template1" class="cell2 mobile">Template 1</div>
</div>
<div class="Column mobile-column">
<div class="cell1 mobile-cell1"><img width="400" border="0" height="358" spname="6pack-1.jpg" name="6pack-1.jpg" contentid="12192292" xt="SPIMAGE" alt="Template 2" class="img2 mobile-img" id="IMCvendors-Keena22.jpg" title="Template 1" src="http://contentz.mkt51.net/lp/10613/575195/6pack-1.jpg" /></div>
<div id="Template2" class="cell2 mobile">Template 2</div>
</div>
<div class="Column mobile-column">
<div class="cell1 mobile-cell1"><img width="400" border="0" height="312" spname="hero-1col.jpg" name="hero-1col.jpg" contentid="12195206" xt="SPIMAGE" alt="Template 3" class="img3 mobile-img" id="IMCvendors-Keena22.jpg" title="Template 3" src="http://contentz.mkt51.net/lp/10613/575195/hero-1col.jpg" /></div>
<div id="Template3" class="cell2 mobile">Template 3</div>
</div>
</div>
<div align="center" id="contents">
<div align="center" id="content0" class="Template0" style="padding-top:50px; padding-bottom:50px;"><img width="400" border="0" height="161.29" spname="choose-a-template4_0.jpg" name="choose-a-template4_0.jpg" contentid="12205657" xt="SPIMAGE" alt="Choose a template" class="mobile-img" id="IMCvendors-Keena22.jpg" title="Choose a template" src="http://contentz.mkt51.net/lp/10613/575195/choose-a-template4_0.jpg" /></div>
<div align="center" id="content1" class="Template1" style="padding-top:50px; padding-bottom:50px;">sample demo txt T1</div>
<div align="center" id="content2" class="Template2" style="padding-top:50px; padding-bottom:50px;">sample demo txt T2</div>
<div align="center" id="content3" class="Template3" style="padding-top:50px; padding-bottom:50px;">sample demo txt T3</div>
</div>
</body>
При создании Адаптивный веб-страницы, которые вы должны избегать использования мер в рх, но вы должны использовать процент или их. Таким образом, все ваши элементы будут более отзывчивыми (или, по крайней мере, это то, чему я научился при создании сайтов) – silviagreen