您好,我的网站有问题。它在计算机上运行良好,但在移动设备上,我使用的价格表影响了它下面的图像。价格表在 ul 类中,当我查看下面的纵向图片然后切换到横向时,图像消失了。如果我取出所有价格表,图像将在手机上旋转并且不会消失。所以我知道 ul 类会影响图像,但我不知道如何修复它。
<ul class="pricing_table">
<li class="price_block">
<h3><h3>Mini Facial </h3></h3>
<div class="price">
<div class="price_figure">
<span class="price_number">£ 15</span>
<span class="price_tenure">30 minutes</span>
<span class="price_tenure">All Skin Types</span>
</div>
</div>
</li>
<li class="price_block">
<h3><h3>Facial</h3></h3>
<div class="price">
<div class="price_figure">
<span class="price_number">£ 24</span>
<span class="price_tenure">1 Hour</span>
<span class="price_tenure">All Skin Types</span>
</div>
</div>
</li>
<li class="price_block">
<h3><h3>Back Facial</h3></h3>
<div class="price">
<div class="price_figure">
<span class="price_number">£ 26</span>
<span class="price_tenure">30 minutes</span>
<span class="price_tenure">All Skin Types</span>
</div>
</div>
</li>
</ul>
<a name="barbering"></a>
<section class="photo5" data-stellar-background-ratio="0.5">
</section>
CSS
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
* {
margin: 0;
padding: 0px;
}
body {
font-family: Ubuntu, arial, verdana;
}
.pricing_table {
line-height: 150%;
font-size: 12px;
margin: 1px auto;
width: 75%;
max-width: 800px;
padding-top: 10px;
margin-top: 50px;
}
.price_block {
width: 100%;
color: #8bbab4;
float: left;
list-style-type: none;
transition: all 0.25s;
position: relative;
box-sizing: border-box;
margin-bottom: 10px;
border-bottom: 1px solid transparent;
}
.pricing_table h3 {
text-transform: uppercase;
padding: 5px 0;
background: #FFFFFF;
margin: -10px 0 1px 0;
}
.price {
display: table;
background: #FFFFFF;
width: 100%;
height: 70px;
}
.price_figure {
font-size: 24px;
text-transform: uppercase;
vertical-align: middle;
display: table-cell;
}
.price_number {
font-weight: bold;
display: block;
}
.price_tenure {
font-size: 11px;
}
.features {
background: #8bbab4;
color: #8bbab4;
}
.features li {
padding: 8px 15px;
border-bottom: 1px solid #8bbab4;
font-size: 11px;
list-style-type: none;
}
.footer {
padding: 15px;
background: #8bbab4;
}
.action_button {
text-decoration: none;
color: #8bbab4;
font-weight: bold;
border-radius: 5px;
background: linear-gradient(#8bbab4, #8bbab4);
padding: 5px 20px;
font-size: 11px;
text-transform: uppercase;
}
.price_block:hover {
box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5);
transform: scale(1.04) translateY(-5px);
z-index: 1;
border-bottom: 0 none;
}
.price_block:hover .price {
background:linear-gradient(#8bbab4, #8bbab4);
box-shadow: inset 0 0 45px 1px #FFFFFF;
}
.price_block:hover h3 {
background: #222;
}
.price_block:hover .action_button {
background: linear-gradient(#8bbab4, #8bbab4);
}
@media only screen and (min-width : 480px) and (max-width : 768px) {
.price_block {width: 50%;}
.price_block:nth-child(odd) {border-right: 1px solid transparent;}
.price_block:nth-child(3) {clear: both;}
.price_block:nth-child(odd):hover {border: 0 none;}
}
@media only screen and (min-width : 768px){
.price_block {width: 25%;}
.price_block {border-right: 1px solid transparent; border-bottom: 0 none;}
.price_block:last-child {border-right: 0 none;}
.price_block:hover {border: 0 none;}
}
.photo5{
background: url(barbering.jpg);
background-size: cover;
width: 100%;
height: 550px;
top: 48px;
overflow: auto;
background-repeat: no-repeat;
}
最佳答案
这不是 ul 的错,这是视差插件。当您向下滚动纵向 View 时,它会使用 javascript 将背景位置更改为某个值。然后,您将设备旋转到横向,即使从页面顶部到带有图片的容器的距离发生变化,插件设置的值仍然相同。
关于html - 移动网页设计 HTML ul 在旋转设备时影响其下方的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32038952/