移动乐淘day1

1.启动命令

npm start  //在项目的根目录

2.540 error

替换项目中 node_modules  或者 直接删除node_modules 通过网络下载更新  命令: npm install

3.项目url地址

    前台会员地址
http://localhost:3000/m/index.html
账号 itcast
密码 111111    
后台地址
http://localhost:3000/a/login.html
账号 root
密码 123456

 

4.项目目录创建

5.引入我们的mui

6.搭建项目骨架 index.html

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="assets/mui/css/mui.min.css">
    <link rel="stylesheet" href="css/base.css">
    <script src="assets/mui/js/mui.min.js"></script>

 

    <header class="mui-bar mui-bar-nav my-header">
        <h1 class="mui-title">乐淘云购</h1>
        <a class="mui-icon mui-icon-search mui-pull-right"></a>
    </header>
    <nav class="mui-bar mui-bar-tab my-footer">
        <a class="mui-tab-item mui-active" href="index.html">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" href="category.html">
            <span class="mui-icon mui-icon-bars"></span>
            <span class="mui-tab-label">分类</span>
        </a>
        <a class="mui-tab-item" href="cart.html">
            <span class="mui-icon iconfont icon-daohanggouwuche"></span>
            <span class="mui-tab-label">购物车</span>
        </a>
        <a class="mui-tab-item" href="user.html">
            <span class="mui-icon mui-icon-person"></span>
            <span class="mui-tab-label">会员中心</span>
        </a>
    </nav>
    <div class="mui-content">
        
    </div>

 

7.实现首页轮播图

<!-- 轮播图 -->
        <div class="mui-slider">
            <div class="mui-slider-group">
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="images/banner1.png" />
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="images/banner2.png" />
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="images/banner3.png" />
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="images/banner4.png" />
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="images/banner5.png" />
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="images/banner6.png" />
                    </a>
                </div>
            </div>
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div>
        </div>

 

8.实现导航链接

<!-- 导航链接 -->
        <div class="nav-links mui-clearfix">
            <a href="#">
                <img src="images/nav1.png">
            </a>
            <a href="#">
                <img src="images/nav2.png">
            </a>
            <a href="#">
                <img src="images/nav3.png">
            </a>
            <a href="#">
                <img src="images/nav4.png">
            </a>
            <a href="#">
                <img src="images/nav5.png">
            </a>
            <a href="#">
                <img src="images/nav6.png">
            </a>
        </div>
        <!-- /导航链接 -->

9.品牌

<!-- 品牌专区 -->
        <div class="brand">
            <img src="images/title0.png" class="title">
            <ul>
                <li><a href=""><img src="images/brand1.png" alt=""></a></li>
                <li><a href=""><img src="images/brand2.png" alt=""></a></li>
                <li><a href=""><img src="images/brand3.png" alt=""></a></li>
                <li><a href=""><img src="images/brand4.png" alt=""></a></li>
                <li><a href=""><img src="images/brand5.png" alt=""></a></li>
                <li><a href=""><img src="images/brand6.png" alt=""></a></li>
                <li><a href=""><img src="images/brand7.png" alt=""></a></li>
                <li><a href=""><img src="images/brand8.png" alt=""></a></li>
            </ul>
        </div>
        <!-- /品牌专区 -->

10.运动专栏

    <!-- 运动生活专区 -->
        <div class="product">
            <img src="images/title1.png" class="title">
            <ul class="mui-clearfix">
                <li>
                    <a href="#">
                        <img src="images/product.jpg">
                        <span class="name">
                            adidas阿迪达斯 男式 场下休闲篮球鞋S83700
                        </span>
                        <p>
                            <span>¥560</span>
                            <span>¥888</span>
                        </p>
                        <span class="buy-now">立即购买</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/product.jpg">
                        <span class="name">
                            adidas阿迪达斯 男式 场下休闲篮球鞋S83700
                        </span>
                        <p>
                            <span>¥560</span>
                            <span>¥888</span>
                        </p>
                        <span class="buy-now">立即购买</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/product.jpg">
                        <span class="name">
                            adidas阿迪达斯 男式 场下休闲篮球鞋S83700
                        </span>
                        <p>
                            <span>¥560</span>
                            <span>¥888</span>
                        </p>
                        <span class="buy-now">立即购买</span>
                    </a>
                </li>
                <li>
                    <a href="#">
<img src="images/product.jpg">
<span class="name">
adidas阿迪达斯 男式 场下休闲篮球鞋S83700
</span>
<p>
<span>¥560</span>
<span>¥888</span>
</p>
<span class="buy-now">立即购买</span>
</a>
</li>
</ul>
</div>
<!-- /运动生活专区 -->

11.女士专栏

<!-- 女士专栏 -->
        <div class="product">
            <img src="images/title2.png" class="title">
            <ul class="mui-clearfix">
                <li>
                    <a href="#">
                        <img src="images/product.jpg">
                        <span class="name">
                            adidas阿迪达斯 男式 场下休闲篮球鞋S83700
                        </span>
                        <p>
                            <span>¥560</span>
                            <span>¥888</span>
                        </p>
                        <span class="buy-now">立即购买</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/product.jpg">
                        <span class="name">
                            adidas阿迪达斯 男式 场下休闲篮球鞋S83700
                        </span>
                        <p>
                            <span>¥560</span>
                            <span>¥888</span>
                        </p>
                        <span class="buy-now">立即购买</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/product.jpg">
                        <span class="name">
                            adidas阿迪达斯 男式 场下休闲篮球鞋S83700
                        </span>
                        <p>
                            <span>¥560</span>
                            <span>¥888</span>
                        </p>
                        <span class="buy-now">立即购买</span>
                    </a>
                </li>
                <li>
                    <a href="#">
<img src="images/product.jpg">
<span class="name">
adidas阿迪达斯 男式 场下休闲篮球鞋S83700
</span>
<p>
<span>¥560</span>
<span>¥888</span>
</p>
<span class="buy-now">立即购买</span>
</a>
</li>
</ul>
</div>
<!-- /女士专栏 -->

12.男士专栏

    <!-- 男士专栏 -->
        <div class="product">
            <img src="images/title3.png" class="title">
            <ul class="mui-clearfix">
                <li>
                    <a href="#">
                        <img src="images/product.jpg">
                        <span class="name">
                            adidas阿迪达斯 男式 场下休闲篮球鞋S83700
                        </span>
                        <p>
                            <span>¥560</span>
                            <span>¥888</span>
                        </p>
                        <span class="buy-now">立即购买</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/product.jpg">
                        <span class="name">
                            adidas阿迪达斯 男式 场下休闲篮球鞋S83700
                        </span>
                        <p>
                            <span>¥560</span>
                            <span>¥888</span>
                        </p>
                        <span class="buy-now">立即购买</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/product.jpg">
                        <span class="name">
                            adidas阿迪达斯 男式 场下休闲篮球鞋S83700
                        </span>
                        <p>
                            <span>¥560</span>
                            <span>¥888</span>
                        </p>
                        <span class="buy-now">立即购买</span>
                    </a>
                </li>
                <li>
                    <a href="#">
<img src="images/product.jpg">
<span class="name">
adidas阿迪达斯 男式 场下休闲篮球鞋S83700
</span>
<p>
<span>¥560</span>
<span>¥888</span>
</p>
<span class="buy-now">立即购买</span>
</a>
</li>
</ul>
</div>
<!-- /男士专栏 -->

day02