后端开发教程 - Java、Spring Boot 实战 - msg200.com
🔥🔥😮 完全响应式的现代产品页面。仅需 CSS
演示
视频教程 -
让我们开始编码
大家好，很高兴看到这里。我是 kunaal，今天我们将学习如何制作一个精美的、完全响应式、现代风格的产品列表页面。您可以在下面观看演示。
演示
桌面视图请看 0.5 倍比例的演示
视频教程 -
为了更好地解释。您可以观看视频教程。
如果您喜欢该视频教程，请考虑订阅我的 YouTube 频道。
让我们开始编码
在 HTML 文件内的<body>标签下写入
<div class="product">
<div class="product-img">
<img src="img/bag.png" alt="">
<span class="tag">new</span>
</div>
<div class="product-listing">
<div class="content">
<h1 class="name">leather bag</h1>
<p class="info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque laborum optio natus quibusdam ea nam odit vitae id unde officia.</p>
<p class="price">$ 299</p>
<div class="btn-and-rating-box">
<div class="rating">
<img src="img/star.png" alt="">
<img src="img/star.png" alt="">
<img src="img/star.png" alt="">
<img src="img/star.png" alt="">
<img src="img/star stroke.png" alt="">
</div>
<button class="btn">buy now</button>
</div>
</div>
</div>
</div>
和 CSS
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@600&family=Roboto:wght@300;400;500;700;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
min-height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: #966e4f;
font-family: 'roboto', sans-serif;
}
body::before{
content: '';
position: absolute;
left: 0%;
transform: translateX(-50%) skewX(-15deg);
width: 20px;
height: 100%;
background: #966e4f;
border-left: 60px solid #eae3d2;
border-right: 30px solid #eae3d2;
opacity: 0;
animation: slide-in 2s 1.5s forwards 1;
}
@keyframes slide-in{
100%{
opacity: 1;
left: 50%;
}
}
.product{
position: relative;
width: 1000px;
min-width: 350px;
min-height: 500px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
.product-img{
width: 40%;
height: 500px;
background: #fff;
position: relative;
opacity: 0;
transform: translateY(-50px);
animation: fade-in 1s forwards 1;
}
.product-img img{
width: 100%;
height: 100%;
object-fit: contain;
user-select: none;
}
.tag{
position: absolute;
top: 20px;
left: -10px;
transform-origin: left;
opacity: 0;
transform: rotate(-90deg);
text-transform: capitalize;
color: #eae3d2;
padding: 5px 10px;
width: 100px;
font-size: 18px;
text-align: center;
background: #292929;
user-select: none;
animation: tag .5s 1s forwards 1;
}
@keyframes tag{
100%{
opacity: 1;
transform: rotate(-20deg);
}
}
.product-listing{
width: 60%;
min-height: 500px;
height: auto;
background: #292929;
padding: 40px;
display: flex;
justify-content: center;
color: #eae3d2;
opacity: 0;
transform: translateY(50px);
animation: fade-in 1s forwards 1;
}
@keyframes fade-in{
100%{
opacity: 1;
transform: translateY(0);
}
}
.name{
font-family: 'dosis';
font-size: 70px;
text-transform: capitalize;
}
.info{
font-size: 18px;
line-height: 30px;
margin: 50px 0;
}
.price{
font-size: 70px;
font-weight: 100;
margin-bottom: 20px;
}
.btn-and-rating-box{
width: 100%;
display: flex;
justify-content: space-between;
}
.rating{
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
}
.rating img{
width: 20px;
height: 20px;
margin: 0 2px;
}
.btn{
background: #eae3d2;
color: #292929;
border: none;
text-transform: capitalize;
font-size: 16px;
padding: 10px 20px;
cursor: pointer;
}
.btn:hover{
background-color: #eedbaf;
}
@media (max-width: 1100px){
body::before{
transform: translateX(-50%) skewX(-5deg);
}
.product{
flex-direction: column;
width: 90%;
margin: 5vh 0;
}
.product-img{
width: 100%;
height: 300px;
}
.product-listing{
width: 100%;
min-height: auto;
}
.name,.price{
font-size: 50px;
}
.info{
font-size: 16px;
}
}
希望你理解了所有内容。如果你有任何疑问，或者发现我犯了任何错误，或者有任何建议，欢迎在评论区留言。
文章来源：https://dev.to/themodernweb/awesome-filled-responsive-modern-product-listing-only-css-em如果你对编程感兴趣，想知道我这个15岁的少年是如何编程的，那就来设计这些吧。你可以在我的Instagram上关注我。我还计划在Instagram上发布我的游戏开发经验。