有一段时间没更新美化啦，没办法，最近开学事情比较多，呜呜！

今天给大家带来一个侧边栏引导小卡片，这个样式是在其它站点看到的，感觉还不错，就简单扒了一下，要是你喜欢就拿走吧！

载图预览

代码部署

<div class="flex items-center justify-start">
    <div data-v-15ac1b16="" class="ad flex-1" style="max-width: 320px; --rgb: 241,144,144; --default: #8f2a2a; --control-color: #932b2b; --bg: rgba(241,144,144,1); --bgTrans: rgba(241,144,144,0); --textShadow: -1px -1px rgba(255,255,255,.8),
    .1053em .1053em rgba(82,0,0,0.12),
    .1842em .1842em .1316em rgba(82,0,0,0.12); --image-shadow: 0 1em 1em rgba(82,0,0,0.3);">
        <div data-v-15ac1b16="" class="bg-wrapper">
            <div data-v-15ac1b16="" class="strip">
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
            </div>
            <div data-v-15ac1b16="" class="strip">
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
            </div>
            <div data-v-15ac1b16="" class="strip">
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
            </div>
            <div data-v-15ac1b16="" class="strip">
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
            </div>
            <div data-v-15ac1b16="" class="strip">
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
            </div>
            <div data-v-15ac1b16="" class="strip">
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
            </div>
            <div data-v-15ac1b16="" class="strip">
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
            </div>
            <div data-v-15ac1b16="" class="strip">
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
            </div>
        </div>
        <div data-v-15ac1b16="" class="wrapper">
            <div data-v-15ac1b16="" class="icon flex items-center"><img data-v-15ac1b16=""
                    src="https://www.wniui.com/image/icon.png" ></div>
            <div data-v-15ac1b16="" class="toolbar is-light">
                <div data-v-15ac1b16="" class="info">
                    <p data-v-15ac1b16="">专业建站</p>
                    <p data-v-15ac1b16=""><span data-v-15ac1b16="" class="tag font-slogan">广告</span>网站搭建、托管、优化等业务</p>
                </div>
                <div data-v-15ac1b16="" class="get-more">
                    <a href="https://www.wniui.com">查看</a>
                </div>
            </div>
        </div>
    </div>
</div>