品优购静态页面

最新推荐文章于 2024-09-09 09:35:48 发布

朵拉朵拉

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量28

点赞数

文章标签： html5 javascript html css jquery css3 xhtml

本文链接：https://blog.csdn.net/m0_62450352/article/details/132794482

版权

html部分（包括了首页，登陆页面，手机详情页）

首页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
    <div class="nav">
        <div class="w">
            <div class="left">品优购欢迎您！请登录 <a href="./regist.html" class="red">免费注册</a></div>
            <div class="right">
                <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>
        </div>
    </div>
    <div class="search w">
        <div class="left"><img src="./images/logo.png" alt=""></div>
        <div class="middle">
            <div class="top ">
                <input type="text" value="语言开发">
                <div class="hzi">搜索</div>
            </div>
            <div class="bottom">
                <ul>
                    <li>优惠购首发</li>
                    <li>亿元优惠</li>
                    <li>传智超市</li>
                    <li>办公用品</li>
                    <li>全球购</li>
                    <li>电脑</li>
                    <li>通信</li>

                </ul>
            </div>
        </div>
        <div class="right">
            <div class="car">我的购物车<div class="count">6</div>
            </div>
        </div>
    </div>
    <div class="nav2">
        <div class="w">
            <div class="left">
                <div class="top">全部商品分类</div>
                <div class="bottom">
                    <ul>
                        <li><a href="#">家用电器<span>></span></a></li>
                        <li><a href="./goods.html">手机、数码、通信<span>></span></a> </li>
                        <li><a href="#">电脑、办公<span>></span></a> </li>
                        <li><a href="#">家居、家具、家装、厨具<span>></span></a> </li>
                        <li><a href="#">男装、女装、童装、内衣<span>></span></a> </li>
                        <li><a href="#">个户化妆、清洁用品、宠物<span>></span></a> </li>
                        <li><a href="#">鞋靴、箱包、珠宝、奢侈品<span>></span></a> </li>
                        <li><a href="#">运动户外、钟表<span>></span></a> </li>
                        <li><a href="#">汽车、汽车用品<span>></span></a> </li>
                        <li><a href="#">母婴、玩具乐器<span>></span></a> </li>
                        <li><a href="#">食品、酒类、生鲜、特产<span>></span></a> </li>
                        <li><a href="#">医药保健<span>></span></a> </li>
                        <li><a href="#">图书、音像、电子书<span>></span></a> </li>
                        <li><a href="#">彩票、旅行、充值、票务<span>></span></a> </li>
                        <li><a href="#">理财、众筹、白条、保险<span>></span></a> </li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <ul>
                    <li>服装城</li>
                    <li>美妆馆</li>
                    <li>传智超市</li>
                    <li>全球购</li>
                    <li>闪购</li>
                    <li>团购</li>
                    <li>拍卖</li>
                    <li>有趣</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="nav3 w">
        <div class="left"><img src="../品优购/images/focus.jpg" alt=""></div>
        <div class="right">
            <div class="new">
                <div class="word">
                    <div class="top">
                        <h4>品优购快报</h4>
                        <p> 更多&nbsp;></p>
                    </div>
                    <div class="bottom">
                        <ul>
                            <li><a href="#">【特惠】活旅行团购爆款耳机5折秒！</a></li>
                            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
                            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
                            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
                            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
                        </ul>
                    </div>
                </div>
                <div class="logo">
                    <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>
            <div class="pic"><img src="../品优购/images/bargain.jpg" alt=""></div>
        </div>
    </div>
    <div class="nav4 w">
        <div class="left">
            <img src="../品优购/images/clock.png" alt="">
            <p>今日推荐</p>
        </div>
        <div class="right">
            <ul>
                <li><img src="../品优购/images/pic.jpg" alt=""></li>
                <li><img src="../品优购/images/pic.jpg" alt=""></li>
                <li><img src="../品优购/images/pic.jpg" alt=""></li>
                <li><img src="../品优购/images/pic.jpg" alt=""></li>
            </ul>
        </div>
    </div>
    <div class="nav5 w">
        <div class="top">
            <h3>家用电器</h3>
            <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>
        <div class="bottom">
            <div class="A">
                <div class="top">
                    <ul>
                        <li>节能补贴</li>
                        <li>节能补贴</li>
                        <li>节能补贴</li>
                        <li>节能补贴</li>
                        <li>节能补贴</li>
                        <li>节能补贴</li>
                    </ul>
                </div>
                <div class="bottom"><img src="../品优购/images/floor-1-1.png" alt=""></div>
            </div>
            <div class="B"><img src="../品优购/images/floor-1-b01.png" alt=""></div>
            <div class="C"><img src="../品优购/images/floor-1-2.png" alt=""><img src="../品优购/images/floor-1-3.png" alt="">
            </div>
            <div class="D"><img src="../品优购/images/floor-1-4.png" alt=""></div>
            <div class="E"><img src="../品优购/images/floor-1-2.png" alt=""><img src="../品优购/images/floor-1-3.png" alt="">
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="w">
            <div class="to">
                <ul>
                    <li>
                        <i></i>
                        <h3>正品保障</h3>
                        <p>正品保障，提供发货</p>
                    </li>
                    <li>
                        <i></i>
                        <h3>正品保障</h3>
                        <p>正品保障，提供发货</p>
                    </li>
                    <li>
                        <i></i>
                        <h3>正品保障</h3>
                        <p>正品保障，提供发货</p>
                    </li>
                    <li>
                        <i></i>
                        <h3>正品保障</h3>
                        <p>正品保障，提供发货</p>
                    </li>
                    <li>
                        <i></i>
                        <h3>正品保障</h3>
                        <p>正品保障，提供发货</p>
                    </li>
                </ul>
            </div>
            <div class="mi">
                <dl class="lead">
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>生活旅行/团购</dd>
                    <dd>常见问题</dd>
                    <dd>大家电</dd>
                    <dd>联系客服</dd>
                </dl>
                <dl class="lead">
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>生活旅行/团购</dd>
                    <dd>常见问题</dd>
                    <dd>大家电</dd>
                    <dd>联系客服</dd>
                </dl>
                <dl class="lead">
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>生活旅行/团购</dd>
                    <dd>常见问题</dd>
                    <dd>大家电</dd>
                    <dd>联系客服</dd>
                </dl>
                <dl class="lead">
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>生活旅行/团购</dd>
                    <dd>常见问题</dd>
                    <dd>大家电</dd>
                    <dd>联系客服</dd>
                </dl>
                <dl class="lead">
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>生活旅行/团购</dd>
                    <dd>常见问题</dd>
                    <dd>大家电</dd>
                    <dd>联系客服</dd>
                </dl>

                <dl class="ewm"><dl>
                    <dt>帮助中心</dt>
                    <dd><img src="../品优购/images/erweima.png" alt=""></dd>
                </dl>
                
            </dl>
            </div>
            <div class="bo">
                <p>关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U</p>
           <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</p>
          <p>京ICP备08001421号京公网安备110108007702</p>
        </div>
    </div>
    </div>
    <div class="fixed"></div>
</body>
</html>

首页样式

* {
    padding: 0;
    margin: 0;
}

.w {
    width: 1200px;
    margin: 0 auto;
}

a {
    text-decoration: none;
    color: black;
}

.red {
    color: rgb(181, 59, 59);
}

li {
    list-style: none;
}

/* 让盒子 里面的图片溢出隐藏 */
img {
    overflow-clip-margin: content-box;
    overflow: clip;
}

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?dai5il');
    src: url('fonts/icomoon.eot?dai5il#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?dai5il') format('truetype'),
        url('fonts/icomoon.woff?dai5il') format('woff'),
        url('fonts/icomoon.svg?dai5il#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.nav {
    height: 40px;
    background-color:#F1F1F1;
    line-height: 40px;
    font-size: 14px;
    color: #515151;

}

.nav .w .left {
    float: left;
}

.nav .w .right {
    float: right;
}

.nav .w .right li {
    float: left;
    padding: 0 10px;
}

.nav .w .right li:nth-child(4)::before {
    content: "\23f7";
    font-family: 'icomoon';
    margin-right: 4px;

}

.search {
    padding: 30px 20px 30px 0;
    box-sizing: border-box;
    /* background-color: #ebc6c6; */
}

.search .left {
    float: left;
    width: 171px;
    height: 61px;
}

.search .middle {
    float: left;
    width: 538px;
    height: 61px;
    margin-left: 100px;
    /* background-color: pink; */
}

.search .middle .top {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    border: 2px solid rgb(181, 59, 59);
}

.search .middle input {
    float: left;
    border: 0;
    height: 100%;
    width: 440px;
    color: #ccc;
    box-sizing: border-box;
    padding-left: 10px;

}

.search .middle .top .hzi {
    float: left;
    height: 100%;
    width: 94px;
    background-color: rgb(181, 59, 59);
    color: white;
    text-align: center;
    line-height: 28px;

}

.search .middle .bottom li {
    float: left;
    font-size: 12px;
    color: #666;
    padding: 5px 15px;
}

.search .middle .bottom li:nth-child(1) {
    color: rgb(181, 59, 59);
}

.search .right {
    height: 61px;
}

.search .right .car {
    position: relative;
    float: right;
    width: 140px;
    height: 35px;
    line-height: 31px;
    text-align: center;
    color: #666;
    background-color: #f7f7f7;
    border: 2px solid #dfdfdf;
}

.search .right .car::before {
    content: "\1f386";
    font-family: 'icomoon';
    margin-right: 4px;
}

.search .right .car::after {
    content: "\23f5";
    font-family: 'icomoon';
    margin-left: 4px;
}

.search .right .car .count {
    position: absolute;
    top: -6px;
    right: 4px;
    height: 14px;
    width: auto;
    text-align: center;
    padding: 0 4px;
    line-height: 14px;
    font-size: 10px;
    border-radius: 7px;
    border-bottom-left-radius: 0;
    background-color: red;
    color: white;
}

.nav2 {
    height: 47px;
    border-bottom: 2px solid rgb(154, 44, 44);
}

.nav2 .w {
    height: 100%;
    line-height: 47px;
    /* background-color: palegoldenrod; */
}

.nav2 .w .left {
    float: left;
    width: 210px;
    /* border-top: 2px solid rgb(255, 255, 255); */
}

.nav2 .w .left .top {
    height: 100%;
    width: 210px;
    text-align: center;
    /* line-height: 47px; */
    background-color: rgb(154, 44, 44);
    color: rgb(255, 255, 255);
}

.nav2 .w .left .bottom {
    width: 210px;
    height: 465px;
    box-sizing: border-box;
    padding: 10px;
    background-color: #c81623;
    margin-top: 2px;
    font-size: 14px;
}

.nav2 .w .left .bottom li {
    height: 30px;
}

.nav2 .w .left .bottom li a {
    position: relative;
    display: block;
    height: 30px;
    width: 100%;
    line-height: 30px;
    color: white;
    transition: all 0.5s;
}

.nav2 .w .left .bottom li a:hover {
    color: red;
    background-color: white;
    margin-left: 4px;
}

.nav2 .w .left .bottom li a span {
    position: absolute;
    right: 0;
}

/* .nav2 .w .left .bottom li::after {
    content: "\23f5";
    font-family: 'icomoon';
    margin-left: 30px;
} */

.nav2 .w .right li {
    float: left;
    margin: 0 25px;
    font-size: 14px;
    color: #666;
}

.nav3 {
    width: 983px;
    height: 455px;
    /* background-color: palegoldenrod; */
    margin-left: 350px;
    margin-top: 10px;
}

.nav3 .left {
    float: left;
    /* margin-top: 10px; */
}

.nav3 .left img {
    height: 100%;
    margin-left: 10px;

}

.nav3 .right {
    float: right;
    height: 455px;
    font-size: 14px;
}

.nav3 .right .new {

    width: 250px;
    height: 367px;
    box-sizing: border-box;
    /* background-color: pink; */
    border: 1px solid #ccc;

}

.nav3 .right .new .word {
    height: 150px;
    border: 1px solid #ccc;
}

.nav3 .right .new .word .top {
    padding: 0 25px;
    box-sizing: border-box;
    height: 34px;
    line-height: 34px;
    color: #666666;
    border: 1px dotted #ccc;
}

.nav3 .right .new .word .top h4 {
    float: left;
}

.nav3 .right .new .word .top p {
    float: right;
}

.nav3 .right .new .word .bottom {
    padding: 5px 10px;
}

.nav3 .right .new .word .bottom li a {
    display: block;
    margin-bottom: 2px;
    color: #666;
}

.nav3 .right .new .word .bottom li a:nth-child(1) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav3 .right .new .logo {
    position: relative;
    overflow: hidden;
    width: 250px;
}

.nav3 .right .new .logo li {
    float: left;
    width: 61px;
    height: 71px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.nav3 .right .new .logo li:nth-child(n+9) {
    border-bottom: 0px;
}

/* 给new加了overflow */
.nav3 .right .new .logo li:nth-child(4n) {
    width: 63px;
}

.nav3 .right .new .logo li i {
    display: block;
    width: 24px;
    height: 25px;
    margin: 15px 15px 0px 18px;
    /* text-align: center; */
    background: url(../images/icons.png) no-repeat -17px -16px;
}

.nav3 .right .new .logo li p {
    text-align: center;
    color: #666666;
    margin-top: 5px;
    font-size: 12px;
    margin-left: 15px;
}

.nav3 .right .pic {
    margin-top: 12px;
}

.nav4 {
    height: 163px;
    margin-top: 15px;
    background-color: #EBEBEB;
    /* background-color: pink; */
}

.nav4 .left {
    float: left;
    width: 200px;
    height: 100%;
    padding-top: 30px;
    box-sizing: border-box;
    text-align: center;
    background-color: #5C5251;
}

.nav4 .left p {
    float: none !important;
    font-size: 18px;
    color: white;
    margin-top: 15px;
}

.nav4 .right {
    float: left;
    width: 1000px;
    height: 163px;
}

.nav4 .right li {
    float: left;
    margin-top: 10px;
    margin-right: 1px;
    border-right: 1px solid #ccc;
}

.nav4 .right li:nth-child(4) {
    border-right: none;
}

.nav5 {
    margin-top: 15px;
    height: 390px;
}

.nav5 .top {
    height: 30px;
    /* background-color: palegoldenrod; */
    border-bottom: 2PX solid #c81623;
}

.nav5 .top h3 {
    float: left;
    color: #c81623;
    height: 30px;
    line-height: 30px;
    margin-left: 15px;

}

.nav5 .top li {
    float: right;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    margin: 0 12px;
}

.nav5 .bottom {
    height: 360px;
}

.nav5 .bottom .A {
    float: left;
    height: 100%;
    width: 209px;
    padding: 15px;
    box-sizing: border-box;
    /* background-color: rgb(244, 247, 120); */
}

.nav5 .bottom .A .top {
    height: 98px;
    /* background-color: papayawhip; */
    border: none;
    padding-right: 18px;
    padding-top: 5px;
}

.nav5 .bottom .A .top li {
    margin: 0 0;
    margin-left: 20px;
    width: 60px;
    text-align: center;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
}

.nav5 .bottom .A .bottom img {
    width: 179px;
    margin-top: 10px;
}

.nav5 .bottom .B {
    float: left;
    width: 329px;
}

.nav5 .bottom .C {
    float: left;
    width: 219px;
    height: 100%;
    border-right: 1px solid #ccc;
    /* background-color: purple; */

}

.nav5 .bottom .C img {
    float: left;
    /* box-sizing: border-box; */
    border-bottom: 1px solid #ccc;
}

.nav5 .bottom .D {
    float: left;
    width: 220px;
    height: 360px;
    /* background-color: palegoldenrod; */
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    /* 这里？？？======================================================= */
    border-right:1px solid #ccc;
}
.nav5 .bottom .D img {
    width: 219px;
    height: 359px;
    transition: all 0.5s;
}
.nav5 .bottom .D img:hover {
margin-left: 4px;
}

.nav5 .bottom .E {
    float: left;
    width: 219px;
    height: 360px;
}

.nav5 .bottom .E img {
    /* width: 219px; */
    float: left;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.footer {
    height: 500px;
    background-color: #F5F5F5;
}

.footer .to {
    height: 150px;
    width: 100%;
    padding: 55px 0px;
    box-sizing: border-box;
    /* background-color: rgb(59, 227, 73); */
    border-bottom: 1px solid #ccc;
}

.footer .to ul {
    margin-left: 50px;
}

.footer .to li {
    float: left;
    width: 200px;
    margin-right: 30px;
}

.footer .to li i {
    float: left;
    display: block;
    width: 49px;
    height: 49px;
    margin-right: 10px;
    background: url(../images/icons.png) no-repeat -253px -3px;
}

.to h3,
p {
    float: left;
    color: #666;
    font-size: 16px;

}

.footer .to li p {
    font-size: 14px;
}

.footer .mi {
    height: 200px;
    padding: 20px 80px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    /* background-color: palegoldenrod; */
}

.footer .mi .lead {
    float: left;
    margin-right: 100px;
    color: #515151;
}

.footer .mi .lead dd {
    font-size: 12px;
    margin-top: 5px;
}

.footer .mi .ewm {
    float: left;
    color: #515151;
    text-align: center;
    width: 150px;
}

.footer .mi .ewm dd {
    margin-top: 18px;
}
.footer .bo {
    height: 70px;
    padding: 30px 50px;
    font-size: 12px;
    text-align: center;
    color: #515151;
    /* background-color: pink; */
}
.footer .bo p {
    width: 100%;
font-size: 12px;
    color: #515151;
   /* background-color: black; */
}
.footer .bo p:nth-child(1) {
    margin-bottom: 10px;
}
.fixed {
    position: fixed;
    top: 400px;
    left: 40px;
    width: 200px;
    height: 300px;
    background-color: pink;
}