天猫页面之一（公共页面）

最新推荐文章于 2022-07-29 20:55:39 发布

sundaxiao

最新推荐文章于 2022-07-29 20:55:39 发布

阅读量2.1k

点赞数 4

本文链接：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

最低0.47元/天解锁文章