数字化方法论培训-首页

12011

。。。。构建中。。。。

四宫格示例

九宫格示例

图片滑块示例

。。。。构建中。。。。
# 四宫格示例

<style>
    .grid-container-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .grid-item {
        position: relative;
        width: 100%;
        padding-bottom: 100%; /* 1:1 Aspect Ratio */
        border: 1px solid #ccc;
        overflow: hidden;
    }
    .grid-item img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures the image covers the container */
    }
</style>

<div class="grid-container-2">
    <div class="grid-item"><img src="https://via.placeholder.com/150" alt="Image 1"></div>
    <div class="grid-item"><img src="https://via.placeholder.com/150" alt="Image 2"></div>
    <div class="grid-item"><img src="https://via.placeholder.com/150" alt="Image 3"></div>
    <div class="grid-item"><img src="https://via.placeholder.com/150" alt="Image 4"></div>
</div>

# 九宫格示例

<style>
    .grid-container-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }
    .grid-item {
        position: relative;
        width: 100%;
        padding-bottom: 100%; /* 1:1 Aspect Ratio */
        border: 1px solid #ccc;
        overflow: hidden;
    }
    .grid-item img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures the image covers the container */
    }
</style>

<div class="grid-container-3">
    <div class="grid-item"><img src="https://via.placeholder.com/150" alt="Image 1"></div>
    <div class="grid-item"><img src="https://via.placeholder.com/150" alt="Image 2"></div>
    <div class="grid-item"><img src="https://via.placeholder.com/150" alt="Image 3"></div>
    <div class="grid-item"><img src="https://via.placeholder.com/150" alt="Image 4"></div>
    <div class="grid-item"><img src="https://via.placeholder.com/150" alt="Image 5"></div>
    <div class="grid-item"><img src="https://via.placeholder.com/150" alt="Image 6"></div>
    <div class="grid-item"><img src="https://via.placeholder.com/150" alt="Image 7"></div>
    <div class="grid-item"><img src="https://via.placeholder.com/150" alt="Image 8"></div>
    <div class="grid-item"><img src="https://via.placeholder.com/150" alt="Image 9"></div>
</div>

# 图片滑块示例

<style>
.slider-container {
    width: 100%;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    display: flex;
    margin: 20px auto;
    border: 2px solid #ccc;
    border-radius: 10px;
}

.slider {
    display: flex;
    width: 100%;
}

.slider img {
    width: 100%;
    flex: 0 0 100%;
    scroll-snap-align: center;
    border-right: 2px solid #ccc;
}

.slider img:last-child {
    border-right: none;
}
</style>

<div class="slider-container">
    <div class="slider">
        <img src="https://via.placeholder.com/800x400" alt="Image 1">
        <img src="https://via.placeholder.com/800x400" alt="Image 2">
        <img src="https://via.placeholder.com/800x400" alt="Image 3">
    </div>
</div>