如何解决HTML 滑块可在移动设备和选项卡上做出响应
- 我会尽一切努力使其具有响应性。我也尝试过引导程序和媒体查询，但没有弄清楚。我想在移动设备上显示完整的描述。我在 WordPres 上使用 Wp 面包店视觉作曲家作为原始 HTMl 元素。请建议我并指导我。谢谢* 如果还有什么问题，请告诉我
.cBox01{width:100%;height:804px;background:url("images/c01_bg.jpg") no-repeat top center;}
.cBox01 .titleBox{padding:40px 0 0;}
.cBox01 .titleBox p.title{text-align:center;font-size: 36px;line-height:36px;color:#f8e9c8;}
.cBox01 .titleBox p.pic{text-align:center;margin:0 0 20px;}
.cBox01 .rollBox{position:relative;width:auto;margin-top:40px;z-index:99;}
.cBox01 .rollBox #cpzsm01 ul li{margin-right:20px;background:#484b58;background:rgba(72,75,88,0.5)!important;filter:alpha(opacity=50);width:300px;height:400px;padding:10px;position:relative;}
.cBox01 ul li .pic,.cBox01 ul li .pic img{width:300px;height:225px;}
.cBox01 ul li .pic_on{position:absolute;top:10px;left:10px;width:300px;height:400px;}
.cBox01 ul li .pic_on img{width:300px;height:400px;opacity:0;filter:alpha(opacity=0);}
.cBox01 ul li:hover .pic_on img{opacity:1;filter:alpha(opacity=100);}
.cBox01 ul li dl{padding:0 15px;}
.cBox01 ul li dt{font-size: 16px;color:#f8e9c8;margin:22px 0 18px;}
.cBox01 ul li dd{font-size: 12px;color:#f8e9c8;line-height:30px;}
.cBox01 ul li dd i{display:inline-block;vertical-align:middle;background:url("images/icons.png") no-repeat -55px -52px;width:10px;height:10px;margin:0 17px 0 4px;}
.cBox01 .more{width:161px;height:39px;border:3px solid #f8e9c8;margin:50px auto 0;color:#f8e9c8;line-height:39px;text-align:center;}
.cBox01 .more:hover{background:#f8e9c8;color:#282b37;}
.cBox01 .more:hover i{color:#282b37;}
.cBox01 .more i{font-style:normal;margin-left:13px;font:bold 12px/normal simsun;color:#fff;}
.cBox01 .rollBox .btn{bottom:0px;left:47%;}
.cBox01 .rollBox .btn a{display:block;color:#fff;width:70px; height:70px;float:left;text-align:center;position:absolute;z-index:999;background:url("images/icons.png") no-repeat;}
.cBox01 .rollBox .btn .btn01{background-position:-241px -10px;top:130px;left:-160px;}
.cBox01 .rollBox .btn .btn02{background-position:-323px -10px;top:130px;right:-160px;}<div class="cBox01">
<div class="wrapper">
<div class="titleBox wow fadeInUp" data-wow-delay=".1s">
<p class="pic"><a href="#"><img src="http://localhost/theme/wp-content/uploads/2021/04/cbx01_title.png"></a></p>
<a href="products/"><p class="title uppercase">Product show</p></a>
</div>
<div class="rollBox wow fadeInUp" data-wow-delay=".2s">
<div class="btn" ><a id="prev" class="btn01"> </a><a id="next" class="btn02"> </a></div>
<div id="cpzsm01">
<ul>
<li>
<a href="#" target="_blank"><p class="pic"><img src="http://localhost/theme/wp-content/uploads/2021/05/1-3.jpg"></p>
<p class="pic_on"><img src="http://localhost/theme/wp-content/uploads/2021/05/0.jpg" alt="Vintage Bar Stool"></p>
<dl>
<dt>2017 Spitfire Vintage brown Leather and Aviator Bar Stool</dt>
<dd><i></i>Product Name: 2017 Spitfire Vintage brown Leather and Aviator Bar Stool</dd>
<dd><i></i>Model Code: DC-623A</dd>
<dd><i></i>Type: Stool</dd>
</dl></a>
</li><li>
<a href="#" target="_blank"><p class="pic"><img src="http://localhost/theme/wp-content/uploads/2021/05/1-4.jpg" alt="tufted Back Sofa"></p>
<p class="pic_on"><img src="http://localhost/theme/wp-content/uploads/2021/05/0-1.jpg" alt="Antique leather sofa"></p>
<dl>
<dt>Living Room tufted Back Antique Leather Sofa</dt>
<dd><i></i>Product Name: Living Room tufted Back Antique Leather Sofa</dd>
<dd><i></i>Model Code: D-5053</dd>
<dd><i></i>Type: 3S Sofa</dd>
</dl></a>
</li><li>
<a href="#" target="_blank"><p class="pic"><img src="http://localhost/theme/wp-content/uploads/2021/05/1-5.jpg" alt="Vintage Car Model Bar Accessory"></p>
<p class="pic_on"><img src="#" alt="Vintage Car Model Bar Accessory"></p>
<dl>
<dt>Vintage Car Model Bar Accessory</dt>
<dd><i></i>Product Name: Vintage Car Model Bar Accessory</dd>
<dd><i></i>Model Code: DW-J180</dd>
<dd><i></i>Type: Bar decoration</dd>
</dl></a>
</li><li>
<a href="#" target="_blank"><p class="pic"><img src="http://localhost/theme/wp-content/uploads/2021/05/1-6.jpg" alt="Original Ecological Solid Wood Leather Cushion Chair"></p>
<p class="pic_on"><img src="http://localhost/theme/wp-content/uploads/2021/05/0-2.jpg" alt="Original Ecological Solid Wood Leather Cushion Chair"></p>
<dl>
<dt>Original Ecological Solid Wood Leather Cushion Chair</dt>
<dd><i></i>Product name: Original Ecological Solid Wood Leather Cushion Chair</dd>
<dd><i></i>Model Code: DC638</dd>
<dd><i></i>Type: Chair</dd>
</dl></a>
</li><li>
<a href="#" target="_blank"><p class="pic"><img src="http://localhost/theme/wp-content/uploads/2021/05/1-7.jpg" alt="tufted Camel Back Vintage Leather Side Chair for Dining "></p>
<p class="pic_on"><img src="http://localhost/theme/wp-content/uploads/2021/05/0-3.jpg" alt="tufted Camel Back Vintage Leather Side Chair for Dining "></p>
<dl>
<dt>tufted Camel Back Vintage Leather Side Chair for Dining</dt>
<dd><i></i>Product Name: tufted Camel Back Vintage Leather Side Chair for Dining </dd>
<dd><i></i>Model Code: DCY-37</dd>
<dd><i></i>Type: Dinning Chair</dd>
</dl></a>
</li><li>
<a href="#" target="_blank"><p class="pic"><img src="http://localhost/theme/wp-content/uploads/2021/05/1-8.jpg" alt="Industrial Retro Office Leather Armchair"></p>
<p class="pic_on"><img src="http://localhost/theme/wp-content/uploads/2021/05/0-4.jpg" alt="Industrial Retro Office Leather Armchair"></p>
<dl>
<dt>Industrial Retro Office Leather Armchair</dt>
<dd><i></i>Product name: Industrial Retro Office Leather Armchair</dd>
<dd><i></i>Model Code: DCY-045</dd>
<dd><i></i>Type: Chair</dd>
</dl></a>
</li><li>
<a href="#" target="_blank"><p class="pic"><img src="http://localhost/theme/wp-content/uploads/2021/05/1-9.jpg" alt="Vintage Leather Aviator Office Desk"></p>
<p class="pic_on"><img src="http://localhost/theme/wp-content/uploads/2021/05/0-5.jpg" alt="Vintage Leather Aviator Office Desk"></p>
<dl>
<dt>Vintage Leather Aviator Office Desk</dt>
<dd><i></i>Product Name: Vintage Leather Aviator Office Desk</dd>
<dd><i></i>Model Code: DV-016</dd>
<dd><i></i>Type: Office Desk</dd>
</dl></a>
</li><li>
<a href="#" target="_blank"><p class="pic"><img src="http://localhost/theme/wp-content/uploads/2021/05/1-10.jpg" alt="Leather Living Room Sofa"></p>
<p class="pic_on"><img src="http://localhost/theme/wp-content/uploads/2021/05/0-6.jpg" alt="Living Room Sofa"></p>
<dl>
<dt>White Leather Living Room Sofa</dt>
<dd><i></i>Model Code: DVSC-071</dd>
<dd><i></i>Type: 1S Sofa</dd>
<dd><i></i>Size (cm): 1S:L96*W96*H75</dd>
</dl></a>
</li><li>
<a href="#" target="_blank"><p class="pic"><img src="http://localhost/theme/wp-content/uploads/2021/05/1-11.jpg" alt="Leather Comfy Armchair"></p>
<p class="pic_on"><img src="http://localhost/theme/wp-content/uploads/2021/05/0-7.jpg" alt="Comfy Armchair"></p>
<dl>
<dt>Black Leather Professor Comfy Armchair</dt>
<dd><i></i>Model Code: DVSC-070</dd>
<dd><i></i>Type: Armchair</dd>
<dd><i></i>Size (cm): L85*W103*H99</dd>
</dl></a>
</li> </ul>
</div>
</div>
<a href="/shop"><p class="more uppercase wow fadeInUp" data-wow-delay=".3s">View More<i> > </i></p></a>
</div>
</div>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
