Tad 教材網 - 線上書籍

:::

9-4 themes/eElectronics/xotpl/slider.tpl

9-6 themes/photography/xotpl/footer.tpl next

\[1061\] XOOPS佈景設計
==================

```
<pre class="brush:xml;gutter:false;">

<div class="promo-area">
    <div class="zigzag-bottom"></div>
    <div class="container">
        <div class="row">
            <{foreach from=$mainlink item=link}>
                <div class="col-md-3 col-sm-6">
                    <div class="single-promo">
                        <i class="fa <{$link.icon}>"></i>
                        <p><a href="<{$xoops_url}><{$link.url}>" style="color: #fff;"><{$link.name}></a></p>
                    </div>
                </div>
            <{/foreach}>
        </div>
    </div>
</div>

<{foreach from=$xoBlocks.page_topcenter item=block}>
    <div class="<{cycle values='maincontent-area,promo-area'}>">
        <div class="zigzag-bottom"></div>
        <div class="container">
            <div class="row">

<div class="maincontent-area">
    <div class="zigzag-bottom"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="latest-product">
                    <h2 class="section-title">Latest Products</h2>
                    <div class="product-carousel">
                        <div class="single-product">
                            <div class="product-f-image">
                                <img src="<{xoImgUrl}>img/product-1.jpg" alt="">
                                <div class="product-hover">
                                    <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a>
                                    <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a>
                                </div>
                            </div>
                            
                            <h2><a href="single-product.html">Sony Smart TV - 2015</a></h2>
                            
                            <div class="product-carousel-price">
                                <ins>$700.00</ins> <del>$800.00</del>
                            </div> 
                        </div>
                        <div class="single-product">
                            <div class="product-f-image">
                                <img src="<{xoImgUrl}>img/product-2.jpg" alt="">
                                <div class="product-hover">
                                    <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a>
                                    <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a>
                                </div>
                            </div>
                            
                            <h2><a href="single-product.html">Apple new mac book 2015 March :P</a></h2>
                            <div class="product-carousel-price">
                                <ins>$899.00</ins> <del>$999.00</del>
                            </div> 
                        </div>
                        <div class="single-product">
                            <div class="product-f-image">
                                <img src="<{xoImgUrl}>img/product-3.jpg" alt="">
                                <div class="product-hover">
                                    <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a>
                                    <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a>
                                </div>
                            </div>
                            
                            <h2><a href="single-product.html">Apple new i phone 6</a></h2>

<div class="product-carousel-price">
                                <ins>$400.00</ins> <del>$425.00</del>
                            </div>                                 
                        </div>
                        <div class="single-product">
                            <div class="product-f-image">
                                <img src="<{xoImgUrl}>img/product-4.jpg" alt="">
                                <div class="product-hover">
                                    <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a>
                                    <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a>
                                </div>
                            </div>
                            
                            <h2><a href="single-product.html">Sony playstation microsoft</a></h2>

<div class="product-carousel-price">
                                <ins>$200.00</ins> <del>$225.00</del>
                            </div>                            
                        </div>
                        <div class="single-product">
                            <div class="product-f-image">
                                <img src="<{xoImgUrl}>img/product-5.jpg" alt="">
                                <div class="product-hover">
                                    <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a>
                                    <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a>
                                </div>
                            </div>
                            
                            <h2><a href="single-product.html">Sony Smart Air Condtion</a></h2>

<div class="product-carousel-price">
                                <ins>$1200.00</ins> <del>$1355.00</del>
                            </div>                                 
                        </div>
                        <div class="single-product">
                            <div class="product-f-image">
                                <img src="<{xoImgUrl}>img/product-6.jpg" alt="">
                                <div class="product-hover">
                                    <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a>
                                    <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a>
                                </div>
                            </div>
                            
                            <h2><a href="single-product.html">Samsung gallaxy note 4</a></h2>

<div class="product-carousel-price">
                                <ins>$400.00</ins>
                            </div>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 
```

:::