作者 主題: 13、RWD響應式網頁設計-index 首頁的右側邊欄  (閱讀 526 次)

0 會員 與 1 訪客 正在閱讀本文。

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
13、RWD響應式網頁設計-index 首頁的右側邊欄
« 於: 七月 22, 2019, 03:09:53 下午 »
ECSHOP 首頁剩下的區塊都放在側邊欄了,你應該只放需要用到的區塊以減低伺服器負擔,因為與主區域的布局不太一樣,因此另外使用側邊欄共用的css樣式設定,共用的樣式設定也是放在 style.css 裡方便引用,建議不要設置可編輯區域(除非是公用模板),否則能造成自己困擾,如需調整區塊順序可以直接移動代碼,側邊欄在中大螢幕時佔用3格寬度,小螢幕則佔全寬並移到主區域下方,因此需留意不同的寬度變化:
代碼: [選擇]
<div class="col-md-3" id="indexRight">
  <!-- #BeginLibraryItem "/library/recommend_promotion.lbi" --><!-- #EndLibraryItem -->
  <!-- #BeginLibraryItem "/library/promotion_info.lbi" --><!-- #EndLibraryItem -->
  <!-- #BeginLibraryItem "/library/top10.lbi" --><!-- #EndLibraryItem -->
  <!-- #BeginLibraryItem "/library/invoice_query.lbi" --><!-- #EndLibraryItem -->
  <!-- #BeginLibraryItem "/library/order_query.lbi" --><!-- #EndLibraryItem -->
  <!-- #BeginLibraryItem "/library/shop_notice.lbi" --><!-- #EndLibraryItem -->
  <!-- #BeginLibraryItem "/library/new_articles.lbi" --><!-- #EndLibraryItem -->
  <!-- #BeginLibraryItem "/library/brands.lbi" --><!-- #EndLibraryItem -->
  <!-- #BeginLibraryItem "/library/email_list.lbi" --><!-- #EndLibraryItem -->
</div>

這個側邊欄也有共通點,和主區域也非常接近,不過為了有所區分和往後可能用到,在指定樣式的過程中有些區塊的樣式是需要獨立設定的,例如:銷售排行:
代碼: [選擇]
/* 右側邊欄 */
#indexRight {}
.small-block {padding: 8px;border-radius: 6px;margin-bottom: 15px;box-shadow: 0px 1px 5px 5px rgba(0, 0, 0, 0.1);}
.small-block .title {background: #3b270f;color:#fff;font-size: 1.3em;font-weight: bold;line-height: 32px;font-family:  "微軟正黑體", Verdana, Arial,sans-serif;padding: 0 15px;border-radius: 6px 6px 0 0;}
.small-block .title a {color:#fff;font-size: 1.1em;}
.small-block .title a:hover {color:orange;}
.small-block .title > .tip {margin-left:15px;font-size: 0.9em;color:orange;font-weight: bold; font-family:"Monotype Corsiva","sans-serif";}
.small-block .title > .more a {font-size: 0.5em;color:yellow;font-weight: bold;margin-top: 6px;}
.small-block .content {margin-bottom: 10px;}
.small-block .box {padding-bottom: 5px;overflow: hidden;position: relative;margin-top: 8px;}
.small-block .img {text-align: center;}
.small-block img {max-width: 100%;border: none;transition: All 0.5s ease-in-out;-webkit-transition: All 0.5s ease-in-out;-moz-transition: All 0.5s ease-in-out;-o-transition: All 0.5s ease-in-out;}
.small-block img:hover {opacity:0.5;}
.small-block .name, .block .name a {text-decoration: none;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center;}
.small-block .price {font-weight: bold;text-align: center;}
/* top10 */
.top10 img {width: 60px;height: 60px;margin-right: 8px;}
.top10 .red, .to10 .black {width: 20px;height: 20px;line-height:20px;color:#fff;border-radius:50%;text-align:center;overflow:hidden;margin-right: 8px;}
.top10 .red {background: #c00;}
.top10 .black {background: #363636;}
.top10 .namen {height: 40px;overflow: hidden;}
.top10 .price {font-weight: bold;}



底下是銷售排行(top10.lbi)的代碼,類似這樣的共用樣式可以減輕日後維護的負擔
有幾個地方要留意一下:
1、能夠使用色塊或文字代替的地方就不要使用圖片
2、所有css和html代碼都是小寫
3、屬性與屬性之間必須留有空格
4、隨時存檔並預覽結果是否如預期
代碼: [選擇]
<!-- {if $top_goods} -->
<!-- 銷售排行 -->
<div class="col-xs-6 col-sm-4 col-md-12 small-block">
  <div class="title">{$lang.top10}</div>
  <div class="row content top10">
    <!-- {foreach name=top_goods from=$top_goods item=goods}-->
    <div class="col-md-12">
      <div class="box">
        <!-- {if $smarty.foreach.top_goods.iteration > 1} -->
        <div class="line"></div>
        <!-- {/if} -->
        <div class="img pull-left">
          <a href="{$goods.url}"><img src="{$goods.thumb}" alt="{$goods.name|escape:html}" /></a>
        </div>
        <div class="namen">
          <!-- {if $smarty.foreach.top_goods.iteration<4}-->
          <div class="red pull-left">
            {$smarty.foreach.top_goods.iteration}
          </div>
          <!-- {else} -->
          <div class="black pull-left">
            {$smarty.foreach.top_goods.iteration}
          </div>
          <!-- {/if} -->
          <a href="{$goods.url}" title="{$goods.name|escape:html}">{$goods.short_name}</a>
        </div>
        <div class="text-danger">
          {$goods.price}
        </div>
      </div>
    </div>
    <!--{/foreach}-->
  </div>
</div>
<!--{/if}-->

LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php