前端学习(425):京东制作页面32京东登录模块制作头像部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京东JD.COM官网 多快好省 只为品质生活</title>
    <!-- 引入京东小图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 重置样式 -->
    <link rel="stylesheet" href="./jingdongcss/normalize.css">
    <!-- 头部和尾部基本相同 公共样式 -->
    <link rel="stylesheet" href="./jingdongcss/base.css">
    <link rel="stylesheet" href="./jingdongfont/ie7.css">
    <link rel="stylesheet" href="./jingdongcss/index.css">
    <meta name="description" content="京东JD.COM-专业综合网上购物商城,销售超数万品牌,4020万种商品,囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、旅游等13大品类。京东PLUS会员,免费体验30天!京东秉承客户为先, 100%正品行货保障,提供全国联保,机打发票,专业配送,售后服务!"/>
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,相机,数码,手表,存储卡,京东"/>
</head>
<body>
    <!-- 头部开始 -->
    <header>
        <div class="w">
            <a href="">
                <img src="./jingdongimg/header.jpg" alt="">
            </a>
        </div>
    </header>
    <!-- 头部结束 -->
    <!-- 快速导航栏 -->
    <div class="shortcut">
        <div class="w">
            <ul class="fl city">
                <li><i class="f10"></i><a href="#">北京</a></li>
            </ul>
            <ul class="fr">
                <li>
                    <a href="#">你好,请登录</a>
                    <a href="#" class="f10">免费注册</a>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">我的订单</a>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">我的京东</a>
                    <i></i>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">京东会员</a>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">企业采购</a>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">客户服务</a>
                    <i></i>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">网站导航</a>
                    <i></i>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#" class="moblie">手机京东
                        <img src="./jingdongimg/mobile.png" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 快速导航栏结束 -->
    <!-- 中间部分 -->
    <div class="w middle">
        <div class="logo">
            <!-- 提高权重,提高搜索引擎优化 -->
            <h1>
                <a href="#"></a>
            </h1>
        </div>
        <!-- 搜索框 -->
        <div class="form">
            <input type="text" placeholder="扫描仪">
            <!-- 按钮的意思,双标签 -->
            <button><i></i></button>
        </div>
        <!-- 购物车 -->
        <div class="shopCar">
            <i></i>
            <a href="#" class="f10">我的购物车</a><span>0</span>
        </div>
        <!-- 关键字 -->
        <div class="hotwords">
            <a href="#" class="f10">199减100</a>
            <a href="#">鼠标试用</a>
            <a href="#">农资7折</a>
            <a href="#">低至29元</a>
            <a href="#">抽奖赢空调</a>
            <a href="#">记忆棉</a>
            <a href="#">坐垫</a>
            <a href="#">1分钱买油</a>
            <a href="#">智能手表</a>
        </div>
        <!-- 小导航部分 -->
        <div class="navitems">
            <ul>
                <li>
                    <a href="#">秒杀</a>
                </li>
                <li>
                    <a href="#">优惠券</a>
                </li>
                <li>
                    <a href="#">闪购</a>
                </li>
                <li>
                    <a href="#">拍卖</a>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">服装城</a>
                </li>
                <li>
                    <a href="#">京东超市</a>
                </li>
                <li>
                    <a href="#">生鲜</a>
                </li>
                <li>
                    <a href="#">全球购</a>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">京东金融</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 中间部分结束 -->
    <!-- 中间部分 开始 -->
    <div class="w grid">
        <div class="grid-coll1 fl">
            <ul>
                <li><a href="#">家用电器</a></li>
				<li><a href="#">手机</a>/<a href="#">运用商</a>/<a href="#">数码</a></li>
				<li><a href="#">手机</a>/<a href="#">运用商<
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小歌谣

放弃很容易 但是坚持一定很酷

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值