天猫页面之一（公共页面）
来源：互联网 发布：ps是什么软件 编辑：程序博客网 时间：2024/04/30 06:04
要完成的页面
- 首页
- 分类页
- 查询结果页
- 产品详情页
- 结算页面
- 支付页面
- 支付成功页面
- 购物车页面
- 我的订单页面
- 确认收货页面
- 确认收货成功页面
- 进行评价页面
- 登陆页面
- 注册页面
公共页面
- 公共页面：每个页面都有的内容。比如页头，页脚，搜索框等。
- 公共页面也叫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="时尚男鞋 太阳镜" 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; }阅读全文
0 0
- 天猫页面之一（公共页面）
- 公共页面
- yii 公共页面部分
- 44、公共页面PublicActivity
- thinkphp 引入公共页面
- 开发页面公共模块
- BasePager,公共页面
- html页面公共样式
- angular公共页面提供公共服务（例如获取小区）
- Tapestry - 页面加载之一
- 页面性能测试之一
- 页面性能测试之一
- 更改某个页面的公共页面
- html静态页面引入公共html页面
- html静态页面引入公共html页面
- html静态页面引入公共html页面
- 前端页面定义公共变量
- 网站开发（五）分离后台公共页面
- 23.6 23.7 Web environment Web环境变量读取
- JavaMail笔记
- 通过NFS方式进行源码级别的共享进行多台机器间的部署。
- Initialization error Could not load "D:\install\PLSQL\instantclient_11_2\oci
- 用递归方法解析XML
- 天猫页面之一（公共页面）
- bzoj 4653: [Noi2016]区间 （线段树）
- 六款值得推荐的android（安卓）开源框架简介
- android Toolbar浅谈
- Maven 创建项目
- 96-100.个人练习
- Android基础之Android项目目录结构
- SQL提供的安全性与完整性
- Gate 7.2学习笔记（二）
