1. 任务

实现首页, 登录 , 注册页面

1. 需求

1. 严格按照项目结构完成项目

   - shopping
        - static  静态文件夹
            - css
            - js
            - imgs
        - index.html  入口页面
        - category.html  分类页
        - product_detail.html  商品详情页
        - login.html 登录页
        - register.html 注册页
        - cart.html  购物车页面
        - other.html  其他...

2. 文件名严格遵守以上规则

3. 引用的图片名不可是汉字

4. class类名要见其名知其意

5. 根据设计稿高保真完成每个模块

6. 协同开发, 并上传到gitee仓库

2. 代码示例

首页头部导航栏

    <!-- 首页头部 -->
    <div class="header">
        <!-- 头部logo -->
        <div class="header-logo">
            <img src="static/images/logo.png" alt="">
        </div>
        <!-- 头部版心 -->
        <div class="header-c">
            <!-- 头部导航 -->
            <ul class="header-nav">
                <li>
                    <a href="#" class="header-nav-link">首页</a>
                </li>
                <li>
                    <a href="#" class="header-nav-link">女装</a>
                </li>
                <li>
                    <a href="#" class="header-nav-link">男装</a>
                </li>
                <li>
                    <a href="#" class="header-nav-link">箱包</a>
                </li>
                <li>
                    <a href="#" class="header-nav-link">配饰</a>
                </li>
            </ul>
            <!-- 搜索框 -->
            <div class="input-search">
                <input type="text" placeholder="搜索商品名/商品编号" class="header-search">
            </div>
            <!-- 图标 -->
            <a href="#">
                <div class="user-setting">
                    <img src="static/images/like.png" alt="" class="icon-like">
                    <img src="static/images/shopping-car.png" alt="" class="icon-car">
                    <img src="static/images/uesr.png" alt="" class="icon-user">
                </div>
            </a>   
        </div>
    </div>

.header {
    width: 100%;
    height: 106px;
    position: relative;
}

.header-logo img {
    width: 90px;
    height: 46px;
    position: absolute;
    top: 32px;
    left: 42px;
}

.header-c {
    width: 1200px;
    height: 106px;
    margin: 0 auto;
    position: relative;
}

.header-nav {
    float: left;
    height: 106px;
    text-align: center;
    line-height: 106px;
}

.header-nav li {
    float: left;
    width: 36px;
    height: 106px;
    /* padding-left: 30px;
    padding-right: 30px; */
    padding: 0px 30px;
}

.header-nav li .header-nav-link {
    color: #666666;
}

.header-nav li .header-nav-link:hover {
    font-size: 18px;
    font-weight: 600;
}

.input-search {
    float: right;
    height: 106px;
    margin-right: 220px;
}

.header-search {
    width: 313px;
    height: 46px;
    border: 1px solid #BDBDBD;
    border-radius: 27.5px;
    margin-top: 29px;
    padding-left: 25px;
    background: url(../images/search.png) no-repeat 300px center;
}

.header-search:focus {
    border-color: orangered;
}

.user-setting {
    position: absolute;
    top: 0;
    right: 0;
}

.user-setting img {
    float: left;
}

.user-setting .icon-like {
    width: 21px;
    height: 20px;
    margin: 47px 43px 39px 0px;
}

.user-setting .icon-car {
    width: 21px;
    height: 21px;
    margin: 47px 43px 38px 0px;
}

.user-setting .icon-user {
    width: 20px;
    height: 22px;
    margin: 45px 0px 39px 0px;
}