品优购首页html和css代码 记录

 

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="网上购物,网上商城,手机,电脑,购物,平板">
    <meta name="description" content="品优购">
    <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
    <!-- 顶部导航开始 -->
    <div class="head">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您!</li>
                    <li><a href="#">请登录&nbsp;</a><a href="register.html"><span>免费注册</span></a></li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">我的品优购<i class="font-common"></i></a> </li>
                    <li><a href="#">品优购会员</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#">关注品优购<i class="font-common"></i></a></li>
                    <li><a href="#">客户服务<i class="font-common"></i></a>
                        <div class="dropdown">
                            <ul class="menu">
                                <li><a class="aNoBoard" href="#">订单咨询</a></li>
                                <li><a class="aNoBoard" href="#">物流查询</a></li>
                                <li><a class="aNoBoard" href="#">反馈</a></li>
                            </ul>                            
                        </div>
                    </li>
                    <li ><a class="aNoBoard" href="#">网站导航<i class="font-common"></i></a></li>
                </ul>
            </div>
        </div>
    </div> 
    <!-- 顶部导航结束-->
    <!-- 品优购开始 -->
    <div class="header w">
        <div class="logo fl">
            <img src="./images/logo.png" alt="">
        </div>
        <div class="search">
            <input  class="fl "type="text"value="请搜索内容...">
            <button class="fl ">搜索</button>
        </div>
        <div class="hotwords">
            <a href="">优惠购首发</a>
            <a href="">亿元优惠</a>
            <a href="">9.9元团购</a>
            <a href="">美满99减30</a>
            <a href="">办公用品</a>
            <a href="">电脑</a>
            <a href="">通信</a>
        </div>
        <div class="shopcar">
            <a href="#">
                <i class="fa fa-shopping-cart" aria-hidden="true"></i>
                <span>我的购物车</span>
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </a>
            <div class="eight">80</div>
        </div>
    </div>
    <!-- 品优购结束 -->
    <!-- 侧边固定栏开始 -->
    <div class="fixedtool">
        <ul>
            <li class="first"><a href="#">家用电器</a></li>
            <li><a href="#">手机通讯</a></li>
            <li><a href="#">家用电器</a></li>
            <li><a href="#">家用电器</a></li>
            <li><a href="#">家用电器</a></li>
            <li><a href="#">家用电器</a></li>
        </ul>
    </div>
    <!-- 固定侧边栏结束 -->
    <!-- nav 开始 -->
    <div class="nav">
        <div class="w">
        <div class="nav_left fl">
            <div class="dt "> <a><h3>全部商品分类</h3></a></div>
            <ul class="dd">
                <li><a href="#">家用电器<span>&gt;</span></a></li>
                <li><a href="list.html">手机、 数码、 通信<span>&gt;</span></a></li>
                <li><a href="#">电脑、办公<span>&gt;</span></a></li>
                <li><a href="#">家居、家具、家装、厨具<span>&gt;</span></a></li>
                <li><a href="#">男装、女装、童装、内衣<span>&gt;</span></a></li>
                <li><a href
  • 0
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值