HTML+JQ+CSS 图片展示：3张横排，6排竖排，首页文字介绍产品
<!DOCTYPE html>
<html>
<head>
<title>图片展示</title>
<meta charset='utf-8'>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
<pre><code> .container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
.col {
flex: 1;
padding: 0 10px;
margin-bottom: 20px;
}
.col img {
width: 100%;
height: auto;
display: block;
border-radius: 5px;
}
.product-info {
display: flex;
align-items: center;
margin-top: 50px;
}
.product-info img {
width: 30%;
height: auto;
margin-right: 50px;
border-radius: 5px;
}
.product-info p {
font-size: 18px;
line-height: 1.5;
color: #333;
}
</style>
<script src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
<script>
$(document).ready(function() {
// 图片hover效果
$('.col img').hover(function() {
$(this).css('opacity', '0.8');
}, function() {
$(this).css('opacity', '1');
});
});
</script>
</code></pre>
</head>
<body>
<div class='container'>
<h1>图片展示</h1>
<div class='row'>
<div class='col'>
<img src='https://via.placeholder.com/350x250' alt=''>
</div>
<div class='col'>
<img src='https://via.placeholder.com/350x250' alt=''>
</div>
<div class='col'>
<img src='https://via.placeholder.com/350x250' alt=''>
</div>
<div class='col'>
<img src='https://via.placeholder.com/350x250' alt=''>
</div>
<div class='col'>
<img src='https://via.placeholder.com/350x250' alt=''>
</div>
<div class='col'>
<img src='https://via.placeholder.com/350x250' alt=''>
</div>
</div>
<div class='product-info'>
<img src='https://via.placeholder.com/250x250' alt=''>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, massa ut ultricies euismod, turpis nulla mattis metus, ac posuere enim nunc vel urna. Nulla facilisi. Sed ut massa nec erat faucibus facilisis. Donec euismod augue vitae enim vulputate, eget aliquam arcu bibendum. Nam commodo, mi vel bibendum bibendum, erat quam luctus enim, vel ullamcorper purus felis vitae urna. Morbi sed tincidunt nulla. Integer id magna ac est commodo luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin venenatis arcu ut ante bibendum, vel sollicitudin turpis scelerisque. Sed lobortis, mauris vel volutpat hendrerit, elit elit rutrum lacus, id tincidunt erat ipsum quis sem. Sed efficitur, enim quis sagittis iaculis, justo nunc bibendum tortor, vel bibendum metus enim et sapien. Suspendisse potenti. Etiam malesuada, mi eget vulputate cursus, ipsum dui sagittis metus, vel elementum justo elit vel lacus.</p>
</div>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/jqiY 著作权归作者所有。请勿转载和采集!