CSS/HTML静态购物网站项目源码解析（品优购）——该项目包含主页、注册页、列表页三个网页

已于 2023-04-08 18:04:39 修改
阅读量1w 收藏 188
点赞数 33
分类专栏： CSS3 HTML5 文章标签： html html5 css3 css
于 2021-02-19 16:33:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47015897/article/details/113865734
版权
CSS3 同时被 2 个专栏收录
38 篇文章 16 订阅
订阅专栏
HTML5
37 篇文章 8 订阅
订阅专栏

注：该项目所涉及的素材文件请QQ联系作者（Etui：3416252112）

首先：

上图！

index.html------主页
在这里插入图片描述
register.html-------注册页
在这里插入图片描述
list.html-----列表页
在这里插入图片描述
摘要：作为一个前端初学者，这是我学完html和css基础后做的第二个练习（第一个是小米商城），在练习过程中也遇到了很多困难，好在最终都一一解决，这是一个成长的过程！
这个项目是我在B站中pink老师的教程里看到的，我先是自己尝试敲了一遍，然后再回头看一遍老师的方法。（我感觉这种学习方法很不错，但是不得不说老师的方法真的很别致）

我做这个项目是分模块进行编写，例如我将主页分为九部分编写，如图：
在这里插入图片描述
这样编写的好处是便于修改，而且如果其他页面有公共的标题栏或者底栏也可以是用相同的css样式。例如该项目中三个页面的备案栏都是相同，此时我们便可以使用公共的样式（该项目中的common.css便是公共样式文件）
在这里插入图片描述

下面是我编写该项目的目录：
在这里插入图片描述
其中css文件夹为样式，fonts为图标字体文件，images为网页中固定的（不更改的）图片文件，upload文件夹为网页中可切换的图片。
favicon.ico文件为网页图标（必须放在根目录，和index.html一起）
index.html为主页
list.html为列表页
register.html为注册页

以下为这个项目的源码：
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">
    <title>品优购</title>
    <!-- 清除默认样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入类型样式 -->
    <link rel="stylesheet" href="./css/style.css">
    <!-- 引用公共样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="shortcut icon" href="/favicon.ico">
    <!-- 引入iconfont -->
    <link rel="stylesheet" href="./fonts/iconfont/iconfont.css">
    <!-- 引入公共底栏common.css -->
    <link rel="stylesheet" href="./css/common.css">
</head>
<body>
    <!-- 顶部菜单 -->
    <div class="top_bar">
        <div class="topbar w">
            <div class="left_login">
                <span>品优购欢迎您！</span>
                <a href="#">请登录</a>
                <a href="register.html" class="a2">免费注册</a>
            </div>
            <div class="right_menu">
                <ul class="rightmenu">
                    <li>
                        <a href="">我的订单</a><span>|</span>
                    </li>
                    <li>
                        <a href="">我的品优购<i class="iconfont icon-xia-xi"></i></a><span>|</span>
                    </li>
                    <li>
                        <a href="">品优购会员</a><span>|</span>
                    </li>
                    <li>
                        <a href="">企业采购</a><span>|</span>
                    </li>
                    <li>
                        <a href="">关注品优购<i class="iconfont icon-xia-xi"></i></a><span>|</span>
                    </li>
                    <li>
                        <a href="">客户服务<i class="iconfont icon-xia-xi"></i></a><span>|</span>
                    </li>
                    <li>
                        <a href="">导航网站<i class="iconfont icon-xia-xi"></i></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 头部搜索栏 -->
    <div class="top_nav">
        <div class="topnav w">
            <!-- 左侧logo -->
        <div class="left-img">
            <a href="">
                <img src="./images/logo.png" alt="">
            </a>
        </div>
        <div class="center_search">
            <div class="search">
                <input type="text" value="语言开发"><button>搜索</button>
            </div>
            <div class="bt_nav">
                <ul>
                    <li>
                        <a href="">优惠购首发</a>
                    </li>
                    <li>
                        <a href="">亿元优惠</a>
                    </li>
                    <li>
                        <a href="">9.9元团购</a>
                    </li>
                    <li>
                        <a href="">每满99减30</a>
                    </li>
                    <li>
                        <a href="">办公用品</a>
                    </li>
                    <li>
                        <a href="">电脑</a>
                    </li>
                    <li>
                        <a href="">通信</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 右侧购物车 -->
        <div class="right_shop">
            <i class="shop_car iconfont icon-shop"></i><span>我的购物车</span><i class="arrow iconfont icon-you-xi"></i>
            <p class="count">8</p>
        </div>
        </div>
    </div>

    <!-- 头部菜单栏 -->
    <div class="header_bar">
        <div class="headerbar w">
            <ul>
                <li class="first">
                    <a href="">全部商品分类</a>
                </li>
                <div class="shop_list">
                    <ul>
                        <li class="iconfont"><a href="">家用电器</a></li>
                        <li class="iconfont"><a href="list.html">手机 数码 通信</a></li>
                        <li class="iconfont"><a href="">电脑、办公</a></li>
                        <li class="iconfont"><a href="">家居、家具、家装、厨具</a></li>
                        <li class="iconfont"><a href="">男装、女装、童装、内衣</a></li>
                        <li class="iconfont"><a href="">个护化妆、清洁用品、宠物</a></li>
                        <li class="iconfont"><a href="">鞋靴、箱包、珠宝、奢侈品</a></li>
                        <li class="iconfont"><a href="">户外运动、钟表</a></li>
                        <li class="iconfont"><a href="">汽车、汽车用品</a></li>
                        <li class="iconfont"><a href="">母婴、玩具乐器</a></li>
                        <li class="iconfont"><a href="">食品、酒类、生鲜、特产</a></li>
                        <li class="iconfont"><a href="">医药保健</a></li>
                        <li class="iconfont"><a href="">图书、音像、电子书</a></li>
                        <li class="iconfont"><a href="">彩票、旅行、充值、票务</a></li>
                        <li class="iconfont"><a href="">理财、众筹、白条、保险</a></li>
                    </ul>
                </div>
                <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>
                <li>
                    <a href="">服装城</a>
                </li>
                <li>
                    <a href="">服装城</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 中部轮播、快报模块 -->
    <div class="banner_auter">
        <div class="banner w">
            <div class="center_images">
                <img src="./upload/focus1.png" alt="">
            </div>
            <div class="right_bulletin">
                <div class="title">
                    <span class="s1">品优购快报</span><span class="s2">更多<i class="iconfont icon-you-xi"></i></span>
                </div>
                <div class="list">
                    <ul>
                        <li><a href=""><strong>[重磅]</strong>他来了他来了,头戴绿帽过来了</a></li>
                        <li><a href=""><strong>[重磅]</strong>他来了他来了,头戴绿帽过来了</a></li>
                        <li><a href=""><strong>[重磅]</strong>他来了他来了,头戴绿帽过来了</a></li>
                        <li><a href=""><strong>[重磅]</strong>他来了他来了,头戴绿帽过来了</a></li>
                        <li><a href=""><strong>[重磅]</strong>他来了他来了,头戴绿帽过来了</a></li>
                    </ul>
                </div>
                <div class="skip_list">
                    <ul>
                        <li class="first">
                            <a href="">
                                <i class="iconfont icon-shouji"></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="iconfont icon-shouji"></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="iconfont icon-shouji"></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="iconfont icon-shouji"></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li class="first">
                            <a href="">
                                <i class="iconfont icon-shouji"></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="iconfont icon-shouji"></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="iconfont icon-shouji"></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="iconfont icon-shouji"></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li class="first">
                            <a href="">
                                <i class="iconfont icon-shouji"></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="iconfont icon-shouji"></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="iconfont icon-shouji"></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="iconfont icon-shouji"></i>
                                <p>话费</p>
                            </a>
                        </li>
                    </ul>
                </div>
    
                <div class="images">
                    <img src="./upload/bargain.png" alt="">
                </div>
            </div>
        </div>
    </div>

    <!-- 今日推荐栏 -->
    <div class="banner2_auter">
        <div class="banner2 w">
            <div class="today">
                <img src="./images/recom.png" alt="">
            </div>
            <div class="recommend">
                <ul>
                    <li><a href=""><img src="./upload/recom_03.jpg" alt=""></a></li>
                    <li><a href=""><img src="./upload/recom_03.jpg" alt=""></a></li>
                    <li><a href=""><img src="./upload/recom_03.jpg" alt=""></a></li>
                    <li><a href=""><img src="./upload/recom_03.jpg" alt=""></a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 家用电器栏 -->
    <div class="banner3_auter">
        <div class="banner3 w">
            <!-- 头部标题 -->
            <div class="header_bar">
                <div class="left_title">
                    <span>家用电器</span>
                </div>
                <div class="right_menu">
                    <ul>
                        <li><a href="">热门</a><span>|</span></li>
                        <li><a href="">大家电</a><span>|</span></li>
                        <li><a href="">生活电器</a><span>|</span></li>
                        <li><a href="">厨房电器</a><span>|</span></li>
                        <li><a href="">生活电器</a><span>|</span></li>
                        <li><a href="">个护健康</a><span>|</span></li>
                        <li><a href="">应季电器</a><span>|</span></li>
                        <li><a href="">空气/净水</a><span>|</span></li>
                        <li><a href="">新奇特</a><span>|</span></li>
                        <li><a href="">高端电器</a></li>
                    </ul>
                </div>
            </div>

            <!-- 主体 -->
            <div class="body_auter">
                <div class="left_list">
                    <ul>
                        <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>
                        <li><a href="">节能补贴</a></li>
                    </ul>
                    <div class="imgs">
                        <a href="">
                            <img src="./upload/floor-1-1.png" alt="">
                        </a>
                    </div>
                </div>
                <div class="image_list">
                    <ul>
                        <li>
                            <a href="">
                                <img src="./upload/floor-1-b01.png" alt="">
                            </a>
                        </li>
                        <div class="center_img1">
                            <li>
                                <a href="">
                                    <img src="./upload/floor-1-2.png" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="./upload/floor-1-3.png" alt="">
                                </a>
                            </li>
                        </div>
                        <li class="img4">
                            <a href="">
                                <img src="./upload/floor-1-4.png" alt="">
                            </a>
                        </li>
                        <div class="center_img2">
                            <li>
                                <a href="">
                                    <img src="./upload/floor-1-5.png" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="./upload/floor-1-6.png" alt="">
                                </a>
                            </li>
                        </div>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 手机通讯 -->
        <div class="banner3 w">
            <!-- 头部标题 -->
            <div class="header_bar">
                <div class="left_title">
                    <span>手机通讯</span>
                </div>
                <div class="right_menu">
                    <ul>
                        <li><a href="">热门</a><span>|</span></li>
                        <li><a href="">大家电</a><span>|</span></li>
                        <li><a href="">生活电器</a><span>|</span></li>
                        <li><a href="">厨房电器</a><span>|</span></li>
                        <li><a href="">生活电器</a><span>|</span></li>
                        <li><a href="">个护健康</a><span>|</span></li>
                        <li><a href="">应季电器</a><span>|</span></li>
                        <li><a href="">空气/净水</a><span>|</span></li>
                        <li><a href="">新奇特</a><span>|</span></li>
                        <li><a href="">高端电器</a></li>
                    </ul>
                </div>
            </div>

            <!-- 主体 -->
            <div class="body_auter">
                <div class="left_list">
                    <ul>
                        <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>
                        <li><a href="">节能补贴</a></li>
                    </ul>
                    <div class="imgs">
                        <a href="">
                            <img src="./upload/floor-1-1.png" alt="">
                        </a>
                    </div>
                </div>
                <div class="image_list">
                    <ul>
                        <li>
                            <a href="">
                                <img src="./upload/floor-1-b01.png" alt="">
                            </a>
                        </li>
                        <div class="center_img1">
                            <li>
                                <a href="">
                                    <img src="./upload/floor-1-2.png" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="./upload/floor-1-3.png" alt="">
                                </a>
                            </li>
                        </div>
                        <li class="img4">
                            <a href="">
                                <img src="./upload/floor-1-4.png" alt="">
                            </a>
                        </li>
                        <div class="center_img2">
                            <li>
                                <a href="">
                                    <img src="./upload/floor-1-5.png" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="./upload/floor-1-6.png" alt="">
                                </a>
                            </li>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 底栏 -->
    <div class="bottom1_auter">
        <div class="bottom1 w">
            <div class="guarantee">
                <ul>
                    <li>
                        <div class="i">
                            <i class="iconfont icon-65"></i>
                        </div>
                        <div class="f">
                            <span>正品保障</span>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <div class="i">
                            <i class="iconfont icon-65"></i>
                        </div>
                        <div class="f">
                            <span>正品保障</span>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <div class="i">
                            <i class="iconfont icon-65"></i>
                        </div>
                        <div class="f">
                            <span>正品保障</span>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <div class="i">
                            <i class="iconfont icon-65"></i>
                        </div>
                        <div class="f">
                            <span>正品保障</span>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 服务指南 -->
        <div class="service w">
            <div class="service_in">
                <div class="service_sun">
                    <h1>服务指南</h1>
                    <ul>
                        <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>
                        <li>
                            <a href="">联系客服</a>
                        </li>
                    </ul>
                </div>
                <div class="service_sun">
                    <h1>服务指南</h1>
                    <ul>
                        <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>
                        <li>
                            <a href="">联系客服</a>
                        </li>
                    </ul>
                </div><div class="service_sun">
                    <h1>服务指南</h1>
                    <ul>
                        <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>
                        <li>
                            <a href="">联系客服</a>
                        </li>
                    </ul>
                </div>
                <div class="service_sun">
                    <h1>服务指南</h1>
                    <ul>
                        <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>
                        <li>
                            <a href="">联系客服</a>
                        </li>
                    </ul>
                </div>
                <div class="service_sun">
                    <h1>服务指南</h1>
                    <ul>
                        <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>
                        <li>
                            <a href="">联系客服</a>
                        </li>
                    </ul>
                </div>
                
                <div class="QRcode">
                    <h1>帮助中心</h1>
                    <img src="./images/wx_cz.jpg" alt="">
                    <p>品优购客户端</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 备案栏 -->
    <div class="bottom_auter">
        <div class="bottom w">
            <ul>
                <li>
                    <a href="">关于我们</a><span>|</span>
                </li>
                <li>
                    <a href="">联系我们</a><span>|</span>
                </li>
                <li>
                    <a href="">联系客服</a><span>|</span>
                </li>
                <li>
                    <a href="">商家入驻</a><span>|</span>
                </li>
                <li>
                    <a href="">营销中心</a><span>|</span>
                </li>
                <li>
                    <a href="">手机品优购</a><span>|</span>
                </li>
                <li>
                    <a href="">友情链接</a><span>|</span>
                </li>
                <li>
                    <a href="">销售联盟</a><span>|</span>
                </li>
                <li>
                    <a href="">品优购社区</a><span>|</span>
                </li>
                <li>
                    <a href="">品优购公益</a><span>|</span>
                </li>
                <li>
                    <a href="">English Site</a><span>|</span>
                </li>
                <li>
                    <a href="">Contact U</a>
                </li>
            </ul>
            <div class="pp">
                <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱：zhanghj+itcast.cn</p>
                <p>京ICP备08001421号京公安网备案110108007702</p>
            </div>
        </div>
    </div>
</body>
</html>

list.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">
    <title>列表页</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共模块样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入iconfont文件 -->
    <link rel="stylesheet" href="./fonts/iconfont/iconfont.css">
    <!-- 引入list.css -->
    <link rel="stylesheet" href="./css/list.css">
</head>
<body>
    <!-- 顶部菜单 -->
    <div class="top_bar">
        <div class="topbar w">
            <div class="left_login">
                <span>品优购欢迎您！</span>
                <a href="#">请登录</a>
                <a href="#" class="a2">免费注册</a>
            </div>
            <div class="right_menu">
                <ul class="rightmenu">
                    <li>
                        <a href="">我的订单</a><span>|</span>
                    </li>
                    <li>
                        <a href="">我的品优购<i class="iconfont icon-xia-xi"></i></a><span>|</span>
                    </li>
                    <li>
                        <a href="">品优购会员</a><span>|</span>
                    </li>
                    <li>
                        <a href="">企业采购</a><span>|</span>
                    </li>
                    <li>
                        <a href="">关注品优购<i class="iconfont icon-xia-xi"></i></a><span>|</span>
                    </li>
                    <li>
                        <a href="">客户服务<i class="iconfont icon-xia-xi"></i></a><span>|</span>
                    </li>
                    <li>
                        <a href="">导航网站<i class="iconfont icon-xia-xi"></i></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 头部搜索栏 -->
    <div class="top_nav">
        <div class="topnav w">
            <!-- 左侧logo -->
            <div class="left-img">
                <a href="index.html">
                    <img src="./images/logo.png" alt="">
                </a>
                <div class="ms">
                    <img src="./images/sk.png" alt="">
                </div>
            </div>
            

        <div class="center_search">
            <div class="search">
                <input type="text" value="语言开发"><button>搜索</button>
            </div>
            <div class="bt_nav">
                <ul>
                    <li>
                        <a href="">优惠购首发</a>
                    </li>
                    <li>
                        <a href="">亿元优惠</a>
                    </li>
                    <li>
                        <a href="">9.9元团购</a>
                    </li>
                    <li>
                        <a href="">每满99减30</a>
                    </li>
                    <li>
                        <a href="">办公用品</a>
                    </li>
                    <li>
                        <a href="">电脑</a>
                    </li>
                    <li>
                        <a href="">通信</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 右侧购物车 -->
        <div class="right_shop">
            <i class="shop_car iconfont icon-shop"></i><span>我的购物车</span><i class="arrow iconfont icon-you-xi"></i>
            <p class="count">8</p>
        </div>
        </div>
    </div>

    <!-- 标题栏 -->
    <div class="nav_auter">
        <div class="nav w">
            <ul>
                <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>
                <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>
                <li>
                    <a href="">女装</a>
                </li>
                <li>
                    <a href="">全部分类<i class="iconfont icon-xia-xi"></i></a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 头部图片 -->
    <div class="header_image w">
        <img src="./upload/bg_03.png" alt="">
    </div>

    <!-- 商品列表 -->
    <div class="body_list w">
        <ul>
            <li>
                <a href="">
                    <img src="./upload/list.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./upload/list.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./upload/list.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./upload/list.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./upload/list.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./upload/list.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./upload/list.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./upload/list.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./upload/list.jpg" alt="">
                </a>
            </li>
        </ul>
    </div>

    <!-- 底栏 -->
    <div class="bottom1_auter">
        <div class="bottom1 w">
            <div class="guarantee">
                <ul>
                    <li>
                        <div class="i">
                            <i class="iconfont icon-65"></i>
                        </div>
                        <div class="f">
                            <span>正品保障</span>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <div class="i">
                            <i class="iconfont icon-65"></i>
                        </div>
                        <div class="f">
                            <span>正品保障</span>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <div class="i">
                            <i class="iconfont icon-65"></i>
                        </div>
                        <div class="f">
                            <span>正品保障</span>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <div class="i">
                            <i class="iconfont icon-65"></i>
                        </div>
                        <div class="f">
                            <span>正品保障</span>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 服务指南 -->
        <div class="service w">
            <div class="service_in">
                <div class="service_sun">
                    <h1>服务指南</h1>
                    <ul>
                        <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>
                        <li>
                            <a href="">联系客服</a>
                        </li>
                    </ul>
                </div>
                <div class="service_sun">
                    <h1>服务指南</h1>
                    <ul>
                        <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>
                        <li>
                            <a href="">联系客服</a>
                        </li>
                    </ul>
                </div><div class="service_sun">
                    <h1>服务指南</h1>
                    <ul>
                        <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>
                        <li>
                            <a href="">联系客服</a>
                        </li>
                    </ul>
                </div>
                <div class="service_sun">
                    <h1>服务指南</h1>
                    <ul>
                        <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>
                        <li>
                            <a href="">联系客服</a>
                        </li>
                    </ul>
                </div>
                <div class="service_sun">
                    <h1>服务指南</h1>
                    <ul>
                        <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>
                        <li>
                            <a href="">联系客服</a>
                        </li>
                    </ul>
                </div>
                
                <div class="QRcode">
                    <h1>帮助中心</h1>
                    <img src="./images/wx_cz.jpg" alt="">
                    <p>品优购客户端</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 备案栏 -->
    <div class="bottom_auter">
        <div class="bottom w">
            <ul>
                <li>
                    <a href="">关于我们</a><span>|</span>
                </li>
                <li>
                    <a href="">联系我们</a><span>|</span>
                </li>
                <li>
                    <a href="">联系客服</a><span>|</span>
                </li>
                <li>
                    <a href="">商家入驻</a><span>|</span>
                </li>
                <li>
                    <a href="">营销中心</a><span>|</span>
                </li>
                <li>
                    <a href="">手机品优购</a><span>|</span>
                </li>
                <li>
                    <a href="">友情链接</a><span>|</span>
                </li>
                <li>
                    <a href="">销售联盟</a><span>|</span>
                </li>
                <li>
                    <a href="">品优购社区</a><span>|</span>
                </li>
                <li>
                    <a href="">品优购公益</a><span>|</span>
                </li>
                <li>
                    <a href="">English Site</a><span>|</span>
                </li>
                <li>
                    <a href="">Contact U</a>
                </li>
            </ul>
            <div class="pp">
                <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱：zhanghj+itcast.cn</p>
                <p>京ICP备08001421号京公安网备案110108007702</p>
            </div>
        </div>
    </div>

</body>
</html>

register.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">
    <title>个人注册</title>
    <!-- 引入公共模块样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入iconfont.css -->
    <link rel="stylesheet" href="./fonts/iconfont2/iconfont.css">
    <!-- 引入register.css -->
    <link rel="stylesheet" href="./css/register.css">
</head>
<body>
    <!-- 头部主页logo -->
    <div class="auter w">
        <div class="header_logo">
            <a href="index.html"><img src="./images/logo.png" alt=""></a>
        </div>
        <div class="register">
            <div class="head_bar">
                <h1>注册新用户</h1>
                <p>我有账号，去<a href="">登录</a></p>
            </div>
            <div class="body_form">
                <form action="">
                    <ul>
                        <li>
                            <label for="" class="first">手机号：</label>
                            <input type="text">
                            <i class="iconfont icon-cuowu"></i>
                            <label for="" class="end">手机号码格式不正确，请重新输入</label>
                        </li>
                        <li>
                            <label for="" class="first">短信验证码：</label>
                            <input type="text">
                            <i class="iconfont icon-dui success"></i>
                            <label for="" class="success end">短信验证码输入正确</label>
                        </li>
                        <li>
                            <label for="" class="first">登录密码：</label>
                            <input type="text">
                            <i class="iconfont icon-cuowu"></i>
                            <label for="" class="end">登录密码格式不正确，请重新输入</label>
                        </li>
                        <div class="grades">
                            <label for="" class="first">安全程度</label>
                            <label for="" class="grade1">弱</label>
                            <label for="" class="grade2">中</label>
                            <label for="" class="grade3">强</label>
                        </div>
                        <li>
                            <label for="" class="first">确认密码：</label>
                            <input type="text">
                            <i class="iconfont icon-cuowu"></i>
                            <label for="" class="end">登录密码格式不正确，请重新输入</label>
                        </li>
                        <div class="checks">
                            <input type="checkbox" class="check">
                            <label for="">同意协议并注册<span>《知晓用户协议》</span></label>
                        </div>
                        <li>
                            <button>完成注册</button>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 备案栏 -->
    <div class="bottom_auter">
        <div class="bottom w">
            <ul>
                <li>
                    <a href="">关于我们</a><span>|</span>
                </li>
                <li>
                    <a href="">联系我们</a><span>|</span>
                </li>
                <li>
                    <a href="">联系客服</a><span>|</span>
                </li>
                <li>
                    <a href="">商家入驻</a><span>|</span>
                </li>
                <li>
                    <a href="">营销中心</a><span>|</span>
                </li>
                <li>
                    <a href="">手机品优购</a><span>|</span>
                </li>
                <li>
                    <a href="">友情链接</a><span>|</span>
                </li>
                <li>
                    <a href="">销售联盟</a><span>|</span>
                </li>
                <li>
                    <a href="">品优购社区</a><span>|</span>
                </li>
                <li>
                    <a href="">品优购公益</a><span>|</span>
                </li>
                <li>
                    <a href="">English Site</a><span>|</span>
                </li>
                <li>
                    <a href="">Contact U</a>
                </li>
            </ul>
            <div class="pp">
                <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱：zhanghj+itcast.cn</p>
                <p>京ICP备08001421号京公安网备案110108007702</p>
            </div>
        </div>
    </div>
</body>
</html>

一下为样式文件
base.css(公共样式)

html{
    box-sizing: border-box;
}
.w{
    width: 1200px;
    margin: 0 auto;
    color: #666;
}
a{
    text-decoration: none;
    color: #666;
}

input:focus,
button:focus{
    padding: none;
    outline: none;
}

common.less

//顶部导航栏
.top_bar{
    background-color: #F1F1F1;
    width: 100%;
    height: 31px;
    .topbar{
        display: flex;
        justify-content: space-between;
        height: 31px;
        line-height: 31px;
        font-size: 12px;
        .left_login{
            width: 230px;
            height: 100%;
            // background-color: red;
            a:hover{
                color: #CB1680;
            }
            .a2{
                color: #CB1680;
            }
        }
        .right_menu{
            width: 635px;
            height: 100%;
            // background-color: wheat;
            .rightmenu{
                li{
                    float: left;
                    i{
                        font-size: 12px;
                        font-weight: bold;
                        margin-left: 4px;
                    }
                    span{
                        margin: 0px 14px;
                        // font-weight: bold;
                    }
                }
            }
        }
    }
}

//头部搜索栏
.top_nav{
    // margin-top: 10px;
    height: 105px;
    // background-color: wheat;
    .topnav{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .center_search{
            width: 538px;
            height: 100%;
            // background: lightpink;
           
            .search{
                height: 32px;
                margin-top: 19px;
                width: 534px;
                border: 2px #B1191A solid;
                
                input{
                    float: left;
                    font-size: 14px;
                    height: 32px;
                    width: 444px;
                    border: none;
                    padding: 0px;
                    color: #757575;
                    padding-left: 10px;
                    
                }
                button{
                    float: left;
                    font-size: 16px;
                    color: white;
                    border: none;
                    padding: 0px;
                    width: 80px;
                    height: 32px;
                    background-color: #B1191A;
                }
            }
            .bt_nav{
                width: 528px;
                height: 39px;
                padding-left: 10px;
                padding-top: 10px;

                li{
                    float: left;
                    font-size: 12px;
                    margin-right: 22px;
                    a:hover{
                        color: #C81623;
                    }
                }
                li:nth-child(1){
                    a{
                        color: #C81623;
                    }
                }   
            }
        }
        .right_shop{
            position: relative;
            height: 34px;
            width: 140px;
            margin-top: -25px;
            background-color: #F7F7F7;
            border: 1px #DFDFDF solid;
            line-height: 34px;
            text-align: center;
            span{
                font-size: 13px;
            }
            .shop_car{
                color: #B1191A;
                margin-right: 6px
            }
            .arrow{
                color: #172B60;
                font-weight: bold;
                margin-left: 10px;
            }
            p{
                position: absolute;
                left: 105px;
                top: -5px;
                width: 18px;
                height: 14px;
                background-color: #E60012;
                font-size: 12px;
                text-align: center;
                line-height: 14px;
                color: white;
                border-top-left-radius: 7px;
                border-top-right-radius: 7px;
                border-bottom-right-radius: 7px;
            }
        }
    }
}

//底部公共栏
.bottom1_auter{
    height: 295px;
    background-color: #F5F5F5;
    .bottom1{
        height: 109px;
        border-bottom: 1px #CCCCCC solid;
        ul{
            display: flex;
            justify-content: space-around;
            li{
                margin-top: 30px;
                .i{
                   width: 50px;
                   height: 50px;
                   float: left; 
                   line-height: 50px;
                   background-color: #C81623;
                   text-align: center;
                   border-radius: 25px;
                   color: white;
                   margin-right: 8px;
                   i{
                       font-size: 30px;
                       font-weight: bold;
                   }
                }
                .f{
                    float: left;
                    height: 50px;
                    line-height: 17px;
                    span{
                        display: block;
                        margin-top: 7px;
                        font-size: 13px;
                        font-weight: bold;
                    }
                    p{
                        font-size: 12px;
                    }
                }
            }
        }
    }
    
    //服务指南
    .service{
        height: 164px;
        border-bottom: 1px #CCC solid;//
        
        .service_in{
            margin: 20px 50px 0px 50px;
            display: flex;
            justify-content: space-around;
            .service_sun{
                width: 200px;
                height: 142px;
                h1{
                    font-size: 16px;
                    height: 24px;
                    margin-bottom: 10px;
                }
                li{
                    font-size: 12px;
                    line-height: 18px;
                    a:hover{
                        color: #C81623;
                    }
                }
            }
            .QRcode{
                width: 90px;
                height: 142px;
                text-align: center;
                h1{
                    font-size: 16px;
                    height: 24px;
                    margin-bottom: 10px;
                }
                p{
                    font-size: 12px;
                }
            }
        }
    }
}

//尾部备案栏
.bottom_auter{
    height: 93px;
    width: 100%;
    background-color: #f5f5f5;
    padding: 20px 0px;
    .bottom{
        height: 73px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        ul{
            height: 18px;
            line-height: 18px;
            li{
                float: left;
                font-size: 12px;
                a:hover{
                    color: #C81623;
                }
                span{
                    margin: 0px 5px;
                }
            }
        }
        .pp{
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            text-align: center;
        }
    }
}

style.less(主页的样式)


// 头部菜单栏
.header_bar{
    height: 45px;
    width: 100%;
    border-bottom: 2px #B1191A solid;
    .headerbar{
        height: 45px;
        // background-color: wheat;
        line-height: 45px;
        position: relative;
        li{
            margin: 0px 25px;
            float: left;
        }
        li:hover{
            a{
                color: #B1191A;   
            }
        }
        .first,
        .first:hover{
            width: 210px;
            height: 45px;
            margin: 0px;
            text-align: center;
            background-color: #B1191A;
            a{
                color: white;
            }
        }
        
        .shop_list{
            position: absolute;
            top: 47px;
            width: 210px;
            height: 465px;
            background-color: #C81623;
            li{
                width: 198px;
                margin: 0px;
                float: none;
                padding-left: 10px;
                margin-left: 2px;
                height: 31px;
                line-height: 31px;
                a{
                    font-size: 14px;
                    color: white;
                }
            }
            li::after{
                content: '\e620';
                float: right;
                color: white;
                line-height: 31px;
                font-weight: bold;
                margin-right: 10px;
            }
            li:hover{
                background-color: white;
                a{
                    color: #B1191A;
                }
            }
        }
    }
}

//中部轮播图、快报模块
.banner_auter{
    .banner{
        height: 455px;
        margin-top: 10px;
        // background: wheat;
        .center_images{
            height: 455px;
            width: 721px;
            margin: 0px 0px 0px 220px;
            float: left;
        }
    
        .right_bulletin{
            width: 250px;
            height: 455px;
            float: right;
            // margin-top: 10px;
            //快报标题
            .title{
                height: 33px;
                border: 1px #E4E4E4 solid;
                border-bottom: 1px #E4E4E4 dotted;
                line-height: 33px;
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                .s1{
                    margin-left: 10px;
                    font-weight: bold;
                }
                .s2{
                    margin-right: 10px;
                    font-size: 12px;
                    i{
                        font-weight: bold;
                    }
                }
                .s2:hover{
                    color: #B1191A;
                }
            }
            //快报列表
            .list{
                // width: 250px;
                border-left: 1px #E4E4E4 solid;
                border-right: 1px #E4E4E4 solid;
                border-bottom: 1px #E4E4E4 solid;
                ul{
                    margin: 0px 15px;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    font-size: 13px;
                    li{
                        width: 218px;
                        height: 24px;
                        line-height: 24px;
                        overflow: inherit;
                        strong{
                            font-weight: bold;
                            margin-right: 3px;
                        }
                        a:hover{
                            color: #C81623;
                        }
                    }
                }
            }
            //方格
            .skip_list{
                width: 250px;
                height: 207px;
                // background-color: wheat;
                border-left: 1px #E4E4E4 solid;
                ul{
                    .first{
                        width: 62px;
                    }
                    li{
                        float: left;
                        width: 61px;
                        height: 68px;
                        border-right: 1px #E4E4E4 solid;
                        border-bottom: 1px #E4E4E4 solid;
                        text-align: center;
                        i{
                            height: 50px;
                            line-height: 45px;
                            font-size: 25px;
                            color: #C81623;
                        }
                        p{
                            font-size: 13px;
                        }
                    }
                }
            }
            .images{
                height: 77px;
                width: 250px;
                margin-top: 7px;
            }
        }
    }
}

//今日推荐栏
.banner2_auter{
    .banner2{
        height: 163px;
        margin-top: 12px;
        // background-color: wheat; 
        display: flex;
        
        .today{
            width: 205px;
            height: 163px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #5C5251;
        }

        .recommend{
            height: 100%;
            width: 995px;
            background-color: #EBEBEB;
            ul{
                width: 100%;
                display: flex;
                position: relative;
                li{
                    width: 163px;
                    width: 249px;
                }
                li:nth-child(1):after,
                li:nth-child(2):after,
                li:nth-child(3):after{
                    content: '';
                    position:absolute;
                    width: 1px;
                    height: 145px;
                    top: 9px;
                    background-color: #ddd;
                }
            }
        }
    }
}

// 家用电器栏
.banner3_auter{
    height: 812px;
    // background-color: rgb(248, 231, 228);
    .banner3{
        height: 391px;
        margin-top: 30px;

        // 标题
        .header_bar{
            height: 28px;
            border-bottom: 2px #B1191A solid;
            display: flex;
            justify-content: space-between;
            line-height: 28px;
            .left_title{
                font-size: 19px;
                color: #B1191A;
            }
            .right_menu{
                height: 28px;
                margin-right: 15px;
                li{
                    float: left;
                    font-size: 12px;
                    a:hover{
                        color: #B1191A;
                    }
                    span{
                        margin: 0px 15px;
                    }
                }
                li:nth-child(1){
                    a{
                        color: #B1191A;
                    }
                }
            }
        }

        // 主体
        .body_auter{
            height: 361px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            .left_list{
                width: 210px;
                height: 361px;
                background-color: #fbfbfb;
                display: flex;
                flex-wrap: wrap;
                ul{
                    height: 84px;
                    width: 210px;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-evenly;
                    li{
                        width: 85px;
                        height: 33px;
                        line-height: 33px;
                        text-align: center;
                        border-bottom: 1px #ddd solid;
                        font-size: 13px;
                    }
                }
                .imgs{
                    margin: 0px auto;
                }
            }

            .image_list{
                height: 361px;
                width: 990px;
                ul{
                    display: flex;
                    .center_img1{
                        border-right: 1px #CCCCCC solid;
                        li:nth-child(1){
                            height: 180px;
                            border-bottom: 1px #CCCCCC solid;
                        }
                    }
                    .img4{
                        border-right: 1px #CCCCCC solid;
                    }
                    .center_img2{
                        li:nth-child(1){
                            height: 180px;
                            border-bottom: 1px #CCCCCC solid;
                        }
                    }
                }
            }
        }
    }
}

// 公共底栏见common.less

list.less（列表页样式）


//搜索栏“秒杀”字体
.top_nav{
    .topnav{
        position: relative;
        .left-img{
            .ms{
                position: absolute;
                width: 86px;
                height: 27px;
                top: 38px;
                left: 191px;
                border-left: 1px #C81523 solid;
                text-align: center;
            }
        }
    }
}

// 分类栏
.nav_auter{
    width: 100%;
    height: 45px;
    border-bottom: 2px #C81523 solid;
    .nav{
        height: 45px;
        line-height: 45px;
        li{
            float: left;
            margin: 0px 25px;
            font-size: 15px;
            i{
                font-weight: bold;
            }
            a:hover{
                color: #C81523;
            }
        }
        li:nth-child(1),
        li:nth-child(2),
        li:nth-child(3){
            font-size: 17px;
            font-weight: bold;
            a{
                color: black;
            }
            a:hover{
                color: black;
            }
        }
        li:nth-child(5){
            a{
                color: #C81523;
            }
        }
    }
}

//商品列表
.body_list{
    ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
            margin-top: 15px;
            transition: 0.3s;
        }
        li:hover{
            box-shadow: 0px 10px 10px rgba(0, 0, 0, .3);
            transform: translateY(-10px);
        }
    }
}

register.less(注册页样式)

.auter{
    height: 606px;
    .header_logo{
        height: 82px;
        line-height: 82px;
        border-bottom: 2px #C81523 solid;
        a{
            height: 100%;
            display: flex;
            align-items: center;
        }
    }

    .register{
        height: 500px;
        margin-top: 20px;
        border: 1px #CCCCCC solid;
        .head_bar{
            height: 41px;
            line-height: 41px;
            border-bottom: 1px #CCCCCC solid;
            padding: 0px 10px;
            display: flex;
            justify-content: space-between;
            background-color: #ECECEC;
            h1{
                font-size: 18px;
            }
            p{
                font-size: 14px;
                a{
                    color: #C81523;
                }
            }
        }
        .body_form{
            margin: 50px 299px 0px 299px;
            height: 368px;
            font-size: 12px;
            form{
                height: 368px;
                width: 600px;
                // background-color: wheat;
                li{
                    text-align: center;
                    height: 37px;
                    vertical-align: middle;
                    margin-bottom: 20px;
                    .first{
                        display: inline-block;
                        width: 88px;
                        text-align: right;
                    }
                    input{
                        height: 35px;
                        border: 1px #CCCCCC solid;
                    }
                    i{
                        vertical-align: middle;
                        font-size: 22px;
                        color: #E12D2C;
                    }
                    .end{
                        display: inline-block;
                        height: 37px;
                        width: 204px;
                        text-align: left;
                        color: #E12D2C;
                    }
                    .success{
                        color: #39BA36;
                    }
                }
                .grades{
                    text-align: center;
                    margin-bottom: 20px;
                    padding-right: 140px;
                    label{
                        color: white;
                        padding: 0px 10px;
                    }
                    .first{
                        color: #666666;
                    }
                    .grade1{
                        background-color: #DE1111;
                    }
                    .grade2{
                        background-color: #39BA36;
                    }
                    .grade3{
                        background-color: #F79173;
                    }
                }
                .checks{
                    text-align: center;
                    margin-bottom: 20px;
                    padding-right: 150px;
                    span{
                        color: #1BA1E6;
                    }
                }

                button{
                    width: 200px;
                    height: 34px;
                    margin-top: 0px;
                    margin-top: 20px;
                    margin-right: 150px;
                    background-color: #C81623;
                    color: white;
                    padding: 0px;
                    border: 0px;
                }
            }
        }
    }
}

//去除备案栏背景色
.bottom_auter{
    background-color: white;
}

很高兴你能看到这里！
积跬步，至千里！加油！

Etui۹(･༥･´)و ̑̑
关注
专栏目录
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
VX_WJ88950106的博客
08-06 2万+
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
大学生静态HTML鲜花网页设计作品 DIV布局网上鲜花介绍网页模板代码 DW花店网站制作成品 web网页制作与实现
HTML网页设计
08-08 4276
🌹 鲜花网页设计 、🌷鲜花商城网页制作、🌼在线花店网站、💐盆栽网、花卉网等网站的设计与制作。🏷️HTML鲜花网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CS......
25个经典网站源代码
最新发布
gitblog_09723的博客
09-06 558
25个经典网站源代码 25个经典网站源代码.7z项目地址:https://gitcode.com/open-source-toolkit/5f030 简介 本仓库提供了25个经典网站的源代码，涵盖了从简约到时尚的多种设计风格。这些源代码旨在为开发者、设计师和学习者提供参考和模仿的素材，帮助大家更好地理解和掌握网站设计的精髓。 内容概览 简约风格：适合初学者和追求简洁的用户界面设计。 时尚风格：...
网趣网上购物系统HTML静态版 v2016 购物网站源码
02-26
网趣购物系统静态版支持网站一键静态生成，采用动态进度条模式生成静态，生成过程更加清晰明确，商品管理上增加淘宝数据包导入功能，与淘宝数据同步更新!采用领先的AJAX+XML相融技术，速度更快更高效！系统进行了大量的实用性更新，如优化核心算法、增加商品图片批量上传、谷歌地图浏览插入等，静态版独特的生成算法技术使静态生成过程可随意掌控，从而可以大大减轻服务器的负担，结合多种强大的SEO优化方式于一体，使系统在同类产品中具有速度更快、安全性更高、SEO效果更出色等特点。 全新的一键静态生成技术，可随时监测商品是否已生成过静态，系统采用多规则动态调用技术生成纯Html，采用领先的进度条与百分比显示模式直观显示生成过程，实时显示生成进度与生成比率。系统完美支持HTM文件显示动态数据，如对于新闻浏览量、不同会员级别的价格显示等内容均是在HTM文件内完成。我们以便捷的管理为出发点，系统可实时显示未生成的数据，独创不重复生成技术，即批量生成时仅生成未生成过的信息，大大减少生成时间，系统可单独生成网站和一键生成网站两种模式！ 支持新订单邮件自动通知功能，自动发送订单邮件通知。新版支持淘宝数据包批量导入，可实现与淘宝店同步更新!可在线编辑生成的订单，并可对订单进行文本打印输出！可对订单进行价格、数量的再修改，也可删除订单中的某商品自动重新统计。支持优惠券功能，下订单可抵消订单相应金额；支持购物一定金额免运费功能。同时支持管理员邮件群发，为方便用户购物，报价中心可以直接把商品放入购物车，用户前台购物支持商品对比功能，新版系统新增图片在线操作，支持图片预览并支持删除操作并支持删除商品自动清除图片功能，新版编辑器还支持文件、文档的在线上传。 静态版速度快、安全性高、SEO优化效果好！结合系统强大的静态生成，配合强大的关键词设置技术可以使网站推广一步到位。网趣静态版支持多种在线支付接口，管理者可以根据需要选择使用。新版系统还支持水印图片和水印文字设置功能，以及商品靠前显示功能，完美支持三级分类设置以及论坛整合等常见功能，系统拥有多套不同色调的模板可方便切换，众多智能开关项方便控制，支持数据库在线备份、恢复及下载。支持管理员任意权限划分机制。还拥有常见的商品复制、上下架管理、高级搜索以及用户等级划分等实用功能。 支持整站关键词，细分到单个商品、网站大、小、子分类、商城新闻、资讯等关键词自设功能，经过多次优化在搜索引擎优化上有了更大的飞跃，是客户网上开店最佳的解决方案。系统还支持在线QQ、MSN、旺旺等常用的在线联系，全新旺旺接口准确显示在线状态，方便与客户实时交流，网趣HTML采用KindEditor最新版作为内容编辑器，全新的编辑器效率更高，支持图片浏览与选择、图片批量上传等功能，是网上开店的首选版本。 网趣网上购物系统HTML静态版 v2016 更新日志：　 修复商品展示页导航错位 修复静态生成配置文件核心算法 修复商品分类页分页功能代码 修复购物车中商品增减数量功能 修复订单打印文本输出功能 修复新订单邮件通知自定度功能 修复网银在线支付接口更新包 修复新闻系统代码过程调用
静态购物网站
04-19
静态购物网站 php
html静态网站基于数码类电商购物网站网页设计与实现程序源代码+论文+ppt答辩
yushibing717的博客
12-27 1784
开发设计之前就必须进行充分的需求分析,及时了解用户的需求并听取用户的意见和建议,想实现什么功能,开发之后的作用意义是需求分析中最主要的,应用了平时所学的知识和查阅了许多相关资料,把理论与实践相结合,对java动态网站的开发、Web程序设计、 Dreamweaver网页制作、数据库原理有了更深的理解和认识,也学到了许多新的知识,增强了自主研究设计能力。综上所述，本系统在技术方面是可行的。静态电商网站是我们平时生活中就是在用的，一些功能都是大家很熟悉的，不用很复杂的代码的编辑，便能方便的实现我们想要的功能。
各类电商购物网站商城系统静态网页html制作（含静态网站源码）
11-07
界面图展示：https://blog.csdn.net/weixin_40228600/article/details/121189075 主要技术div、css、jquery技术，适合再次开发，网站有各个板块的内容，比如，服饰、车类，男士用品、数码产品、女性化妆品等各类网站。功能：登录、注册、订单、商品列表、购物车等相关功能，共计15个网页模板html
HTML基础知识汇总
qq_43544490的博客
08-03 3467
------------------------------------ ????操作小技巧 ❗PS操作小技巧????????❕????????????✅ 1、视图–标尺：可测量像素尺寸感叹号 2、吸管工具可吸取颜色值 3、左侧移动工具–点击侧边标尺，按住不放拖至图片边缘-----方便测量 ❗vscode快捷码字 ul>li*4{$} 得到如下 <ul> <li>1</li> <li>2</li> <li>
前端学习.
qq_53323012的博客
11-15 953
基础班学习路线 html5基础，css3基础，h5c3提高，练习项目。 网页简介 1.html html指的是超文本标记语言，它是用来描述网页的一种语言。 html不是一种编辑语言，而是一种标记语言。 标记语言是一套标记标签。 所谓超文本，有层含义： 1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。 2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超越链接文本） 2.网页 1.网站是指因特网上根据一定的规则，使用html等制作的用于展示特定内容相关的网页集合。 2.网页是网
html+css品优购静态页面项目
03-23
"html+css品优购静态页面项目"是一个典型的前端网页开发实践，主要涉及HTML和CSS两种核心技术。HTML（HyperText Markup Language）是用于创建网页的标准标记语言，而CSS（Cascading Style Sheets）则用于控制网页的...
基于HTML+CSS实现的品优购购物网站静态网页源码.zip
07-07
基于HTML+CSS实现的品优购购物网站静态网页源码.zip基于HTML+CSS实现的品优购购物网站静态网页源码.zip基于HTML+CSS实现的品优购购物网站静态网页源码.zip基于HTML+CSS实现的品优购购物网站静态网页源码.zip基于...
购物网站 html
04-12
购物网站 html
品优购项目源码
01-30
品优购项目源码,sping+springMVC+Mybatis 前端使用angular js
在线商城静态html网站源代码
06-16
在线商城静态html网站源代码
购物网站源代码
04-13
购物网站源代码，交作业的学生可以用来参考，界面简约类型
购物网站全部代码
11-14
简单购物网站的源代码，有基本的功能，学习网站开发可以下载参考
品优购项目源码（动态网页，含首页、注册页、登录页、手机列表页、手机详情页、购物车结算页、提交订单页)
04-03
这个项目包括了首页、注册页、登录页、手机列表页、手机详情页、购物车结算页以及提交订单页，能够帮助学习者将HTML、CSS和JavaScript这三种核心技术应用到实际的电商场景中。 首先，让我们来深入探讨HTML（超文本...
HTML+CSS+JavaScript实现的品优购项目源代码，包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等
12-14
在"品优购"项目中，HTML文件如`index.html`（首页）、`login.html`（登录页面）和`register.html`（注册页面）等，用于创建页面的基本布局和内容框架。这些页面可能包括导航栏、轮播图、商品列表、表单输入等元素。 ...
web期末大作业基于HTML+CSS实现的品优购购物网站静态网页源码（仿京东-期末大作业）.rar
05-19
品优购购物网站静态网页源码是基于HTML+CSS实现的一款仿京东风格的购物网站项目。该项目旨在帮助计算机相关专业的在校学生、老师以及企业员工更好地学习和掌握HTML+CSS技术，提升网页设计与制作的实践能力。 该源码...
html静态网站基于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascr
07-07
### 回答1： 根据题目要求，我会用300字来回答html静态网站基于品优购电商购物网站网页设计与实现共计3个页面的细节和流程。 品优购电商购物网站是一个非常流行的电商网站，为了设计和实现该网站的静态页面，我们可以分为三个页面：主页、商品列表页和商品详情页。 在设计主页时，我们需要包含品优购网站的logo、导航栏、搜索栏、轮播图、特色推荐商品等元素。通过HTML和CSS来布局和样式化这些元素，使主页看起来美观且用户友好。另外，我们可以使用JavaScript来实现一些交互功能，如点击导航栏跳转到相应的页面、轮播图自动切换等。 商品列表页是展示不同商品的页面。我们可以使用HTML和CSS来创建一个商品列表的结构，包括商品图片、名称、价格等信息。通过CSS来设置商品列表的样式，使它们形成一整行或一整列排列。最后，我们可以使用JavaScript来实现一些筛选和排序功能，比如根据价格、品牌或其他条件来过滤商品。 商品详情页是展示特定商品详细信息的页面。我们可以使用HTML和CSS来创建一个包含商品名称、价格、描述、图片等信息的结构。通过CSS来优化布局和样式，使商品详情页面看起来更加美观。此外，我们可以使用JavaScript来实现一些交互功能，比如选择商品数量、加入购物车等。 总结起来，在设计和实现这个静态网站的三个页面时，我们需要运用HTML、CSS和JavaScript的知识。HTML用于创建页面结构，CSS用于样式化页面，JavaScript用于实现交互功能。通过合理地运用这些技术，我们可以设计出一个美观、易用且功能齐全的品优购电商购物网站的静态网站。 ### 回答2： 品优购电商购物网站的静态网站设计与实现共计3个页面。这三个页面分别是主页、商品列表页和商品详情页。 在主页中，我们需要展示品优购电商购物网站的Logo、导航栏、轮播图和推荐商品等内容。通过HTML代码，我们可以创建一个包含这些元素的页面结构，通过CSS样式，我们可以为这些元素设置适当的样式，如颜色、字体大小和边距等。通过JavaScript，我们可以实现轮播图的自动切换、导航栏的下拉菜单以及推荐商品的动态加载等交互功能。 商品列表页显示了品优购网站的各类商品，并提供筛选和排序功能。通过HTML和CSS，我们可以创建一个商品列表的布局，并为每个商品设置适当的样式，如标题、价格和图片等。通过JavaScript，我们可以实现商品的筛选和排序功能，以及翻页和加载更多商品等交互操作。 商品详情页展示了特定商品的详细信息和购买选项。通过HTML和CSS，我们可以创建一个商品详情页面的布局，并设置适当的样式，如商品标题、图片和描述等。通过JavaScript，我们可以实现商品数量的增减、加入购物车和立即购买等交互功能。 这三个页面的设计和实现基于HTML、CSS和JavaScript技术，通过合理的页面结构、样式和交互功能，提供给用户一个良好的购物体验。 ### 回答3： 品优购是一家电商购物网站，它的网页设计与实现共计有三个页面，即首页、商品列表页和商品详情页。这些页面是基于HTML、CSS和JavaScript开发的。 1. 首页： 首页是品优购的门面，它需要简洁明了地展示品优购的特色和优势。主要包括顶部导航栏、搜索框、轮播图和商品分类展示。通过HTML和CSS来构建页面的基本结构和样式，并利用JavaScript来实现轮播图的自动切换和商品分类的展开与收起。 2. 商品列表页： 商品列表页用于展示品优购的全部商品，以供用户选择购买。该页面需要有商品的缩略图、名称、价格等基本信息，并且可以根据用户的选择进行排序和筛选。通过HTML和CSS来构建商品列表的布局和样式，并利用JavaScript来实现价格的排序和筛选功能。 3. 商品详情页： 商品详情页用于展示某个具体商品的详细信息和购买选项。该页面需要展示商品的大图、名称、价格、描述等详细信息，并提供购买按钮和数量选择框。通过HTML和CSS来构建商品详情页的布局和样式，并利用JavaScript来实现数量的增减和购买按钮的点击事件处理。 这三个页面的设计与实现需要充分考虑用户体验，确保页面的简洁、清晰和易用。同时，还需要注意网页的响应式设计，使其在不同屏幕尺寸下都能良好展示。使用HTML、CSS和JavaScript的组合可以实现丰富的网页交互效果，给用户带来良好的购物体验。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值