品优购
HTML CSS 源码
网页源码篇
发布日期:   2020-11-25
作者:   少年
文章字数:   3.5k
阅读时长:   18 分
阅读次数:  

品优购网上商城是一个综合性的 B2B2C 平台，类似京东商城、天猫商城。网站采用商家入驻的模式，商家入驻平台提交申请，有平台进行资质审核，审核通过后，商家拥有独立的管理后台录入商品信息。商品经过平台审核后即可发布。以下是静态源码及展示页面。

网盘源码链接：https://pan.baidu.com/s/13uvedoLfu8MYJy_ceaCWUQ

示例图

image-20201125173726050

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>品优购-正品低价、品质保障、配送及时、轻松购物！</title>
         <meta name="description" content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个            品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
         <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
        <link rel="shortcut icon" href="favicon.ico" />
        <link rel="stylesheet"  href="css/base.css "/>
        <link rel="stylesheet"  href="css/common.css"/>
        <link rel="stylesheet"  href="css/index.css"/>
    </head>
    <body>
        <section class="top-box">
            <div class="center">
                <!-- <span>品优购欢迎您！&nbsp; 请登录 &nbsp;<a href="#">免费注册</a> </span>
                <ul>
                    <li>我的订单 </li>
                    <li></li>
                    <li>我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li>关注品优购</li>
                    <li></li>
                    <li>客户服务</li>
                    <li></li>
                    <li>网站导航</li>
                </ul> -->
                <div class="left" >
                    <ul>
                        <li>品优购欢迎您！&nbsp</li>
                        <li>请登录&nbsp<a href="#">免费注册</a></li>
                    </ul>
                </div>
                <div class="right" >
                    <ul>
                        <li>我的订单 </li>
                        <li ></li>
                        <li class="i">我的品优购</li>
                        <li ></li>
                        <li>品优购会员</li>
                        <li ></li>
                        <li>企业采购</li>
                        <li ></li>
                        <li class="i">关注品优购</li>
                        <li ></li>
                        <li class="i">客户服务</li>
                        <li ></li>
                        <li class="i">网站导航</li>
                    </ul>
                </div>
            </div>

        </section>
    <header class="header center">
        <div class="logo">
            <h1>
                <a href="index.html">品优购</a>
            </h1>
        </div>
        <div class="search">
            <input type="search" / placeholder="语言开发">
            <button>搜索</button>
        </div>
        <div class="search-o">
            <a href="#" class="red">优惠购首发 </a>
            <a href="#">亿元优惠</a>
            <a href="#">9.9元团购 </a>
            <a href="#">美满99减30 </a>
            <a href="#">办公用品</a>
            <a href="#">电脑</a>
            <a href="#">通信</a>

        </div>
        <div class="shoping">
            我的购物车
            <i class="count">8</i>
        </div>
    </header>
    <nav class="nav">
        <div class="center">
            <div class="nav-left">
                <div class="dt">
                    全部商品分类 
                </div>
                <div class="dd">
                    <ul>
                        <li><a href="#">家用电器</a></li>
                        <li><a href="#">手机、</a><a href="#">数码、</a><a href="#">通信</a></li>
                        <li><a href="#">电脑、</a><a href="#">办公</a></li>
                        <li><a href="#">家居、</a><a href="#">家具、</a><a href="#">家装、</a><a href="#">厨具</a></li>
                        <li><a href="#">男装、</a><a href="#">女装、</a><a href="#">童装、</a><a href="#">内衣</a></li>
                        <li><a href="#">个户化妆、</a><a href="#">清洁用品、</a><a href="#">宠物</a></li>
                        <li><a href="#">鞋靴、</a><a href="#">箱包、</a><a href="#">珠宝、</a><a href="#">奢侈品</a></li>
                        <li><a href="#">运动户外、</a><a href="#">钟表</a></li>
                        <li><a href="#">汽车、</a><a href="#">汽车用品</a></li>
                        <li><a href="#">母婴、</a><a href="#">玩具乐器</a></li>
                        <li><a href="#">食品、</a><a href="#">酒类、</a><a href="#">、生鲜</a><a href="#">特产</a></li>
                        <li><a href="#">医药保健</a></li>
                        <li><a href="#">图书、</a><a href="#">音像、</a><a href="#">电子书</a></li>
                        <li><a href="#">彩票、</a><a href="#">旅行、</a><a href="#">充值、</a><a href="#">票务</a></li>
                        <li><a href="#">理财、</a><a href="#">众筹、</a><a href="#">白条、</a><a href="#">保险</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav-rigth">
                <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>
                </ul>
            </div>
        </div>
    </nav>
    <div class="main center">
        <div class="main-left">
            <div>
                <ul>
                    <li><img src="upload/main.png"></li>
                </ul>
            </div>
        </div>
        <div class="main-right">
            <div>
                <div class="main-right-top">
                    <div class="main-right-top-header">
                        <h4>品优购快报</h4>
                        <a href="#">更多&nbsp;&gt;</a>
                        </div>
                        <div class="cc"></div>
                    <div class="main-right-top-body"><ul>
                    <li><strong>[特惠]</strong>备战开学季全民半价购数码</li>
                    <li><strong>[公告]</strong>品优稳占家电网购六成份额</li>
                    <li><strong>[特惠]</strong>百元中秋全品类礼劵限量领</li>
                    <li><strong>[公告]</strong>上品优生鲜享阳澄湖大闸蟹</li>
                    <li><strong>[特惠]</strong>每日享折扣品优品质游</li>
                    </ul></div>
                </div>

                <div class="main-right-center">
                    <ul>
                        <li><i></i><p>话费</p></li>
                        <li><i></i><p>机票</p></li>
                        <li><i></i><p>电影院</p></li>
                        <li><i></i><p>游戏</p></li>
                        <li><i></i><p>彩票</p></li>
                        <li><i></i><p>加油卡</p></li>
                        <li><i></i><p>酒店</p></li>
                        <li><i></i><p>火车票</p></li>
                        <li><i></i><p>众筹</p></li>
                        <li><i></i><p>理财</p></li>
                        <li><i></i><p>礼品卡</p></li>
                        <li><i></i><p>白条</p></li>
                    </ul>
                </div>
                <div class="main-right-bot">
                    <img src="upload/szj.png">
                </div>

            </div>
        </div>
    </div>




    <div class="toer center">
        <div class="toer-o">
            <img src="upload/tui.png" />
        </div>
        <div class="toer-i">
            <ul>
                <li><img src="upload/recom_03.jpg" /></li>
                <!-- <li><img src="upload/recom_03.jpg" /></li>
                <li><img src="upload/recom_03.jpg" /></li>
                <li><img src="upload/recom_03.jpg" /></li> -->
            </ul>
        </div>
    </div>



    <footer class="footer">
        <div class="center" >
            <div class="footer-box">
                <ul>
                    <li><h5></h5>
                    <div class="footer-box-o">
                        <h4>正品保障</h4>
                        <p>正品保障，提供发票</p>
                    </div></li>
                    <li><h5></h5><div class="footer-box-o">
                        <h4>极速物流</h4>
                        <p>急速物流，急速送达</p>
                    </div></li>
                    <li><h5></h5><div class="footer-box-o">
                        <h4>无忧售后</h4>
                        <p>7天无理由退换货</p>
                    </div></li>
                    <li><h5></h5><div class="footer-box-o">
                        <h4>特色服务</h4>
                        <p>私人定制家电套餐</p>
                    </div></li>
                    <li><h5></h5><div class="footer-box-o">
                        <h4>帮助中心    </h4>
                        <p>您的购物指南</p>
                    </div></li>
                </ul>
            </div>
        </div>
        <div class="footer-tow-box center">
            <dl>
                <dt>购物指南</dt>
                <dd>购物流程</dd>
                <dd>会员介绍</dd>
                <dd>生活旅行/团购</dd>
                <dd>常见问题</dd>
                <dd>大家电</dd>
                <dd>联系客服</dd>
            </dl>
            <dl>
                <dt>配送方式</dt>
                <dd>上门自提</dd>
                <dd>211限时达</dd>
                <dd>配送服务查询</dd>
                <dd>配送费收取标准</dd>
                <dd>海外配送</dd>
            </dl>
            <dl>
                <dt>支付方式</dt>
                <dd>货到付款</dd>
                <dd>在线支付</dd>
                <dd>分期付款</dd>
                <dd>邮局汇款</dd>
                <dd>公司转账</dd>
            </dl>
            <dl>
                <dt>售后服务    </dt>
                <dd>售后政策</dd>
                <dd>价格保护</dd>
                <dd>退款说明</dd>
                <dd>返修/退换货</dd>
                <dd>取消订单</dd>
            </dl>
            <dl>
                <dt>特色服务</dt>
                <dd>夺宝岛</dd>
                <dd>DIY装机</dd>
                <dd>延保服务</dd>
                <dd>品优购E卡</dd>
                <dd>品优购通信</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <img src="images/wx_cz.jpg">
                <dd>品优购客户端</dd>

            </dl>
        </div>
    <div class="center footer-end">
        <div class="footer-end-o"><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>  | <a href="#">English Site </a>  | <a href="#">Contact U</a> 

</div>
        <div class="footer-end-i">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: kuiler+itter.com
<p>京ICP备08001421号京公网安备110108007702</p></div>
    </div>
    </footer>
    </body>
</html>

index.css

body .main {
    width: 980px;
    height: 455px;
    margin-left: 380px;
    margin-top: 12px;
}
.main-left {
    float: left;
    width: 720px;
    height: 455px;
    background-color: #B1191A;
}
.main-right {
    float: right;
    width: 250px;
    height: 455px;
}
.main-right-top {
    height: 165px;
}
.main-right-center {
    border: 1px solid #e4e4e4;
    border-top: 0;
    height: 208px;
}
.main-right-bot {
    height: 75px;
    background-color: black;
    margin-top: 5px;
}
.main-right-top-header h4 {
    float: left;
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    padding-left: 15px;
    border-bottom: 1px dotted #e4e4e4;
}
.main-right-top-header a {
    float: right;
    height: 32px;
    font-size: 14px;
    line-height: 32px;
    padding-right: 17px;
}
.cc {
    clear: both;
}
.main-right-top-body li{
    font-size: 14px;
    margin: 5px 0px 5px 15px;
}
.main-right-top {
    border: 1px solid #e4e4e4;
}
.main-right-center ul li i {
    display: inline-block;

}
.main-right-center ul li {
    float: left;
    width: 63px;
    height: 70px;
    border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    text-align: center;
}
.main-right-center ul {
    width: 260px;
}
.main-right-center {
    overflow: hidden;
}
.main-right-center ul li i {
    width: 23px;
    height:26px ;
    background: url(../images/icons.png) no-repeat -18px -14px;
    margin-top: 14px;
}
.main-right-center ul li p {
    font-size: 14px;
}
.toer {
    height: 162px;
    background-color: #ebebeb;
    margin-top: 12px;
}
.toer .toer-o {
    float: left;
    width: 206px;
    height: 100%;
    background-color: #5c5251;
    text-align: center;
}
.toer .toer-o img {
    margin-top: 30px;
}
.toer-i {
    float: left;
    width: 248px;
    height: 163px;
}
.toer-i ui li {
    position: relative;
    float: left;
}
.toer-i ui li::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 0px;
    height: 143px;
    width: 1px;
    background-color: #dddddd;
}

common.css

.top-box {
    height: 30px;
    background-color: #f1f1f1;
}
.center {
    width: 1200px;
    margin: 0 auto;
}
/* .center span {
    height: 30px;
    line-height: 30px;
}
.center  ul li{
    float: right;
} */
.left {
    float: left;
}
.right {
    float: right;
}
.left ul li {
    height: 30px;
    line-height: 30px;
    float: left;
}
.right ul li {
    height: 30px;
    line-height: 30px;
    float: right;
}
 .li {
    margin: 0 15px;
}
.right ul li:nth-child(even) {
    height: 12px;
    width: 1px;
    background-color: #666666;
    margin: 10px 13px;
}
.left ul li a {
    color: #c81623;
}
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?m56hx0');
  src:  url('../fonts/icomoon.eot?m56hx0#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?m56hx0') format('truetype'),
    url('../fonts/icomoon.woff?m56hx0') format('woff'),
    url('../fonts/icomoon.svg?m56hx0#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.i::after {
    font-family: 'icomoon';
    content: '\e999';
    margin: 10px 5px;
    color: #666666;

}
.header {
    position: relative;
    height: 105px;
}
.logo {
    top: 25px;
    position: absolute;
    width: 171px;
    height: 61px;
}
.logo h1 a {
    display: block;
    width: 171px;
    height: 61px;
    font-size: 0;
    background: url(../images/logo.png);
}
.search {
    position: absolute;
    left: 348px;
    top: 25px;
    width: 539px;
    height: 35px;
    border: 2px solid #b1191a;
}
.search input {
    float: left;
    width: 455px;
    height: 32px;
    border: 0;
}
.search button {
    float: left;
    width: 80px;
    height: 32px;
    border: 0;
    background-color: #b1191a;
    font-size: 16px;
    color: #ffffff;
}
.search-o {
    position: absolute;
    left: 348px;
    top: 67px;
}
.search-o a {
    margin: 0 10px;
}
.red {
    color: #b1191a;
}
.shoping {
    width: 140px;
    height: 36px;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
    position: absolute;
    left: 997px;
    top: 25px;
    font-size: 12px;
    line-height: 36px;
    text-align: center;
}
.count {
    position: absolute;
    left: 105px;
    top: -5px;
    width: 16px;
    line-height: 13px;
    height: 13px;
    color: #fefefe;
    background-color:  #e60012;
    border-radius: 7px 7px 7px 0;
}
.nav {
    height: 48px;
    border-bottom: 2px solid #b1191a;
}
.nav .nav-left{
    float: left;
    width: 210px;
    height: 47px;
    background-color: #b1191a;
}
.nav .nav-rigth{
    float: left;
}
.nav .nav-left .dt {
    line-height: 47px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
}
.nav .nav-left .dd{
    width: 210px;
    height: 467px;
    margin-top: 2px;
    background-color: #c81623;
}
.nav .nav-left .dd ul li {
    position: relative;
    width: 209px;
    height: 31px;
    font-size: 14px;
    line-height: 31px;
    padding-left: 12px;
    margin-left: 2px;
}
.nav .nav-left .dd ul li a {
    color: #ffffff;
}
.nav .nav-left .dd ul li:hover {
    background-color: #f7f7f7;
}
.nav .nav-left .dd ul li:hover a {
    color: #c81623;
}
.nav .nav-left .dd ul li::after {
    content: '>';
    color: #ffffff;
    position: absolute;
    top: 2px;
    right: 11px;
}
.nav-rigth ul li  {
    float: left;
}
.nav-rigth ul li a{
    display: block;
    line-height: 47px;
    height: 47px;
    margin: 0 25px;
    font-size: 16px;
}
.footer {
    height: 417px;
    background-color: #f5f5f5;
}
.footer-box {
    padding-top: 30px 0;
    height: 80px;
    border-bottom: 1px solid #ededed;
}
.footer-box ul li {
    float: left;
    width: 240px;
    height: 50px;
    padding-left: 35px;
    padding-top: 10px;
}
.footer-box ul li h5 {
    float: left;
    width: 50px;
    height: 50px;
    background: url(../images/icons.png) no-repeat -252px -2px;
}
.footer-box ul li h5 .5{
    float: left;
    width: 50px;
    height: 50px;
    background: url(../images/icons.png) no-repeat -252px -2px;
} */
.footer-box-o h4 {
    font-size: 14px;
}
.footer-box-o p {
    font-size: 12px;
}
.footer-box .footer-box-o {
    margin: 5px 10px;
}
.footer-tow-box {
    height: 190px;
    border-bottom: 1px solid #ededed;
}
.footer-tow-box dl {
    float: left;
    margin: 0 60px;
}
.footer-tow-box dt{
    font-size: 16px;
    margin-bottom: 10px;
}
.footer-tow-box  dd{
    font-size: 12px;
}
.footer-end {
    margin-top: 30px;
    text-align: center;
}
.footer-end-o {
    margin-bottom: 15px;
}
.footer-end-i {
    line-height: 28px;
}
.footer-end-o a {
    margin: 0 10px;
}

base.css

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal;
}
/* 去掉li 的小圆点 */
li {
    list-style: none;
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle;

}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer;
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #c81623;
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    outline: none;
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666;
}

.hide,
.none {
    display: none;
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0;
}

.clearfix {
    *zoom: 1;
}
赏

  转载请注明: 奇遇少年 品优购

 上一篇
Hexo博客使用gulp压缩静态资源进行优化 Hexo博客使用gulp压缩静态资源进行优化
Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用
2021-01-06 博客篇
Hexo gulp
下一篇 
学成在线源码下载 学成在线源码下载
学成在线借鉴了MOOC(大型开放式网络课程，即MOOC(massive open online courses))的设计思想，是一 个提供IT职业课程在线学习的平台，它为即将和已经加入IT领域的技术人才提供在线学习服务，用户通过在线学 习、
2020-11-19 网页源码篇
HTML 源码 css
  目录