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

最新推荐文章于 2025-05-30 17:46:23 发布

干杯！

最新推荐文章于 2025-05-30 17:46:23 发布

阅读量1.3k

点赞数

分类专栏：笔记文章标签： css html webview

本文链接：https://blog.youkuaiyun.com/weixin_46427707/article/details/125339728

版权

本文记录了品优购首页的HTML结构和CSS样式实现，包括index.html文件和两个CSS文件：common.css与base.css。通过这些代码，读者可以了解到网页布局和样式设计的基本方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>&