亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

一、移動端布局

（1） 基本思路

• 在移動端的頁面布局，一般控制像素跟可視窗口來實現(xiàn)

（2）三種視口類型

• 布局視口：又稱Layout viewport，與設備無關, 通常默認980px,顯示完整網(wǎng)頁。
• 視覺視口：又稱visual viewport，與設備相關,用戶手機屏幕可見部分,通過縮放查看全部
• 理想視口：又稱idea viewport，不必縮放就可查看全部,針對移動端進行布局

（3）解決移動端布局方案

• 使用視口屬性：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

• 布局視圖 = 視覺視圖

width=device-width

• 視覺視圖 = 理想視圖

initial-scale=1.0

二、淘寶首頁基本整體架構

• 頭部

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 頭部 -->
    <header>
        <!-- 頂部 -->
        <div class="top">
            <!-- logo -->
            <div class="logo iconfont icon-shejiaotubiao-08"></div>
            <!-- 搜索框 -->
            <div class="search">
                <div class="keys">
                    <span class="iconfont icon-fangdajing"></span>
                    <span>尋找寶貝店鋪</span>
                </div>
            </div>
        </div>
    </header>

• 主體

        <!-- 輪播圖 -->
        <div class="slider">
            <a href=""><img src="images/banner/banner1.jpg" alt="" /></a>
        </div>
        <!-- 導航組 -->
        <ul class="nav">
            <li class="item">
                <a href=""><img src="images/nav/nav6.png" alt="" /></a>
                <a href="">天貓新品</a>
            </li>
            <li class="item">
                <a href=""><img src="images/nav/nav3.png" alt="" /></a>
                <a href="">今日爆款</a>
            </li>
            <li class="item">
                <a href=""><img src="images/nav/nav1.png" alt="" /></a>
                <a href="">天貓超市</a>
            </li>
            <li class="item">
                <a href=""><img src="images/nav/nav2.png" alt="" /></a>
                <a href="">充值中心</a>
            </li>
            <li class="item">
                <a href=""><img src="images/nav/nav5.png" alt="" /></a>
                <a href="">機票酒店</a>
            </li>
            <li class="item">
                <a href=""><img src="images/nav/nav8.png" alt="" /></a>
                <a href="">金幣莊園</a>
            </li>
            <li class="item">
                <a href=""><img src="images/nav/nav7.png" alt="" /></a>
                <a href="">阿里拍賣</a>
            </li>
            <li class="item">
                <a href=""><img src="images/nav/nav4.png" alt="" /></a>
                <a href="">分類</a>
            </li>
            <li class="item">
                <a href=""><img src="images/nav/nav7.png" alt="" /></a>
                <a href="">阿里拍賣</a>
            </li>
            <li class="item">
                <a href=""><img src="images/nav/nav4.png" alt="" /></a>
                <a href="">分類</a>
            </li>
        </ul>

• 底部

    <footer>
        <div class="item active">
            <a href="" class="iconfont icon-shejiaotubiao-44"></a>
        </div>
        <div class="item">
            <a href="" class="iconfont icon-gouwuche"></a>
            <a href="">購物車</a>
        </div>
        <div class="item">
            <a href="" class="iconfont icon-wodetaobao"></a>
            <a href="">我的淘寶</a>
        </div>
    </footer>

批改老師：PHPz

批改狀態(tài)：合格

老師批語：