菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 康利-20221020-css项目实战2 [打印本页]

---

作者: 智商不在服务区    时间: 2022-10-21 11:50
标题: 康利-20221020-css项目实战2
一、学习内容：
<!-- 头部公共模块 -->
    <!-- 顶部快捷导航栏 -->
    <div class="shortcut">
        <!-- 定义版心 -->
        <div class="w">
            <!-- 左侧的登录部分 -->
            <div class="left-login">
                优购商城欢迎您！
                <a href="#">登录</a>
                <a href="#">免费注册</a>
            </div>
            <!-- 右侧分类链接 -->
            <div class="right-classify">
                <a href="#">我的订单</a>
                <span>|</span>
                <a href="#">我的优购</a>
                <span>|</span>
                <a href="#">会员</a>
                <span>|</span>
                <a href="#">企业采购</a>
                <span>|</span>
                <a href="#">客户服务</a>
                <span>|</span>
                <a href="#">网站导航</a>
            </div>
        </div>
    </div>
    <!-- 顶部快捷导航栏 -->
    <div class="h">
        <!-- logo、搜索、购物车模块start -->
        <div class="header w">
            <!-- logo部分 -->
            <div class="logo">
                <a href="#"></a>
            </div>
            <!-- 搜索框区域 -->
            <div class="search">
                <input type="text" placeholder="农药皮肤大出血">
                <button><span class="iconfont icon-seach"></span></button>
            </div>
            <!-- 热门关键词 -->
            <div class="hotwords">
                <a href="#" class="first">新款连衣裙</a>
                <a href="#">四件套</a>
                <a href="#">潮流T恤</a>
                <a href="#">时尚女鞋</a>
                <a href="#">短裤</a>
                <a href="#">半身裙</a>
                <a href="#">男士外套</a>
                <a href="#">墙纸</a>
            </div>
            <!-- 购物车 -->
            <div class="shop-car">
                <i class="iconfont icon-gouwuchekong
                "></i>
                我的购物车
                <i class="count">18</i>
            </div>

        </div>
        <!-- 顶部下沿导航栏 -->
        <div class="top-nav w">
            <a href="#" class="nav-first">全部商品分类</a>
            <a href="#">潮服饰</a>
            <a href="#">美妆馆</a>
            <a href="#">电玩街</a>
            <a href="#">电器城</a>
            <a href="#">家世界</a>
            <a href="#">母婴区</a>
            <a href="#">会员专享</a>
        </div>
        <!-- 顶部下沿导航栏end -->
    </div>
    <!-- 头部公共区域end -->

---

欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)

Powered by Discuz! X3.4