移动端布局学习与淘宝首页基本框架搭建 - 前端学习

首页 > 博客列表 > 移动端布局学习与淘宝首页基本框架搭建

博主信息

博文 98

粉丝 1

访问量 77894

专题推荐

更多>

一、移动端布局

（1）基本思路

在移动端的页面布局，一般控制像素跟可视窗口来实现

（2）三种视口类型

布局视口：又称Layout viewport，与设备无关, 通常默认980px,显示完整网页。
视觉视口：又称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>