品優購

首頁

Classname命名規範

Classname命名規範，類名儘可能簡短，首字母必需要小寫，且單詞之間用'_'表示

項目文件夾

• 項目文件夾 ：pinyougou
• 樣式圖片類文件夾：img
• 產品類圖片文件夾 upload
• 字體文件夾 fonts
• 樣式文件夾 CSS
• js文件夾 js

樣式文件的分類

初始化及原子類文件 base.css
    公共樣式文件：commen.css

favicon圖標

如何查看網站的favicon圖標嗎

只須要在當前網站裏輸入/favicon.ico便可

網站優化三大標籤

• SEO:簡稱搜索引擎
• 常見的搜索引擎：谷歌 雅虎 百度 搜狗
• 網站優化的三大標籤：title Description keywords

title:網站標題

Description:網站內容

keywords：網站關鍵字

字體圖標

字體圖標的優勢

跟圖片同樣能夠改變透明度，旋轉，而且支持全部的瀏覽器

字體圖標的使用流程

下載兼容性字體包

經常使用的兩大網站

icomoon: icomoon.io/

阿里巴巴矢量圖www.iconfont.cn/

如何把字體引入html結構中

1.把fonts文件夾放在根目錄中

2.在HTML中聲明結構

3.在樣式中聲明字體

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

4.給盒子指定字體

span {
        font-family: "icomoon";
    }

如何追加新的字體圖標

利用selection.json從新上傳追加字體圖標，從新下載字體包替換原來的字體包便可

難點

logo部分

• logo裏面放一個h1 目的是爲了提權，告訴搜索引擎，這個地方很重要
• h1裏面放一個a標籤，a標籤的地址是首頁的地址，而且要在a標籤裏面寫上字，目的是爲了讓搜索引擎收錄咱們

• 如何讓a標籤的字消失？

  1.overflow:hidden   text-indent:-99999px

  ２.font-size:0

• 移動到連接時，要顯示文字。

html

<!-- logo部分 -->
            <div class="logo">
                <h1>
                    <a href="index.html" title="優品彙">優品彙</a>
                </h1>
            </div>

css

.header  .logo {
        position: absolute;
        left: 2px;
        top:25px;
        width: 172px;
        height:55px;
        background-color: blue;
 }
 .header .logo a {
    display: inline-block;
    width: 172px;
    height:55px;
    background: url("../img/logo.png") no-repeat;
    /* 讓文字消失 */
    text-indent: -99999px;
    overflow: hidden;

 }

news部分

此處用到精靈圖技術

下拉菜單

html

<!-- dropdown下拉菜單 -->
                <div class="dropdown fl">
                    <div class="dt">所有商品分類</div>
                    <div class="dd">
                        <ul>
                            <li class="memu_item">
                                <a href="#">家用電器</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="list.html">手機</a>
                                <a href="#">數碼</a>
                                <a href="#">通訊</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">電腦</a>
                                <a href="#">辦公</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">傢俱</a>
                                <a href="#">家居</a>
                                <a href="#">家裝</a>
                                <a href="#">廚具</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">男裝</a>
                                <a href="#">女裝</a>
                                <a href="#">童裝</a>
                                <a href="#">內衣</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">個性化妝</a>
                                <a href="#">清潔用品</a>
                                <a href="#">寵物</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">鞋靴</a>
                                <a href="#">箱包</a>
                                <a href="#">珠寶</a>
                                <a href="#">奢飾品</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">運動戶外</a>
                                <a href="#">鐘錶</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">汽車</a>
                                <a href="#">汽車用品</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">母嬰</a>
                                <a href="#">玩具樂器</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">食品</a>
                                <a href="#">酒類</a>
                                <a href="#">生鮮</a>
                                <a href="#">特產</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">醫藥保健</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">圖書</a>
                                <a href="#">音箱</a>
                                <a href="#">電子書</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">彩票</a>
                                <a href="#">旅行</a>
                                <a href="#">充值</a>
                                <a href="#">票務</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">理財</a>
                                <a href="#">衆籌</a>
                                <a href="#">白條</a>
                                <a href="#">保險</a>
                                <i></i>
                            </li>
                        </ul>
                    </div>
                </div>

服務模塊

此處用到精靈圖技術

<div class="mod-server">
                    <ul class="clearfix">
                        <li>
                            <i class="mod-server-icon mod-server-zheng"></i>
                            <div class="mod-server-title">
                                <h5>正品保障</h5>
                                <p> 正品保障 提供發票</p>
                            </div>
                        </li>

                        <li>
                            <i class="mod-server-icon mod-server-ji"></i>
                            <div class="mod-server-title">
                                <h5>急速物流</h5>
                                <p> 急速物流，急速送達</p>
                            </div>
                        </li>

                        <li>
                            <i class="mod-server-icon mod-server-bao"></i>
                            <div class="mod-server-title">
                                <h5>無憂售後</h5>
                                <p> 7天無理由售後</p>
                            </div>
                        </li>

                        <li>
                            <i class="mod-server-icon mod-server-te"></i>
                            <div class="mod-server-title">
                                <h5>特點服務</h5>
                                <p>私人訂製家電服務</p>
                            </div>
                        </li>

                        <li>
                            <i class="mod-server-icon mod-server-bang"></i>
                            <div class="mod-server-title">
                                <h5>幫助中心</h5>
                                <p> 你的購物指南</p>
                            </div>
                        </li>

                    </ul>

                </div>
                <!-- mod-server end -->

詳情頁及註冊頁

麪包屑導航

crumb_wrap 麪包屑導航：由a組成

產品介紹模塊

• 1號盒子爲大盒子 命名爲 product_intro （產品介紹模塊） 不要給高度
• 2號盒子爲預覽包 preview_wrap 左浮動
• 3號盒子爲產品詳細模塊 itemInfo_wrap 右浮動 不要給高

產品細節模塊

• 大盒子爲product_detail模塊 不要給高度 記得清除浮動
• 1號盒子aside側邊欄模塊 不要給高度 左浮動
• 1號盒子detail詳情模塊 不要給高度 右浮動

aside 佈局

• 1 號盒子 命名爲 tab_list 給高度就行了 ，裏面 放 ul 和 li 注意這是 tab欄切換佈局
• 2 號盒子 命名爲 tab_con 裏面還包含 不少個ul.item 和 上面的 tab_list 裏面的li一一對應。

registerarea佈局

• 主要使用lable標籤 input span標籤
• 完成註冊使用的是submit按鈕
• 注意表單域

進度條

html

<div class="progress">
        <div class="bar-in"></div>
 </div>

css

.sk_goods_progress .progress {
      display: inline-block;
      width: 130px;
      height: 12px;
      border: 1px solid #b1191a;
      border-radius: 6px;
      vertical-align: middle;
  }
  
  .progress .bar-in {
      width: 87%;
      height: 12px;
      background-color: #b1191a;
  }

源碼：pan.baidu.com/s/1IqD9Glj2…