天猫网站公共页面设计与实现-优快云博客

本文链接：https://blog.youkuaiyun.com/sunxiaofre/article/details/72985922

本文介绍了天猫网站中公共页面的设计，包括置顶导航栏、搜索栏和页脚栏，详细阐述了它们的布局和代码实现。通过将公共部分抽象为独立文件，可以提高开发效率，降低维护成本。

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

要完成的页面

首页
分类页
查询结果页
产品详情页
结算页面
支付页面
支付成功页面
购物车页面
我的订单页面
确认收货页面
确认收货成功页面
进行评价页面
登陆页面
注册页面

公共页面

公共页面：每个页面都有的内容。比如页头，页脚，搜索框等。
公共页面也叫include文件。在真正开发网站的时候(不仅仅使用html和css，比如采用JSP技术)，会单独设计这样的网页，然后在不同的主体网页，比如首页，产品页，搜索查询结果页去包含这些网页。
公共页面就只需要做一遍就行了，其他页面重复使用这些网页，节约开发时间、降低开发、维护成本。
分析：都有哪些公共页面呢？？
- 以首页为例，它是由三个公共文件和一个内容文件构成。三个公共文件：置顶导航页、搜索栏页、页脚页。

置顶导航栏

效果
布局
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>置顶导航</title>
    <script src="../../bootstrap/js/jquery/2.0.0/jquery.min.js"></script>
    <script src="../../bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap/3.3.6/bootstrap.min.css">
    <link rel="stylesheet" href="nav.css">
</head>
<body>
    <nav class="top">
        <a href="#">
            <span class="glyphicon glyphicon-home redColor"></span>
            天猫首页
        </a>
        <span>喵，欢迎来天猫</span>
        <a href="#">请登陆</a>
        <a href="#">免费注册</a>
        <span class="pull-right">
            <a href="#">我的订单</a>
            <a href="#">
                <span class="glyphicon glyphicon-shopping-cart redColor"></span>
                购物车
                <strong>0</strong>
                件
            </a>
        </span>
    </nav>
</body>
</html>

body {
    font-size: 12px;
    font-family: Arial;
}
a {
    color: #999;
}
.redColor{
    color: #c40 !important;;
}
nav.top{
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #e7e7e7;
}
nav.top span, nav.top a {
    color: #999;
    margin: 0 10px 0 10px;
}
nav.top a:hover {
    color: #c40;
    text-decoration: none;
}

搜索栏

效果
布局
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>置顶导航</title>
    <script src="../../bootstrap/js/jquery/2.0.0/jquery.min.js"></script>
    <script src="../../bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap/3.3.6/bootstrap.min.css">
    <link rel="stylesheet" href="search.css">
</head>
<body>
    <!--
        布局：
        搜索栏所在的div是一个居中的div
        这个居中的div，包含一个子div，其中是 平衡车 | 扫地机器人 | 原汁机 | 冰箱 等信息
        左侧的图片使用绝对定位的方式，这样就可以很方便的做到图片和搜索栏div水平放置的效果
    -->
    <div>
        <a href="#"><img class="logo" src="../../images/site/logo.gif" alt="logo"></a>
        <div class="searchDiv">
            <input type="text" placeholder="时尚男鞋&nbsp;太阳镜" name="keyword">
            <button class="searchButton" type="submit">搜索</button>
            <div class="searchBelow">
                <span><a href="#">平衡车</a><span>|</span></span>
                <span><a href="#">扫地机器人</a><span>|</span></span>
                <span><a href="#">原汁机</a><span>|</span></span>
                <span><a href="#">冰箱</a></span>
            </div>
        </div>
    </div>
    <div style="height: 50px;"></div>
</body>
</html>

    /*搜索栏*/
    div.searchDiv {
        background-color: #c40000;
        width: 400px;
        height: 40px;
        margin: 50px auto;
        padding: 1px;
        display: block;
    }
    /*搜索栏中的输入框*/
    div.searchDiv input {
        width: 275px;
        height: 36px;
        margin: 1px;
        border: 1px solid transparent;
        outline: none;
    }
    /*搜索栏中的按钮*/
    div.searchDiv button {
        width: 110px;
        border: 1px solid transparent;
        background-color: #c40000;
        color: white;
        font-size: 20px;
        font-weight: bold;
    }
    /*搜索栏下方的关键字*/
    div.searchBelow {
        margin-top: 3px;
        margin-left: -20px;
    }
    /*关键字之间的竖线*/
    div.searchBelow span {
        color: #999;
    }
    /*关键字超链接*/
    div.searchBelow a {
        padding: 0 20px 0 20px;
        font-size: 14px;
    }
    /*logo图片*/
    img.logo {
        position: absolute;
        left: 0;
        top: 30px;
        z-index: -1;
    }
    /*整个body*/
    body {
        font-size: 12px;
        font-family: Arial;
    }
    /*所有链接*/
    a {
        color: #999;
    }
    /*鼠标悬停*/
    a:hover {
        color: #c40000;
        text-decoration: none;
    }

页脚栏

效果
布局
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页脚</title>
    <script src="../../bootstrap/js/jquery/2.0.0/jquery.min.js"></script>
    <script src="../../bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap/3.3.6/bootstrap.min.css">
    <link rel="stylesheet" href="footer.css">
</head>
<body>
    <div style="display: block;" class="footer" id="footer">
        <!--上半部分-->
        <div class="footer_ensure" id="footer_ensure">
            <a href="#">
                <img src="../../images/site/ensure.png">
            </a>
        </div>
        <div class="footer_desc" id="footer_desc">
            <div class="descColumn">
                <span class="descColumnTitle">购物指南</span>
                <a href="#">免费支付</a>
                <a href="#">开头支付宝</a>
                <a href="#">支付宝充值</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">天猫保障</span>
                <a href="#">发票保障</a>
                <a href="#">售后规则</a>
                <a href="#">缺货赔付</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">支付方式</span>
                <a href="#">快捷支付</a>
                <a href="#">信用卡</a>
                <a href="#">支付宝</a>
                <a href="#">蚂蚁花呗</a>
                <a href="#">货到付款</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">商家服务</span>
                <a href="#">商家入驻</a>
                <a href="#">商家中心</a>
                <a href="#">天猫智库</a>
                <a href="#">物流服务</a>
                <a href="#">喵言喵语</a>
                <a href="#">运营服务</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">手机天猫</span>
                <a href="#">
                    <img src="../../images/site/ma.png">
                </a>
            </div>
        </div>
        <div style="clear: both;"></div>

        <!--下半部分-->
        <img class="cateye" src="../../images/site/cateye.png">
        <div class="copyright" id="copyright">
            <div class="white_link">
                <a href="#">关于天猫</a>
                <a href="#">帮助中心</a>
                <a href="#">开放平台</a>
                <a href="#">诚聘英才</a>
                <a href="#">联系我们</a>
                <a href="#">网站合作</a>
                <a href="#">房率声明及隐私权政策</a>
                <a href="#">知识产权</a>
                <a href="#">廉政举报</a>
                <a href="#">规则意见征集</a>
            </div>
            <div class="white_link">
                <a href="#">阿里巴巴集团</a><span class="slash">|</span>
                <a href="#">淘宝网</a><span class="slash">|</span>
                <a href="#">天猫</a><span class="slash">|</span>
                <a href="#">聚划算</a><span class="slash">|</span>
                <a href="#">全球速卖通</a><span class="slash">|</span>
                <a href="#">1688</a><span class="slash">|</span>
                <a href="#">阿里妈妈</a><span class="slash">|</span>
                <a href="#">飞猪</a><span class="slash">|</span>
                <a href="#">阿里云计算</a><span class="slash">|</span>
                <a href="#">YunOS</a><span class="slash">|</span>
                <a href="#">阿里通信</a><span class="slash">|</span>
                <a href="#">高德</a><span class="slash">|</span>
                <a href="#">UC</a><span class="slash">|</span>
                <a href="#">友盟</a><span class="slash">|</span>
                <a href="#">虾米</a><span class="slash">|</span>
                <a href="#">阿里星球</a><span class="slash">|</span>
                <a href="#">来往</a><span class="slash">|</span>
                <a href="#">钉钉</a><span class="slash">|</span>
                <a href="#">支付宝</a>
            </div>
            <div class="license">
                <div>
                    <span>增值电信业务经营许可证： 浙B2-20110446</span>
                    <span>网络文化经营许可证：浙网文[2015]0295-065号</span>
                    <span>12318举报</span>
                </div>
                <div>
                    <span>互联网药品信息服务资质证书编号：浙-（经营性）-2017-0005</span>
                    <span><img src="//img.alicdn.com/tps/TB1yEqRPXXXXXXPXpXXXXXXXXXX-20-20.png" alt="">浙公网安备 33010002000120号</span>
                </div>
                <div class="copyRightYear">© 2003-2017 TMALL.COM 版权所有</div>
                <div>
                    <img src="../../images/site/copyRight1.jpg">
                    <img src="../../images/site/copyRight2.jpg">
                </div>
            </div>
        </div>

    </div>
</body>
</html>

    /*上半部分*/
    /*页脚div*/
    div.footer {
        margin: 0;
        border-top: 1px solid #E7E7E7;
    }
    /*品质保障图片所在div*/
    div.footer_ensure {
        margin: 24px 0;
        text-align: center;
    }
    /*购物指南等超链接所在div*/
    div.footer_desc {
        border-top: 1px solid #E7E7E7;
        padding-top: 30px;
        margin: 0 20px;
    }
    /*五列*/
    div.footer_desc div.descColumn {
        width: 20%;
        float: left;
        padding-left: 15px;
    }
    /*每列title*/
    div.footer_desc div.descColumn span.descColumnTitle {
        color: #646464;
        font-size: 16px;
        font-weight: bold;
    }
    /*超链接*/
    div.footer_desc a {
        display: block;
        padding-top: 3px;
    }

    /*下半部分*/
    /*页脚2 div*/
    div.copyright {
        background-color: black;
        border-top: 2px solid #c40000;
    }
    /*竖线*/
    div.copyright span.slash {
        color:  white;
    }
    /*超链接白色*/
    div.footer div.copyright div.white_link a {
        color: white;
        padding: 0 5px;
    }
    /*链接之间的间隙*/
    div.footer div.copyright div.white_link {
        padding: 10px 0;
        margin-left: 10px;
    }
    /*关于经营许可证部分的div*/
    div.license {
        margin-left: 10px;
        padding-bottom: 30px;
    }
    /*经营许可证部分的字体颜色*/
    div.license span {
        color: #a4a4a4;
        margin: 0 10px;
    }
    /*版本信息的年月*/
    div.license div.copyRightYear {
        margin: 10px;
        color: #686868;
    }
    div.license img {
        margin: 0 10px;
    }
    /*猫耳朵图片*/
    img.careye{
        margin-left: 20px;
    }

    /*统一样式*/
    body {
        font-size: 12px;
        font-family: Arial;
    }
    a {
        color: #999;
    }
    a:hover {
        color: #c40000;
        text-decoration: none;
    }