仿照苏宁易购的简单网站制作（包含效果图及其代码）

最新推荐文章于 2024-05-19 11:35:17 发布
最新推荐文章于 2024-05-19 11:35:17 发布
阅读量1.4k 收藏 11
点赞数 2
文章标签： html5 css html 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65054943/article/details/125753842
版权

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏宁易购</title>
</head>
<style>
    @font-face {
        font-family: 'ng-iconfont';
        src: url('fonts/iconfont.eot?var=06');
        src: url('fonts/iconfont.eot?#iefix06') format('embedded-opentype'), url('fonts/iconfont.woff?var=06') format('woff'), url('fonts/iconfont.ttf?var=06') format('truetype'), url('fonts/iconfont.svg#uxiconfont?var=06') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
    
    * {
        padding: 0;
        margin: 0;
    }
    
    .w {
        width: 1190px;
        margin: auto;
    }
    
    li {
        list-style: none;
    }
    
    .top {
        padding: 0px 1px;
        background-color: #82f8de;
        text-align: center;
    }
    
    .top2 {
        height: 35px;
        background-color: #f5f5f5;
        z-index: 7690;
    }
    
    .t-left {
        height: 35px;
        float: left;
    }
    
    .iconfont-xia {
        font-family: 'ng-iconfont';
        font-style: normal;
        display: inline-block;
        font-size: 10px;
    }
    
    .wang {
        float: left;
        display: block;
    }
    
    .wang span {
        position: relative;
        float: left;
        padding: 0 10px;
        line-height: 35px;
        height: 35px;
        color: #666;
        font-size: 12px;
        text-decoration: none;
    }
    
    .wangzhan {
        display: none;
        position: absolute;
        top: 140px;
        width: 988px;
        border: 1px solid #ddd;
        background-color: #fff;
        padding: 20px 0;
        left: auto;
        z-index: 7691;
    }
    
    .wang:hover .wangzhan {
        display: block;
    }
    
    .list {
        width: 176px;
        border-right: 1px solid #eee;
        padding-left: 20px;
        float: left;
    }
    
    .wangzhan .list dt {
        height: 25px;
        width: 100%;
        font-size: 14px;
        line-height: 17px;
        font-family: "Microsoft Yahei";
    }
    
    .t-left .list dd {
        width: 100%;
        overflow: hidden;
    }
    
    .t-left .list dd p {
        float: left;
        height: 25px;
        width: 78px;
        line-height: 25px;
    }
    
    .t-left .list dd p a {
        font-size: 12px;
        display: inline-block;
        position: relative;
        padding: 0;
        color: #666;
        text-decoration: none;
    }
    
    .t-left .list dd p a:hover {
        color: #f60;
    }
    
    .wangzhan .hot {
        position: absolute;
        display: inline-block;
        height: 16px;
        width: 16px;
        background-image: url(npbg.png);
        background-position: 0 -205px;
        background-repeat: no-repeat;
    }
    
    .w2 dl dd p {
        display: inline-block;
        text-decoration: none;
        height: 25px;
        width: 78px;
        line-height: 25px
    }
    
    .shangjiamen {
        display: none;
        position: absolute;
        top: 140px;
        border: 1px solid #ddd;
        background-color: #fff;
        left: 60;
        right: auto;
        width: 162px;
        padding-top: 5px;
        padding-bottom: 5px;
        z-index: 7691;
    }
    
    .wang:hover .shangjiamen {
        display: block;
    }
    
    .list-shangjia {
        width: 176px;
        padding-left: 10px;
        float: left;
    }
    
    .t-left .list-shangjia dd {
        width: 100%;
        overflow: hidden;
    }
    
    .t-left .list-shangjia dd p {
        float: left;
        height: 25px;
        width: 78px;
        line-height: 25px;
    }
    
    .t-left .list-shangjia dd p a {
        font-size: 12px;
        display: inline-block;
        position: relative;
        padding: 0;
        color: #666;
        text-decoration: none;
    }
    
    .t-left .list-shangjia dd p a:hover {
        color: #f60;
    }
    
    .kehufuwu {
        display: none;
        position: absolute;
        top: 140px;
        border: 1px solid #ddd;
        background-color: #fff;
        left: auto;
        right: 85;
        width: 162px;
        padding-top: 5px;
        padding-bottom: 5px;
        z-index: 7691;
    }
    
    .wang:hover .kehufuwu {
        display: block;
    }
    
    .wang .kehufuwu a {
        display: block;
        width: 71px;
        height: 28px;
        padding: 0;
        float: left;
        line-height: 28px;
        font-size: 12px;
        text-decoration: none;
        padding-left: 10px;
        color: #666
    }
    
    .wang.kehufuwu a:hover {
        color: #f60;
    }
    
    .kehufuwu .zixun {
        font-family: 'ng-iconfont';
        font-style: normal;
        font-size: 16px;
        line-height: 27px;
        color: #ffd200;
    }
    
    .t-right {
        height: 35px;
        float: right;
    }
    
    .qing a {
        display: block;
        position: relative;
        float: left;
        padding: 0 10px;
        line-height: 35px;
        height: 35px;
        overflow: hidden;
        color: #666;
        font-size: 12px;
        text-decoration: none;
    }
    
    .qing {
        float: left;
    }
    
    .dingdanmen {
        display: none;
        position: absolute;
        top: 140px;
        border: 1px solid #ddd;
        background-color: #fff;
        left: 100;
        width: 81px;
        padding-bottom: 5px;
        z-index: 7691;
    }
    
    .dingdanmen a {
        display: block;
        height: 30px;
        width: 71px;
        line-height: 30px;
        padding-left: 10px;
        text-decoration: none;
    }
    
    .dingdanmen span {
        font-size: 12px;
    }
    
    .dingdanmen span:hover {
        color: #f60;
    }
    /* .dingdan:hover .wddd {
        color: #666;
        line-height: 33px;
        height: 35px;
        padding: 0 9px;
        background-color: #fff;
        border: 1px solid #ddd;
        cursor: default;
    } */
    /* .dingdan .wddd:hover span {
        color: #f60;
        cursor: default;
    } */
    
    .dingdan:hover .dingdanmen {
        display: block;
    }
    
    .ss {
        float: left;
    }
    
    .ss a {
        display: block;
        position: relative;
        float: left;
        padding: 0 10px;
        line-height: 35px;
        height: 35px;
        overflow: hidden;
        color: #666;
        font-size: 12px;
        text-decoration: none;
    }
    
    .gouwuche {
        float: left;
    }
    
    .gouwuche span {
        display: block;
        position: relative;
        float: left;
        padding: 0 10px;
        line-height: 35px;
        height: 35px;
        overflow: hidden;
        color: #666;
        font-size: 12px;
        text-decoration: none;
    }
    
    .dingdan {
        float: left;
    }
    
    .dingdan span {
        display: block;
        position: relative;
        float: left;
        padding: 0 10px;
        line-height: 35px;
        height: 35px;
        overflow: hidden;
        color: #666;
        font-size: 12px;
        text-decoration: none;
    }
    
    .wodeyigou {
        float: left;
    }
    
    .wodeyigou span {
        display: block;
        position: relative;
        float: left;
        padding: 0 10px;
        line-height: 35px;
        height: 35px;
        overflow: hidden;
        color: #666;
        font-size: 12px;
        text-decoration: none;
    }
    
    .yigoumen {
        display: none;
        border: 1px solid #ddd;
        background-color: #fff;
        width: 203px;
        z-index: 7691;
        position: absolute;
        top: 140px;
    }
    
    .yigoumen a {
        display: block;
        position: relative;
        float: left;
        padding: 0 10px;
        line-height: 35px;
        height: 35px;
        overflow: hidden;
        color: #666;
        font-size: 12px;
        text-decoration: none;
    }
    
    .yigou i {
        font-family: 'ng-iconfont';
        font-style: normal;
        display: inline-block;
        font-size: 10px;
    }
    
    .yigoumen span {
        font-size: 12px;
    }
    
    .yigoumen span :hover {
        color: #f60;
    }
    
    .denglu img {
        width: 50px;
        height: 50px;
    }
    
    .wodeyigou:hover .yigoumen {
        display: block;
    }
    
    .top3 {
        width: 100%;
        height: 110px;
        z-index: 7681;
    }
    
    .kong {
        height: 100px;
        margin: 0 auto;
        width: 1190px;
    }
    
    .suning {
        float: left;
        margin-top: 10px;
    }
    
    .suning img {
        height: 90px;
        width: 190px;
    }
    
    .zhong {
        position: relative;
        width: 600px;
        height: 100px;
        float: left;
        margin-left: 120px;
        z-index: 7683;
    }
    
    .search {
        position: relative;
        margin-left: 60px;
        width: 540px;
        margin-top: 30px;
    }
    
    .ii {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 25px;
        height: 40px;
        line-height: 40px;
        line-height: 42px\0;
        text-align: right;
        font-size: 14px;
        color: #ccc;
    }
    
    .e1 {
        margin-right: 0;
        float: left;
        width: 372px;
        padding: 0 0 0 28px;
        border: 2px solid #ff8000;
        border-radius: 12px 0 0 12px;
        position: relative;
    }
    
    .e3 {
        width: 390px;
        padding: 9px 10px 9px 0;
        height: 18px;
        line-height: 18px;
        margin-top: 0;
        border: 0;
        background: #FFF;
        color: #BBB;
        font-size: 12px;
        font-family: 'MicroSoft YaHei';
        /* border: 2px solid #ff8000;
        border-radius: 12px 0 0 12px; */
        border-radius: 0;
    }
    
    .e2 {
        float: left;
        position: relative;
        right: 0;
        height: 100%;
    }
    
    .e4 {
        height: 100%;
        width: 120px;
        background: #ff8000;
        border-radius: 0;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        font-size: 18px;
        height: 40px;
        padding: 0;
        font-family: 'MicroSoft YaHei';
        font-weight: bold;
        letter-spacing: 2px;
        text-indent: 2px;
        color: #FFF;
        border: 0;
        cursor: pointer;
    }
    
    .wenzi {
        float: left;
        width: 100%;
        height: 18px;
        margin-top: 5px;
    }
    
    .a2 {
        float: left;
        white-space: nowrap;
        font-size: 12px;
        margin: 3px 0 3px -11px;
        padding: 0 20px 0 10px;
        border-left: 1px solid #ddd;
        height: 12px;
        line-height: 12px;
        color: #999;
    }
    
    .a1 {
        float: left;
        white-space: nowrap;
        font-size: 12px;
        margin: 3px 0 3px -11px;
        padding: 0 20px 0 10px;
        border-left: 1px solid #ddd;
        height: 12px;
        line-height: 12px;
        color: #FF6600;
    }
    
    .fenlei {
        position: relative;
        width: 100%;
        min-width: 990px;
        overflow: visible;
        height: 38px;
        z-index: 7670;
    }
    
    .f1 {
        float: left;
    }
    
    .f2 {
        float: left;
    }
    
    .f3 {
        float: right;
    }
    
    .dt {
        width: 166px;
        padding-left: 34px;
        display: block;
        height: 38px;
        top: 0;
        line-height: 38px;
        background: #ff8000;
        color: #fff;
        font-size: 13px;
        font-weight: bold;
        border-radius: 12px 12px 0 0;
        text-decoration: none;
    }
    
    .f2 img {
        width: 100%;
        height: 38px;
    }
    
    .f2 ul li {
        float: left;
        height: 38px;
        padding: 0 12px 0 13px;
        font-weight: bold;
    }
    
    .f2 ul li a {
        color: #333;
        font-size: 15px;
        font-family: 'Microsoft Yahei', tahoma, arial, 'Hiragino Sans GB';
        line-height: 38px;
        text-decoration: none;
    }
    
    .f3 .gongshi img {
        width: 196px;
        height: 39px;
    }
    
    .main {
        margin-left: 200px;
    }
    
    .A img {
        width: 50px;
        height: 50px;
    }
    
    .A a {
        float: left;
    }
    
    .A {
        margin-top: 5px;
        margin-left: 10px;
        height: 60px;
    }
    
    .AA {
        float: left;
        margin-left: 10px;
    }
    
    .AA p {
        margin-top: 6px;
        font-size: 12px;
        color: #333;
    }
    
    .AA a {
        text-decoration: none;
        margin-top: 10px;
        font-size: 12px;
        color: #333;
    }
    
    .B {
        height: 80px;
    }
    
    .new {
        color: #fff;
        margin-top: 10px;
        background: #ff8000;
        display: block;
        width: 156px;
        height: 24px;
        border-radius: 3px;
        text-align: center;
        line-height: 24px;
        margin-left: 20px;
        text-decoration: none;
        font-size: 10px;
    }
    
    .super {
        text-decoration: none;
        color: #fada99;
        margin-top: 10px;
        background-image: linear-gradient(-90deg, #373a77 3%, #17125b 100%);
        display: block;
        width: 156px;
        height: 24px;
        border-radius: 3px;
        text-align: center;
        line-height: 24px;
        margin-left: 20px;
        font-size: 10px;
    }
    
    .C {
        height: 90px;
    }
    
    .C a {
        float: left;
        width: 65px;
        height: 85px;
        text-decoration: none;
        text-align: center;
    }
    
    .C a img {
        display: block;
        width: 36px;
        height: 36px;
        margin: 6px auto;
    }
    
    .D {
        height: 250px;
        width: 196px;
        border-top: 1px solid #f2f2f2;
    }
    
    .D ul {
        width: 210px;
    }
    
    .D ul li {
        float: left;
        width: 65px;
        height: 85px;
        border-width: 0 1px 1px 0;
        border-style: solid;
        border-color: #f2f2f2;
        text-align: center;
    }
    
    .D ul li img {
        display: block;
        width: 26px;
        height: 26px;
        margin: 12px 20px;
    }
    
    .banner {
        position: relative;
        width: 100%;
        height: 530px;
        /* background-color: rgb(0, 168, 255); */
        z-index: 0;
    }
    
    .main {
        margin-left: 200px;
    }
    
    .g {
        width: 794px;
        float: left;
    }
    
    .g a img {
        height: 400px;
        width: 794px;
    }
    
    .g1 a img {
        float: left;
        width: 194px;
        height: 112px;
        background: #fff;
        margin-left: 2px;
        cursor: default;
        border-radius: 6px;
    }
    
    .daohang {
        float: left;
        width: 200px;
        background-color: white;
        height: 476px;
    }
    
    .hi {
        float: left;
        width: 196px;
        height: 476px;
        background-color: #FFF;
        z-index: 50;
    }
    
    .daohang ul li a {
        text-decoration: none;
        font-size: 14px;
        color: #000;
    }
    
    .daohang ul li a:hover {
        color: #FF6600;
    }
    
    .daohang ul li em {
        font-size: 14px;
        vertical-align: middle;
        height: 12px;
        width: 1px;
        margin: 0 7px
    }
    
    .daohang ul li {
        height: 31px;
        line-height: 31px;
    }
    
    .tu {
        width: 16px;
        height: 16px;
        margin-left: 5px;
        margin-right: 4px;
    }
    
    .list-ll1 {
        display: none;
        position: relative;
        top: -40px;
        left: 200px;
        width: 989px;
        height: 476px;
        background-color: rgb(243, 243, 243);
    }
    
    .list-l li:hover {
        background-color: rgb(243, 243, 243);
    }
    
    .list-l .list-l1:hover .list-ll1 {
        display: block;
    }
    
    .small-top {
        position: relative;
        top: 5px;
        width: 700px;
        height: 24px;
        margin: 10px 0 0 8px;
    }
    
    .list-ll1 .small-top a {
        height: 24px;
        color: #fff;
        font-size: 12px;
        line-height: 24px;
        padding: 0 10px;
        border-radius: 4px;
        margin-left: 24px;
        text-align: center;
        text-decoration: none;
        background-color: rgb(50, 103, 255);
        font-family: 'Microsoft Yahei', tahoma, arial, 'Hiragino Sans GB';
    }
    
    .small-mid {
        width: 780px;
        margin: 10px 0 0 0;
        padding-left: 20px;
    }
    
    .small-mid dl {
        width: 750px;
        height: 57px;
    }
    
    .small-mid .ddl-6,
    .small-mid .ddl-7,
    .small-mid .ddl-8,
    .small-mid .ddl-9 {
        height: 40px;
    }
    
    .small-mid dt {
        width: 84px;
        height: 20px;
        line-height: 20px;
        font-weight: 700;
        padding-top: 8px;
        padding-left: 10px;
    }
    
    .small-mid dt a {
        font-size: 12px;
        display: block;
        width: 84px;
        height: 20px;
        text-decoration: none;
    }
    
    .small-mid dd {
        position: relative;
        top: -30px;
        left: 90px;
        width: 640px;
        line-height: 20px;
        border-bottom: 1px solid #eee;
        margin-top: 8px;
        padding-bottom: 8px;
    }
    
    .small-mid dl dd a {
        font-size: 12px;
        color: #000;
        margin-right: 11px;
        display: inline-block;
        text-decoration: none;
        font-family: 'Microsoft Yahei', tahoma, arial, 'Hiragino Sans GB';
    }
    
    .list-ll2 {
        display: none;
        position: relative;
        top: -40px;
        left: 200px;
        width: 989px;
        height: 476px;
        background-color: rgb(243, 243, 243);
    }
    
    .list-l .list-l2:hover .list-ll2 {
        display: block;
    }
    
    .list-ll2 .small-top a {
        height: 24px;
        color: #fff;
        font-size: 12px;
        line-height: 24px;
        padding: 0 10px;
        border-radius: 4px;
        margin-left: 24px;
        text-align: center;
        text-decoration: none;
        background-color: rgb(153, 51, 255);
        font-family: 'Microsoft Yahei', tahoma, arial, 'Hiragino Sans GB';
    }
    
    .footer {
        height: 98px;
    }
    
    .zhengpin {
        float: left;
        border-bottom: 1px solid #000;
        padding: 12px 0;
    }
    
    .zhengpin li {
        width: 220px;
        height: 52.5px;
        margin: 0 10px 0 0;
        float: left;
    }
    
    .zhengpin li a {
        float: left;
        margin-right: 5px;
    }
    
    .zhengpin li a img {
        width: 48px;
        height: 48px;
    }
    
    .service h4 {
        font-size: 14px;
    }
    
    .service p {
        font-size: 12px;
    }
    
    .center {
        width: 100%;
        background-color: #f2f2f2;
    }
    
    .gc {
        margin: 10px auto 0!important;
        height: 320px;
    }
    
    .h {
        margin-top: 6px;
        float: left;
        width: 570px;
        height: 298px;
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
    }
    
    .h a {
        margin-top: 20px;
        margin-left: 20px;
        display: block;
        width: 106px;
        height: 30px;
    }
    
    .h img {
        width: 106px;
        height: 30px;
    }
    
    .h1 ul li a {
        width: 150px;
        height: 150px;
        margin: 0 10px 10px 10px;
        border-radius: 6px;
    }
    
    .h1 {
        margin-top: 20px;
        width: 570px;
        height: 230px;
    }
    
    .h1 ul li {
        float: left;
    }
    
    .h1 ul li img {
        display: block;
        width: 150px;
        height: 150px;
        margin: 0 10px 10px 10px;
        border-radius: 6px;
    }
    
    .title {
        width: 170px;
        height: 20px;
        color: #333;
        font-size: 14px;
        line-height: 20px;
        overflow: hidden;
        text-align: left;
        word-break: break-all;
        font-weight: normal;
        margin-left: 10px;
    }
    
    .title2 {
        height: 21px;
        margin: 4px 4px 4px 10px;
        overflow: hidden;
    }
    
    .title2 span {
        float: left;
        line-height: 21px;
        color: #f30;
        font-size: 18px;
        font-weight: bold;
    }
    
    .i {
        margin: 6px 10px;
        float: left;
        width: 570px;
        height: 298px;
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
    }
    
    .zx {
        margin: 5px auto 0!important;
        height: 320px;
    }
    
    .j {
        margin-top: 6px;
        float: left;
        width: 570px;
        height: 298px;
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
    }
    
    .j1 {
        text-decoration: none;
        width: 100%;
        height: 60px;
        font-size: 24px;
        color: #000;
        margin-left: 15px;
        font-weight: bold;
    }
    
    .k {
        margin: 6px 10px;
        float: left;
        width: 570px;
        height: 298px;
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
    }
</style>

<body>
    <div class="top">
        <a href="https://cuxiao.suning.com/scms/sxkhjyshc.html?safp=d488778a.homepagev8.126605238622.1&safpn=10001" target="_blank">
            <img src="https://image4.suning.cn/uimg/cms/img/165725046133525929.jpg">
        </a>
    </div>
    <div class="top2">
        <div class="w">
            <div class="t-left">
                <div class="wang">
                    <a href="#" class="nav-neirong" target="_blank">
                        <span>网站导航</span>
                        <i class="iconfont-xia"></i>
                    </a>
                    <div class="wangzhan">
                        <dl class="list">
                            <dt>特色购物</dt>
                            <dd>
                                <p>
                                    <a href="https://10035.suning.com/" target="_blank">苏宁互联</a>
                                </p>
                                <p>
                                    <a href="https://dr.suning.com/" target="_blank">苏宁达人</a>
                                </p>
                                <p>
                                    <a href="https://ka.suning.com/" target="_blank">苏宁卡</a>
                                </p>
                                <p>
                                    <a href="https://g.suning.com/" target="_blank">苏宁国际</a>
                                </p>
                                <p>
                                    <a href="https://hx.suning.com/" target="_blank">以旧换新</a>
                                </p>
                                <p>
                                    <a href="https://quan.suning.com/lq_1.htm#classId=1" target="_blank">领券中心</a>
                                </p>
                                <p>
                                    <a href="https://temai.suning.com/" target="_blank">苏宁Outlets</a>
                                </p>
                                <p>
                                    <a href="https://www.suning.com/daogou/index.html" target="_blank">导购指南</a>
                                </p>
                                <p>
                                    <a href="https://pindao.suning.com/city/zhtsgjsgnew.html" target="_blank">江苏馆</a>
                                </p>
                            </dd>
                        </dl>
                        <dl class="list">
                            <dt>主题频道</dt>
                            <dd>
                                <p>
                                    <a href="https://dianqi.suning.com/" target="_blank">电器城</a>
                                </p>
                                <p>
                                    <a href="https://chaoshi.suning.com/" target="_blank">苏宁超市</a>
                                </p>
                                <p>
                                    <a href="https://shouji.suning.com/" target="_blank">手机</a>
                                </p>
                                <p>
                                    <a href="https://pindao.suning.com/city/diannao.htm?safp=d488778a.homepagev8.sTMJP.14&safpn=10001" target="_blank">电脑</a>
                                </p>
                                <p>
                                    <a href="https://pindao.suning.com/city/jiazhuang.htm?safp=d488778a.homepagev8.sTMJP.15&safpn=10001" target="_blank">家装馆</a>
                                </p>
                            </dd>
                        </dl>
                        <dl class="list">
                            <dt>生活助手</dt>
                            <dd>
                                <p>
                                    <a href="https://10035.suning.com/" target="_blank">零钱宝</a>
                                    <i class="hot"></i>
                                </p>
                                <p>
                                    <a href="https://dr.suning.com/" target="_blank">约服务</a>
                                </p>
                                <p>
                                    <a href="https://ka.suning.com/" target="_blank">保险</a>
                                </p>
                            </dd>
                        </dl>
                        <dl class="list">
                            <dt>会员服务</dt>
                            <dd>
                                <p>
                                    <a href="https://vip.suning.com/?safp=d488778a.homepagev8.sTMJP.19&safpn=10001" target="_blank">会员联盟</a>
                                    <i class="hot"></i>
                                </p>
                                <p>
                                    <a href="https://ewsfspc.suning.com/extendIns/index.htm" target="_blank">延长保修</a>
                                </p>
                                <p>
                                    <a href="https://pay.suning.com/epp-epw/login/login.action?res_message=NOT_LOGIN&res_code=4" target="_blank">易付宝</a>
                                </p>
                                <p>
                                    <a href="https://licai.suning.com/lcportal/licaiIndex.htm?res_message=NOT_LOGIN&res_code=4" target="_blank">苏宁理财</a>
                                </p>
                                <p>
                                    <a href="https://jinrong.suning.com/?safp=d488778a.homepagev8.sTMJP.23&safpn=10001" target="_blank">苏宁金融</a>
                                </p>
                            </dd>
                        </dl>
                        <dl class="list">
                            <dt>更多热点</dt>
                            <dd>
                                <p>
                                    <a href="https://www.pptv.com/" target="_blank">PP视频</a>
                                </p>
                                <p>
                                    <a href="https://cc.suning.com/" target="_blank">合作招商</a>
                                    <i class="hot"></i>
                                </p>
                                <p>
                                    <a href="https://union.suning.com/" target="_blank">苏宁联盟</a>
                                </p>
                                <p>
                                    <a href="https://passport.suning.com/ids/login?service=https%3A%2F%2Fueip.suning.com%2Fauth%3FtargetUrl%3Dhttps%253A%252F%252Fueip.suning.com%252Fpc%252Findex.htm&multipleActive=false" target="_blank">用户体验</a>
                                </p>
                                <p>
                                    <a href="https://gongyi.suning.com/" target="_blank">苏宁公益</a>
                                    <i class="hot"></i>
                                </p>
                                <p>
                                    <a href="https://snyh.suning.com/" target="_blank">苏宁有货</a>
                                </p>
                            </dd>
                        </dl>
                    </div>
                </div>
                <div class="wang">
                    <a href="https://sop.suning.com/" class="nav-neirong" target="_blank">
                        <span>商家入驻</span>
                        <i class="iconfont-xia "></i>
                    </a>
                    <div class="shangjiamen">
                        <dl class="list-shangjia">
                            <dd>
                                <p>
                                    <a href="https://10035.suning.com/" target="_blank">合作招商</a>
                                </p>
                                <p>
                                    <a href="https://dr.suning.com/" target="_blank">服务市场</a>
                                </p>
                                <p>
                                    <a href="https://ka.suning.com/" target="_blank">金融中心</a>
                                </p>
                                <p>
                                    <a href="https://g.suning.com/" target="_blank">易通天下</a>
                                </p>
                                <p>
                                    <a href="https://hx.suning.com/" target="_blank">规则中心</a>
                                </p>
                                <p>
                                    <a href="https://quan.suning.com/lq_1.htm#classId=1" target="_blank">规则众议院</a>
                                </p>
                            </dd>
                        </dl>
                    </div>
                </div>
                <div class="wang">
                    <a href="" class="nav-neirong" target="_blank">
                        <span>客户服务</span>
                        <i class="iconfont-xia "></i>
                    </a>
                    <div class="kehufuwu">
                        <a href="https://pindao.suning.com/city/bangke.html?safp=d488778a.homepagev8.Fgfr4.2&safpn=10001" target="_blank">苏宁帮客</a>
                        <a href="https://hc.suning.com/help/home.htm" target="_blank">帮助中心</a>
                        <a href="https://passport.suning.com/ids/login?service=https%3A%2F%2Fsnasss.suning.com%2Fsnass-web%2Fauth%3FtargetUrl%3Dhttps%253A%252F%252Fsnasss.suning.com%252Fsnass-web%252Fpc%252FreturnGoods%252FtoAfterSaleApplyList.do&loginTheme=b2c&multipleActive=false"
                            target="_blank">退还/维修</a>
                        <a href="https://passport.suning.com/ids/login?service=https%3A%2F%2Fueip.suning.com%2Fauth%3FtargetUrl%3Dhttps%253A%252F%252Fueip.suning.com%252Fpc%252Findex.htm&multipleActive=false" target="_blank">意见反馈</a>
                        <a href="https://cuxiao.suning.com/serve.html?safp=d488778a.homepagev8.Fgfr4.6&safpn=10001" target="_blank">30天包退</a>
                        <a href="https://hc.suning.com/serviceSummary/getBannerListPC.htm" target="_blank">省心购</a>
                        <a href="https://passport.suning.com/ids/login?service=https%3A%2F%2Fassss.suning.com%2Fassss-web%2Fauth%3FtargetUrl%3Dhttps%253A%252F%252Fassss.suning.com%252Fassss-web%252Fpc%252FtelephoneCustomer%252Fhome.do%253Fsafpn%253D10001&loginTheme=b2c&multipleActive=false"
                            target="_blank">电话客服</a>
                        <a href="https://yxchat.suning.com/index.html?bizCode=005A010101000000&custNo=&bizSeq=005A" target="_blank">
                            <span>在线咨询</span>
                            <i class="zixun"></i>
                        </a>
                    </div>
                </div>
                <div class="wang">
                    <a class="w1" href="#">
                        <span>网页无障碍</span>
                        <em></em>
                    </a>
                </div>
                <div class="wang">
                    <a class="w1" href="#">
                        <span>日照</span>
                    </a>

                </div>
            </div>
            <div class="t-right">
                <div class="qing ">
                    <a href="#">请登录</a>
                    <a href="#">注册有礼</a>
                </div>
                <div class="dingdan">
                    <a href="https://passport.suning.com/ids/login?service=https%3A%2F%2Forder.suning.com%2Fauth%3FtargetUrl%3Dhttps%253A%252F%252Forder.suning.com%252Forder%252ForderList.do&loginTheme=b2c&multipleActive=false" class="wddd">
                        <span>我的订单</span>
                        <i class="iconfont-xia tub-dingdan"></i>
                    </a>
                    <div class="dingdanmen">
                        <a href="#">
                            <span>待支付</span>
                        </a>
                        <a href="#">
                            <span>待收货</span>
                        </a>
                        <a href="#">
                            <span>
                                待评价
                            </span>
                        </a>
                        <a href="#">
                            <span>修改订单</span>
                        </a>
                    </div>
                </div>
                <div class="wodeyigou">
                    <a href="#" class="yigou">
                        <span>我的易购</span>
                        <i class="iconfont-xia tub-dingdan"></i>
                    </a>
                    <div class="yigoumen">
                        <div class="denglu">
                            <a href="#" class="img-denglu">
                                <img src="Snipaste_2022-07-12_13-43-33.png">
                            </a>
                            <div class="nei-denglu">
                                <a href="#" class="dl">请登录</a>
                            </div>
                        </div>
                        <a href="#" target="_blank" class="dls">我的消息</a>
                        <a href="#" target="_blank" class="dls dls1">我的关注</a>
                        <a href="https://passport.suning.com/ids/trustLogin?sysCode=epp&targetUrl=http://my.jr.suning.com/sfp/accountAssets/index.htm" target="_blank" class="dls">我的金融</a>
                        <a href="#" target="_blank" class="dls dls1">苏宁会员</a>
                        <a href="https://rxf.suning.com/epps-cpf/accountMgt/assetOverview.do" target="_blank" class="dls">我的任性付</a>
                        <a href="#" target="_blank" class="dls dls2">我的优惠券</a>
                    </div>
                </div>
                <div class="ss">
                    <a href="">苏宁会员</a>
                </div>
                <div class="gouwuche">
                    <a href="">
                        <span>购物车</span>
                    </a>
                </div>
                <div class="ss">
                    <a href="">易付宝</a>
                </div>
                <div class="ss">
                    <a href="">企业采购</a>
                </div>
                <div class="ss">
                    <a href="">手机苏宁</a>
                </div>
            </div>
        </div>
    </div>
    <div class="top3">
        <div class="kong">
            <div class="suning">
                <a href="https://www.suning.com/?safp=d488778a.homepagev8.126605238624.1&safpn=10001" target="_blank">
                    <img src="https://image1.suning.cn/uimg/cms/img/159642507148437980.png">
                </a>
            </div>
            <div class="zhong">
                <div class="search">
                    <i class="ii"></i>
                    <span class="e1"><input class="e3" type="text" >
    
                    </span>
                    <span class="e2"> <input class="e4"type="submit" value="搜索"></span>
                    <div class="wenzi">
                        <a class="a2">手机</a>
                        <a class="a1">爆款洗衣机</a>
                        <a class="a2">冰箱</a>
                        <a class="a1">奶粉特惠购</a>
                        <a class="a1">品质家具购</a>
                        <a class="a2">电视</a>
                        <a class="a2">ipad</a>
                        <a class="a2">热水器</a>
                        <a class="a2">沙发</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fenlei">
        <div class="f w">
            <div class="f1">
                <div class="dt">
                    分类
                </div>
                <div class="daohang">
                    <ul class="list-l">
                        <li class="list-l1"><img class="tu" src="https://image5.suning.cn/uimg/cms/img/159823772695221015.png"><a href="#">手机</a><em>|</em><a href="#">运营商</a>
                            <div class="list-ll1">
                                <div class="small-top">
                                    <a href="">手机电脑馆</a>
                                    <a href="">手机频道</a>
                                    <a href="">智能数码</a>
                                    <a href="">以旧换新</a>
                                    <a href="">新品抢先</a>
                                    <a href="">网上营业厅</a>
                                    <a href="">企业采购</a>
                                </div>
                                <div class="small-mid">
                                    <dl class="ddl-1">
                                        <dt>
                                            <a href="">手机通讯</a>
                                        </dt>
                                        <dd>
                                            <a href="">全部手机</a>
                                            <a href="">5G手机</a>
                                            <a href="">游戏手机</a>
                                            <a href="">iPhone</a>
                                            <a href="">小米</a>
                                            <a href="">iQOO</a>
                                            <a href="">vivo</a>
                                            <a href="">OPPO</a>
                                            <a href="">荣耀</a>
                                            <a href="">华为</a>
                                            <a href="">一加</a>
                                            <a href="">三星</a>
                                            <a href="">魅族</a>
                                            <a href="">realme</a>
                                            <a href="">守护宝</a>
                                            <a href="">努比亚</a>
                                            <a href="">诺基亚</a>
                                            <a href="">以旧换新</a>
                                            <a href="">手机维修</a>
                                        </dd>
                                    </dl>
                                    <dl class="ddl-2">
                                        <dt>
                                            <a href="">手机配件</a>
                                        </dt>
                                        <dd>
                                            <a href="">移动电源</a>
                                            <a href="">苹果数据线</a>
                                            <a href="">安卓数据线</a>
                                            <a href="">三合一数据线</a>
                                            <a href="">手机壳</a>
                                            <a href="">手机耳机</a>
                                            <a href="">手机贴膜</a>
                                            <a href="">手机U盘</a>
                                            <a href="">充电器</a>
                                            <a href="">手机储存卡</a>
                                            <a href="">无线充电器</a>
                                            <a href="">有线耳机</a>
                                            <a href="">手机电池</a>
                                            <a href="">自拍杆</a>
                                            <a href="">手机支架</a>
                                        </dd>
                                    </dl>
                                    <dl class="ddl-3">
                                        <dt>
                                            <a href="">智能设备</a>
                                        </dt>
                                        <dd>
                                            <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="">VR眼镜</a>
                                            <a href="">智能健康秤</a>
                                            <a href="">智能健康检测</a>
                                        </dd>
                                    </dl>
                                    <dl class="ddl-4">
                                        <dt>
                                            <a href="">影音电子</a>
                                        </dt>
                                        <dd>
                                            <a href="">无线耳机</a>
                                            <a href="">降噪耳机</a>
                                            <a href="">AirPods</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="">MP3/MP4</a>
                                            <a href="">录音笔</a>
                                            <a href="">收音/收音机</a>
                                        </dd>
                                    </dl>
                                    <dl class="ddl-5">
                                        <dt>
                                            <a href="">电子教育</a>
                                        </dt>
                                        <dd>
                                            <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>
                                        </dd>
                                    </dl>
                                    <dl class="ddl-6">
                                        <dt>
                                            <a href="">二手优品</a>
                                        </dt>
                                        <dd>
                                            <a href="">iPhone11</a>
                                            <a href="">iPhone 7</a>
                                            <a href="">iPhone 8</a>
                                            <a href="">iPhone X</a>
                                            <a href="">iPhone 8p</a>
                                            <a href="">iPhone 7p</a>
                                            <a href="">oppo</a>
                                            <a href="">vivo</a>
                                            <a href="">三星</a>
                                            <a href="">华为</a>
                                            <a href="">小米</a>
                                        </dd>
                                    </dl>
                                    <dl class="ddl-7">
                                        <dt>
                                            <a href="">苏宁互联</a>
                                        </dt>
                                        <dd>
                                            <a href="">尾号888靓号</a>
                                            <a href="">0月组号卡</a>
                                            <a href="">20GB大流量</a>
                                            <a href="">超级靓号</a>
                                            <a href="">立即选号</a>
                                        </dd>
                                    </dl>
                                    <dl class="ddl-8">
                                        <dt>
                                            <a href="">营业厅</a>
                                        </dt>
                                        <dd>
                                            <a href="">手机卡</a>
                                            <a href="">大流量卡</a>
                                            <a href="">宽带</a>
                                            <a href="">办套餐</a>
                                            <a href="">充话费/流量</a>
                                            <a href="">中国移动</a>
                                            <a href="">中国电信</a>
                                            <a href="">中国联通</a>
                                        </dd>
                                    </dl>
                                    <dl class="ddl-9">
                                        <dt>
                                            <a href="">会员卡</a>
                                        </dt>
                                        <dd>
                                            <a href="">去哪儿+芒果TV视频双年卡</a>
                                            <a href="">芒果TV年卡</a>
                                            <a href="">同程黑鲸会员送腾讯视频年卡</a>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </li>
                        <li class="list-l2"><img class="tu" src="https://image2.suning.cn/uimg/cms/img/159823778233607035.png"><a href="#">家用电器</a><em>|</em><a href="#">帮客</a>
                            <div class="list-ll2">
                                <div class="small-top">
                                    <a href="">电器城</a>
                                    <a href="">空调频道</a>
                                    <a href="">冰箱/洗衣机频道</a>
                                    <a href="">彩电频道</a>
                                    <a href="">以旧换新</a>
                                </div>
                                <div class="small-mid">
                                    <dl class="ddl-1">
                                        <dt>
                                        <a href="">空调</a>
                                    </dt>
                                        <dd>
                                            <a href="">【优选空调,以旧换新省650】</a>
                                            <a href="">挂机</a>
                                            <a href="">柜机</a>
                                            <a href="">变频</a>
                                            <a href="">新风空调</a>
                                            <a href="">移动空调</a>
                                            <a href="">空调套餐</a>
                                            <a href="">1匹</a>
                                            <a href="">1.5匹</a>
                                            <a href="">2匹</a>
                                            <a href="">3匹</a>
                                            <a href="">格力</a>
                                            <a href="">海尔</a>
                                            <a href="">TCL</a>
                                            <a href="">海信</a>
                                            <a href="">科龙</a>
                                            <a href="">华凌</a>
                                        </dd>
                                    </dl>
                                    <dl class="ddl-2">
                                        <dt>
                                        <a href="">电视</a>
                                    </dt>
                                        <dd>
                                            <a href="">【电视家影至享24期免息】</a>
                                            <a href="">75英寸</a>
                                            <a href="">65英寸</a>
                                            <a href="">55英寸</a>
                                            <a href="">海信</a>
                                            <a href="">创维</a>
                                            <a href="">小米</a>
                                            <a href="">TCl</a>
                                            <a href="">pptv</a>
                                            <a href="">索尼</a>
                                            <a href="">长虹</a>
                                            <a href="">三星</a>
                                            <a href="">智慧屏</a>
                                            <a href="">4k超高清</a>
                                            <a href="">全面屏</a>
                                        </dd>
                                    </dl>
                                    <dl class="ddl-3">
                                        <dt>
                                        <a href="">冰箱</a>
                                    </dt>
                                        <dd>
                                            <a href="">【冰箱洗衣机 每1000减100】</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="">美的</a>
                                            <a href="">美菱</a>
                                            <a href="">海信</a>
                                        </dd>
                                    </dl>
                                    <dl class="ddl-4">
                                        <dt>
                                        <a href="">洗衣机</a>
                                    </dt>
                                        <dd>
                                            <a href="">【洁净洗护 滚筒低至1199】</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="">小天鹅</a>
                                            <a href="">美的</a>
                                            <a href="">西门子</a>
                                            <a href="">海信</a>
                                        </dd>
                                    </dl>
                                    <dl class="ddl-5">
                                        <dt>
                                        <a href="">冷柜</a>
                                    </dt>
                                        <dd>
                                            <a href="">【爆款冷柜799元起】</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>
                                        </dd>
                                    </dl>
                                    <dl class="ddl-6">
                                        <dt>
                                        <a href="">视听影音</a>
                                    </dt>
                                        <dd>
                                            <a href="">家庭影院</a>
                                            <a href="">便携音箱</a>
                                            <a href="">回音壁</a>
                                            <a href="">DVD</a>
                                            <a href="">功放</a>
                                            <a href="">KTV音响</a>
                                            <a href="">智能投影</a>
                                        </dd>
                                    </dl>
                                    <dl class="ddl-7">
                                        <dt>
                                        <a href="">帮课服务</a>
                                    </dt>
                                        <dd>
                                            <a href="">【清凉夏日,148元洗两台空调】</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>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </li>
                        <li><img class="tu" src="https://image3.suning.cn/uimg/cms/img/159521436499527653.png"><a href="#">厨卫</a><em>|</em><a href="#">生活家电</a><em>|</em><a href="#">厨具</a></li>
                        <li><img class="tu" src="https://image3.suning.cn/uimg/cms/img/159521445289226582.png"><a href="#">电脑办公</a><em>|</em><a href="#">相机</a></li>
                        <li><img class="tu" src="https://image5.suning.cn/uimg/cms/img/159521457914933994.png"><a href="#">家具</a><em>|</em><a href="#">家装</a><em>|</em><a href="#">家纺</a><em>|</em><a href="#">灯具</a></li>
                        <li><img class="tu" src="https://image3.suning.cn/uimg/cms/img/159521467494115353.png"><a href="#">食品</a><em>|</em><a href="#">酒水</a><em>|</em><a href="#">生鲜</a><em>|</em><a href="#">特产</a></li>
                        <li><img class="tu" src="https://image5.suning.cn/uimg/cms/img/159521511071559464.png"><a href="#">美妆</a><em>|</em><a href="#">个护</a><em>|</em><a href="#">清洁</a><em>|</em><a href="#">宠物</a></li>
                        <li><img class="tu" src="https://image5.suning.cn/uimg/cms/img/159521519805876875.png"><a href="#">母婴</a><em>|</em><a href="#">玩具</a><em>|</em><a href="#">车床</a><em>|</em><a href="#">童装</a></li>
                        <li><img class="tu" src="https://image3.suning.cn/uimg/cms/img/159521553751456837.png"><a href="#">运动</a><em>|</em><a href="#">户外</a><em>|</em><a href="#">国米</a><em>|</em><a href="#">骑行</a></li>
                        <li><img class="tu" src="https://image3.suning.cn/uimg/cms/img/159521561707762538.png"><a href="#">女装</a><em>|</em><a href="#">男装</a><em>|</em><a href="#">内衣</a><em>|</em><a href="#">鞋子</a></li>
                        <li><img class="tu" src="https://image2.suning.cn/uimg/cms/img/159521571065832724.png"><a href="#">箱包</a><em>|</em><a href="#">钟表</a><em>|</em><a href="#">珠宝</a><em>|</em><a href="#">艺术</a></li>
                        <li><img class="tu" src="https://image1.suning.cn/uimg/cms/img/159521577313810168.png"><a href="#">汽车</a><em>|</em><a href="#">电摩</a><em>|</em><a href="#">汽车用品</a></li>
                        <li><img class="tu" src="https://image5.suning.cn/uimg/cms/img/159521583003884630.png"><a href="#">图书</a><em>|</em><a href="#">艺术</a><em>|</em><a href="#">原版</a><em>|</em><a href="#">文学</a></li>
                        <li><img class="tu" src="https://image2.suning.cn/uimg/cms/img/159521587904815341.png"><a href="#">医药健康</a><em>|</em><a href="#">计生情趣</a></li>
                        <li><img class="tu" src="https://image5.suning.cn/uimg/cms/img/159521591911148163.png"><a href="#">理财</a><em>|</em><a href="#">分析</a><em>|</em><a href="#">便民</a></li>
                    </ul>
                </div>
            </div>
            <div class="f2">
                <ul>
                    <li>
                        <a href="https://qiang.suning.com/pc/brandBenefits.html"><img src="https://image2.suning.cn/uimg/cms/img/161185054090483911.png" alt="大聚惠"></a>
                    </li>
                    <li><a href="https://dianqi.suning.com/?safp=d488778a.homepagev8.126605238663.2&safpn=10001">电器城</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 class="f3">
                <div class="gongshi">
                    <a href="https://hc.suning.com/help/channel-154537312397774529.htm"><img src="https://image1.suning.cn/uimg/cms/img/159525719075727245.png" alt=""></a>
                </div>
            </div>
        </div>
    </div>
    <div class="banner">
        <div class="banxin w">
            <div class="main">
                <div class="g">
                    <a href="https://cuxiao.suning.com/scms/CWSH0527copy.html?safp=d488778a.homepagev8.126605338677.2&safpn=10001" target="_blank"><img src="https://image3.suning.cn/uimg/cms/img/165724844342772183.jpg"></a>
                    <div class="g1">
                        <a href="#"><img src="https://oss.suning.com/adpp/creative_kit/material/picture/20211119-048317170f5a4018b9cc4bddc817fea133c331fa3e52466f.png" alt=""></a>
                        <a href="#"><img src="https://oss.suning.com/adpp/creative_kit/material/picture/20220209-b6d966115c0647a987fe376dfdff2ee725b7b7ebe04647d1.png" alt=""></a>
                        <a href="#"><img src="https://oss.suning.com/adpp/creative_kit/material/picture/20210906-8108ad119b6d46dfbe01d606b54c7e3e85d67bf321e64a15.png" alt=""></a>
                        <a href="#"><img src="https://oss.suning.com/adpp/creative_kit/material/picture/20220214-0d2eaccd362040de9b46b2db22d818ddb58eb246bfbd46fe.png" alt=""></a>
                    </div>
                </div>
                <div class="hi">
                    <div class="A">
                        <a href="#"><img src="Snipaste_2022-07-12_13-43-33.png" alt=""></a>
                        <div class="AA">
                            <p>Hi,欢迎来到苏宁易购</p>
                            <a href="#">登录|注册</a>
                        </div>
                    </div>
                    <div class="B">
                        <a class="new" href="//cuxiao.suning.com/scms/xinren_pc.html" target="_blank" title="199新人专享">199新人专享</a>
                        <a class="super" href="//supervip.suning.com/snprime-web/toIndex.do" target="_blank" title="开通super尊享特权">开通super尊享特权</a>
                    </div>
                    <div class="C">
                        <a href="#">
                            <img src="https://image2.suning.cn/uimg/cms/img/159503668779632788.png" alt="">
                            <p>领红包</p>
                        </a>
                        <a href="#">
                            <img src="https://image5.suning.cn/uimg/cms/img/165752920559657094.png" alt="">
                            <p>以旧换新</p>
                        </a>
                        <a href="#">
                            <img src="https://image5.suning.cn/uimg/cms/img/159503691577022653.png" alt="">
                            <p>抢神券</p>
                        </a>
                    </div>
                    <div class="D">
                        <ul>
                            <li>
                                <a href="#"><img src="https://image5.suning.cn/uimg/cms/img/165750662907502282.png" alt=""></a>
                                <p>手机馆</p>
                            </li>
                            <li>
                                <a href="#"><img src="https://image3.suning.cn/uimg/cms/img/165750705002170538.png" alt=""></a>
                                <p>电器城</p>
                            </li>
                            <li>
                                <a href="#"><img src="https://image2.suning.cn/uimg/cms/img/165752909464915600.png" alt=""></a>
                                <p>家装馆</p>
                            </li>
                            <li>
                                <a href="#"><img src="https://image1.suning.cn/uimg/cms/img/159503709286557735.png" alt=""></a>
                                <p>理财</p>
                            </li>
                            <li>
                                <a href="#"><img src="https://image1.suning.cn/uimg/cms/img/159503712299629769.png" alt=""></a>
                                <p>分期</p>
                            </li>
                            <li>
                                <a href="#"><img src="https://image5.suning.cn/uimg/cms/img/165750696392811339.png" alt=""></a>
                                <p>苏宁卡</p>
                            </li>
                            <li>
                                <a href="#"><img src="https://image4.suning.cn/uimg/cms/img/165750681102299986.png" alt=""></a>
                                <p>药品信息</p>
                            </li>
                            <li>
                                <a href="#"><img src="https://image2.suning.cn/uimg/cms/img/165752913610070145.png" alt=""></a>
                                <p>苏宁帮课</p>
                            </li>
                            <li>
                                <a href="#"><img src="https://image1.suning.cn/uimg/cms/img/165750694630657957.png" alt=""></a>
                                <p>苏宁公益</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="center">
        <div class="gc">
            <div class="w">
                <div class="h">
                    <a href="#"><img src="https://image2.suning.cn/uimg/cms/img/165720359406245083.png" alt=""></a>
                    <div class="h1">
                        <ul>
                            <li>
                                <a href="#"><img src="https://imgservice5.suning.cn/uimg1/b2c/image/WUPNDInlXPUSPeqe9FPsvw.jpg_200w_200h_4e" alt=""></a>
                                <p class="title">【9瓶】天地精华低钠淡泉水1L*9/箱天然矿泉适合母婴幼儿水天然矿泉水瓶装便携</p>
                                <p class="title2">
                                    <span>
                                        <i>¥</i>
                                        <em>69.90</em>
                                    </span>
                                </p>
                            </li>
                            <li>
                                <a href="#"><img src="https://image1.suning.cn/uimg/cms/img/165759048526814430.jpg" alt=""></a>
                                <p class="title">VAPE日本未来驱蚊水金色三倍天使 200ml/瓶 宝宝儿童驱蚊喷雾驱蚊液蚊叮虫咬 新生儿可用</p>
                                <p class="title2">
                                    <span>
                                        <i>¥</i>
                                        <em>39.00</em>
                                    </span>
                                </p>
                            </li>
                            <li>
                                <a href="#"><img src="https://image1.suning.cn/uimg/cms/img/165750569250157114.jpg" alt=""></a>
                                <p class="title">【5KG】北大荒东北长粒香大米5KG 当季新米 现磨现发 米砖包装 粳米稻香稻花香长粒香</p>
                                <p class="title2">
                                    <span>
                                        <i>¥</i>
                                        <em>39.90</em>
                                    </span>
                                </p>
                            </li>

                        </ul>
                    </div>
                </div>
                <div class="i">
                    <div class="h">
                        <a href="#"><img src="https://image5.suning.cn/uimg/cms/img/161190026050858417.png" alt=""></a>
                        <div class="h1">
                            <ul>
                                <li>
                                    <a href="#"><img src="https://imgservice.suning.cn/uimg1/pcpv/pcpv/whitePic/2022/06/22/21/8dcd42ceecc948f2994edec35bb7ee61.png?format=200h_200w_4e" alt=""></a>
                                    <p class="title">格力(GREE)空调KFR-35GW/NhAe1BG 云恬新能效变频1.5匹挂一级能效 家用WIFI智控 壁挂式冷暖空调</p>
                                    <p class="title2">
                                        <span> 
                                            <i>¥</i>
                                            <em>3699.00</em>
                                        </span>
                                    </p>
                                </li>
                                <li>
                                    <a href="#"><img src="https://imgservice.suning.cn/uimg1/pcpv/pcpv/whitePic/2022/04/19/17/0b3cd8df8e76405d9190e7cd5d87b0e0.png?format=200h_200w_4e" alt=""></a>
                                    <p class="title">容声(Ronshen)592升对开门冰箱双开门大容量 一级能效双变频 AIF+离子抑菌净味 BCD-592WD16HPA</p>
                                    <p class="title2">
                                        <span>
                                            <i>¥</i>
                                            <em>2999.00</em>
                                        </span>
                                    </p>
                                </li>
                                <li>
                                    <a href="#"><img src="https://imgservice.suning.cn/uimg1/sniss/improve/FDW4bI3nM4DKoMY--9Cuxw.jpg?format=200h_200w_4e" alt=""></a>
                                    <p class="title">大宇(DAEWOO)多功能锅网红料理锅 家用电火锅电热炒锅电烧烤炉电煮锅不粘锅 S11升级款白色</p>
                                    <p class="title2">
                                        <span>
                                            <i>¥</i>
                                            <em>899.00</em>
                                        </span>
                                    </p>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="zx">
            <div class="w">
                <div class="j">
                    <a class="j1" href="#">领券中心</a>
                    <div class="h1">
                        <ul>
                            <li>
                                <a href="#"><img src="https://image2.suning.cn/uimg/cms/img/165545542672232250.jpg" alt=""></a>
                                <p class="title">【9瓶】天地精华低钠淡泉水1L*9/箱天然矿泉适合母婴幼儿水天然矿泉水瓶装便携</p>
                                <p class="title2">
                                    <span>
                                        <i>¥</i>
                                        <em>69.90</em>
                                    </span>
                                </p>
                            </li>
                            <li>
                                <a href="#"><img src="https://image1.suning.cn/uimg/cms/img/165759048526814430.jpg" alt=""></a>
                                <p class="title">VAPE日本未来驱蚊水金色三倍天使 200ml/瓶 宝宝儿童驱蚊喷雾驱蚊液蚊叮虫咬 新生儿可用</p>
                                <p class="title2">
                                    <span>
                                        <i>¥</i>
                                        <em>39.00</em>
                                    </span>
                                </p>
                            </li>
                            <li>
                                <a href="#"><img src="https://image1.suning.cn/uimg/cms/img/165750569250157114.jpg" alt=""></a>
                                <p class="title">【5KG】北大荒东北长粒香大米5KG 当季新米 现磨现发 米砖包装 粳米稻香稻花香长粒香</p>
                                <p class="title2">
                                    <span>
                                        <i>¥</i>
                                        <em>39.90</em>
                                    </span>
                                </p>
                            </li>

                        </ul>
                    </div>
                </div>
                <div class="k"></div>
            </div>
        </div> -->
    </div>
    <div class="footer">
        <div class="w">
            <div class="zhengpin">
                <ul>
                    <li>
                        <a href="https://hc.suning.com/help/channel-153317984655227247/K15399193370991400.htm"><img src="https://image.suning.cn/uimg/cms/img/149386338830969041.jpg" alt=""></a>
                        <div class="service">
                            <h4>正品保障</h4>
                            <p>正品保障、提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="zhengpin">
                <ul>
                    <li>
                        <a href="https://hc.suning.com/help/channel-153317984655227247/K15399193697723000.htm"><img src="https://image.suning.cn/uimg/cms/img/149386339441846551.jpg" alt=""></a>
                        <div class="service">
                            <h4>急速物流</h4>
                            <p>如约送货、送货入户</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="zhengpin">
                <ul>
                    <li>
                        <a href="https://hc.suning.com/help/channel-153320144068611677/K15350932410567650.htm"><img src="https://image.suning.cn/uimg/cms/img/149386340040069121.jpg" alt=""></a>
                        <div class="service">
                            <h4>售后无忧</h4>
                            <p>30天包退、365天包换</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="zhengpin">
                <ul>
                    <li>
                        <a href="https://hc.suning.com/help/home.htm"><img src="https://image.suning.cn/uimg/cms/img/149386341371637387.jpg" alt=""></a>
                        <div class="service">
                            <h4>帮助中心</h4>
                            <p>您的购物指南</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="zhengpin">
                <ul>
                    <li>
                        <a href="https://hc.suning.com/help/channel-155152683733394541.htm"><img src="https://image.suning.cn/uimg/cms/img/159609703272398060.png" alt=""></a>
                        <div class="service">
                            <h4>省心购</h4>
                            <p>专注好服务</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>

m0_65054943
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js苏宁易购注册页面 zjy
weixin_73158514的博客
01-04 194
js苏宁易购注册页面 苏宁易购zjy
学生个人html静态网页制作 基于HTML+CSS+JavaScript+jquery仿苏宁易购官网商城模板
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
仿制苏宁易购—静态网页
热门推荐
m0_64645111的博客
07-12 2万+
苏宁易购静态网页
仿作苏宁易购主页（前端学习记录）
m0_63004006的博客
07-12 409
通过初步的前端知识学习，大体上完成了苏宁易购首页的仿制，还请大家批评指正，谢谢！
对于html和css初学者，你有什么值得推荐的简单的网页适合练习？
SiKi学院的博客
09-06 345
html和css方面个人认为主要是在于css的学习，变化最多的也在于css，下面主要是介绍一些css相关的练习网站及一些项目，希望对你有帮助~
【前端】学成在线网页项目练习制作
刘佳皓_Leo
10-05 705
学习前端路上的一个练习。
从零开始学WEB前端——JavaScript基础介绍
su_zui的博客
02-24 1129
JavaScript（简称“JS”） 是一种具有**函数优先**的轻量级，**解释型**或即时编译型的**编程语言**。虽然它是作为开发Web页面的**脚本语言**而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于**原型编程**、多范式的动态脚本语言，并且支持**面向对象**、命令式、声明式、函数式编程范式。
基于Jquery的仿照flash放大图片效果代码
10-28
基于Jquery的仿照flash放大图片效果代码，需要的朋友可以参考下。
基于html+css+js开发的仿苏宁易购商城项目+源码
05-14
基于html+css+js开发的仿苏宁易购商城项目+源码 基于html+css+js开发的仿...该项目商城仿照了苏宁易购的页。 HTML + CSS布局静态页面，JS实现轮播图，倒计时的动态特效，供日常练习。 细节说明已经写在代码的注释里了
原生js代码实现图片放大境效果
01-19
今天我给大家分享一下自己用js写的一个图片放大器效果，我做了两种效果的放大，其实它们的原理都差不多，都是采用了两张图片给两张图片设定相应的尺寸，最后显示在不同位置，最终实现放大效果。 第一种是我仿照淘宝...
仿照iOS系统AssistiveTouch制作的有趣工具源代码
03-16
其外观、行为、动画等效果都与系统的 AssistiveTouch 相同，如下图: LPDebug 是基于 LPAssistiveTouch 制作的调试辅助按钮。暂时提供了页面快捷跳转、推送调试、查看和缓存打印信息三个功能。之所以制作两个 ...
Delphi仿照photoshop的图层+文字效果
05-16
内容索引:Delphi源码,图形处理,仿Photoshop,图层　Delphi仿照photoshop的图层+文字效果，输入需要插入的文字，选择文字层或线条层，设置鼠标位置，可以看到效果，挺简单的操作，但是能说明一些问题。
HTML简易网页练习
zhangmingxian1的博客
10-28 1291
例如：h1-h6，p，div(没有任何默认样式的块级元素，最常用的元素，不用特意清除默认样式)例如：b i u sub sup span(没有任何默认样式的行内元素)定义：在默认情况下，可以和其他行内元素在一行显示。3、在p标签中，不能嵌套其他的块级元素。定义：在默认情况下，独占一行的元素。4、p标签常用于页面中的纯文本。分割线可以用标签2、文字的尺寸依次减小。
HTML观鸟网小练习
dark_cy的博客
07-05 683
　　刚学了几天，算是把常用的HTML标签过了一遍，于是乎在网上找了一个简单网页练练手。比较简单的一个网页，很适合我这种刚学的，可以很好的熟悉熟悉标签，练练布局啥的。 《原网页在这里》 　　我写了两个版本，第一个是用 table 进行布局的，写完后去跟原网页的源码比较，结果发现人家的布局样式啥的是用的外部 CSS 文件，而我还没学到这个，所以看到前几行我就一脸萌币了... 　　第二个版本是用 div 进行布局的，因为视频里都说 table 真正的功能不是用来布局的，div 才是，所以就用 div 的方式又写了
移动端rem布局 案例练习
MartinYP的博客
08-07 283
学习记录博客
苏宁易购首页制作
weixin_63198259的博客
07-13 720
苏宁易购主页
HTML+CSS设计一个简单的水平一级导航栏
m0_58291075的博客
12-19 9134
(3)为了能够改变里的高度和宽度，我们首先让display：inline-block；这里是重点，因为属于inline类型不能够改变高度和宽度，只有转换类型为inline-block才能够改变。(2)#nav里设置导航栏的宽度以及外边框属性（此处font-size=0是为了防止每个超链接选项出现间隙，你可以删除此项对比效果）前面我学习了一段时间的HTML和CSS知识，下面我们来运用知识实现一个简单的水平一级导航栏。这里是在中使用三个标签，为了方便我没有使用或者.
【html5】04-操作DOM元素
最新发布
m0_68467925的博客
05-19 916
dom获取单个、多个元素；类名操作： Dom.classList.add("类名"): 给当前dom元素添加类样式 Dom.classList.remove("类名");classList.contains("类名"); classList.toggle("active"); 自定义属性的获取与设置
仿照他们制作一个AI智能写作网站，包含HTML、CSS、JS等的代码展示
05-02
很抱歉，我不是一个能够制作网站的AI，但我可以为您提供一些建议。您可以考虑使用自然语言处理技术，结合前端技术，实现一个AI智能写作网站。具体步骤如下： 1. 数据收集和处理：收集大量的文章、文本数据，并对其进行处理和清洗，以便后续的训练和预测。 2. 模型训练：使用自然语言处理技术，如GPT、BERT等，对处理好的数据进行训练，生成AI模型。 3. 前端开发：使用HTML、CSS、JS等前端技术，实现网站的页面展示和交互功能。 4. 后端开发：使用Python等后端语言，结合AI模型，实现网站的智能写作功能。 5. 上线部署：将网站部署到服务器上，让用户可以通过浏览器访问使用。 以上是一个大致的流程，具体实现过程可能会更加复杂。如果您不具备相关技术，可以考虑寻找相关的团队或者开发者来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值