仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！

仿淘宝电商官网静态页面

作为一个前端开发，布局+样式已经成为了必备的技能，你做得好是应该的，做的不好可以原谅，但当你意识到不足时，补足它

这是我刚"入坑"的时候写的Demo，因为当时貌似很流行模仿淘宝、音乐类网站，毕竟他们本身展示的内容足够多，可以在一个页面内体现出许多东西，且难度适中，希望能帮到大家。

目录

优先阅读

  • 190920：第一次编辑 - 访问量一般
  • 200619：貌似不少人还愿意研究一下，所以我给出下面的几个选项，大家可以参考：
    1. 我会通过标注的方式，将代码的布局展示出来，给大家提供参考，不至于看到一大块的代码无从下手；
  • 201230：简单优化了部分代码
  • 这里是另一个静态页面（小米官网）
一、 仿淘宝官网页面（静态）最终效果图

在这里插入图片描述

淘宝官网预览地址

html部分


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淘宝网-淘！我喜欢title>
    <link rel="stylesheet" href="./css/index.css">
head>

<body>
    <div class="web-shop">
        
        <div class="header">
            <div class="container">
                <ul class="nav">
                    <li>
                        <a href="javascript:;" class="arrow">中国大陆a>
                    li>
                    <li class="orange">
                        <a href="javascript:;">亲，请登录a>
                    li>
                    <li>
                        <a href="javascript:;">免费注册a>
                    li>
                    <li>
                        <a href="javascript:;">手机逛淘宝a>
                    li>
                ul>
                <ul class="nav">
                    <li>
                        <a href="javascript:;" class="arrow">我的淘宝a>
                    li>
                    <li>
                        <a href="javascript:;" class="arrow">购物车a>
                    li>
                    <li>
                        <span class="start" class="arrow">span>
                        <a href="javascript:;">收藏夹a>
                    li>
                    <li>
                        <a href="javascript:;" class="arrow">商品分类a>
                    li>
                    <li>
                        <a href="javascript:;" class="arrow">卖家中心a>
                    li>
                    <li>
                        <a href="javascript:;" class="arrow">联系客服a>
                    li>
                    <li>
                        <a href="javascript:;" class="arrow">网站导航a>
                    li>
                ul>
            div>
        div>

        <div class="body-1">
            
            <div class="search">
                <div class="search-logo">
                    <a href="https://www.taobao.com/">a>
                div>
                <div class="search-box">
                    <ul class="search-tab">
                        <a href="javascript:;" class="choose1">淘宝a>
                        <a href="javascript:;">天猫a>
                        <a href="javascript:;">店铺a>
                    ul>
                    <form class="search-input">
                        <input class="box1" type="text" name="search">
                        <button class="btn" type="submit">搜索button>
                    form>

                    <div class="search-choose">
                        <a href="javascript:;">新款连衣裙a>
                        <a href="javascript:;">四件套a>
                        <a href="javascript:;" class="tx">潮流T恤a>
                        <a href="javascript:;">时尚女鞋a>
                        <a href="javascript:;">短裤a>
                        <a href="javascript:;">半身裙a>
                        <a href="javascript:;">男士外套a>
                        <a href="javascript:;">墙纸a>
                        <a href="javascript:;">新款男鞋a>
                        <a href="javascript:;">耳机a>
                    div>
                div>
                <div class="search-code">
                    <a href="javascript:;">
                        <img src="./img/jnh.png" alt="">
                    a>
                div>
            div>
            
            <ul class="nav">
                <li class="left-nav">主题市场li>
                <li class="li">天猫li>
                <li class="li">聚划算li>
                <li class="li">|li>
                <li class="li">天猫商城li>
                <li class="li">司法拍卖li>
                <li class="li">淘宝心选li>
                <li class="li">|li>
                <li class="li">飞猪旅行li>
                <li class="li">智能生活li>
                <li class="li">苏宁易购li>
            ul>
            
            <div class="shop" id="">
                
                <ul class="left-items" id="left-items">
                    <li class="left-items-li">
                        <a href="javascript:;">女装a> /
                        <a href="javascript:;">男装a> /
                        <a href="javascript:;">内衣a>
                    li>
                    <li class="left-items-li">
                        <a href="javascript:;">鞋靴a> /
                        <a href="javascript:;">箱包a> /
                        <a href="javascript:;">配件a>

                    li>
                    <li class="left-items-li">
                        <a href="javascript:;">童装a> /
                        <a href="javascript:;">孕产a> /
                        <a href="javascript:;">玩具a>

                    li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装a> /
                        <a href="javascript:;">男装a> /
                        <a href="javascript:;">内衣a>

                    li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装a> /
                        <a href="javascript:;">男装a> /
                        <a href="javascript:;">内衣a>

                    li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装a> /
                        <a href="javascript:;">男装a> /
                        <a href="javascript:;">内衣a>

                    li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装a> /
                        <a href="javascript:;">男装a> /
                        <a href="javascript:;">内衣a>

                    li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装a> /
                        <a href="javascript:;">男装a> /
                        <a href="javascript:;">内衣a>

                    li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装a> /
                        <a href="javascript:;">男装a> /
                        <a href="javascript:;">内衣a>

                    li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装a> /
                        <a href="javascript:;">男装a> /
                        <a href="javascript:;">内衣a>

                    li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装a> /
                        <a href="javascript:;">男装a> /
                        <a href="javascript:;">内衣a>

                    li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装a> /
                        <a href="javascript:;">男装a> /
                        <a href="javascript:;">内衣a>

                    li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装a> /
                        <a href="javascript:;">男装a> /
                        <a href="javascript:;">内衣a>

                    li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装a> /
                        <a href="javascript:;">男装a> /
                        <a href="javascript:;">内衣a>

                    li>
                    <div class="left-items-content" id="left-items-content">

                    div>
                ul>
                
                <div class="img-box">
                    <div>
                        <img src="./img/tu1.jpg" alt="">
                        <img src="./img/tu2.jpg" alt="">
                    div>
                    <div>
                        <img src="./img/tu3.jpg" alt="">
                        <img src="./img/tu4.jpg" alt="">
                    div>
                div>
                
                <div class="tu-right">
                    <div class="right-icon">
                        <img src="./img/hi.png" alt="">
                    div>
                    <div class="right-btn">
                        <a href="javascript:;">登录a>
                        <a href="javascript:;">注册a>
                        <a href="javascript:;">开店a>
                    div>
                    <div class="right-warn">网上有害信息举报专区div>
                    <div class="right-info">
                        <ul class="info-top">
                            <li><a href="javascript:;">公告a>li>
                            <li><a href="javascript:;">规则a>li>
                            <li><a href="javascript:;">论坛a>li>
                            <li><a href="javascript:;">安全a>li>
                            <li><a href="javascript:;">公益a>li>
                        ul>
                        <ul class="info-bottom">
                            <li>公益阿里、腾讯等六家公司同台联合做公益li>
                            <li>淘宝造物节之城市秘密、聚划算88红包省钱卡li>
                        ul>
                    div>
                    <ul class="right-rechage">
                        <li><a class="icon icon-1" href="javascript:;">a>
                            <p>充话费p>
                        li>
                        <li><a class="icon icon-2" href="javascript:;">a>
                            <p>旅行p>
                        li>
                        <li><a class="icon icon-3" href="javascript:;">a>
                            <p>车险p>
                        li>
                        <li><a class="icon icon-4" href="javascript:;">a>
                            <p>游戏p>
                        li>
                        <li><a href="javascript:;" class="icon icon-1">a>
                            <p>充话费p>
                        li>
                        <li><a href="javascript:;" class="icon icon-2">a>
                            <p>旅行p>
                        li>
                        <li><a href="javascript:;" class="icon icon-3">a>
                            <p>车险p>
                        li>
                        <li><a href="javascript:;" class="icon icon-4">a>
                            <p>游戏p>
                        li>
                        <li><a href="javascript:;" class="icon icon-1">a>
                            <p>充话费p>
                        li>
                        <li><a href="javascript:;" class="icon icon-2">a>
                            <p>旅行p>
                        li>
                        <li><a href="javascript:;" class="icon icon-3">a>
                            <p>车险p>
                        li>
                        <li><a href="javascript:;" class="icon icon-4">a>
                            <p>游戏p>
                        li>
                        <li><a href="javascript:;" class="icon icon-1">a>
                            <p>充话费p>
                        li>
                        <li><a href="javascript:;" class="icon icon-2">a>
                            <p>旅行p>
                        li>
                        <li><a href="javascript:;" class="icon icon-3">a>
                            <p>车险p>
                        li>
                        <li><a href="javascript:;" class="icon icon-4">a>
                            <p>游戏p>
                        li>
                    ul>
                div>
            div>
        div>

        <div class="body-2">
            <div class="item">
                <div class="title">
                    <img src="./img/body-2-logo-1.jpg" alt="">
                    <span>与品质生活不期而遇span>
                div>
                <div class="content">
                    <div class="content-item">
                        <img src="./img/body-2-baby-1.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂p>
                        <p class="desc2">小狗图案不锈钢皂p>
                        <p class="desc3">13673人说好p>
                    div>
                    <div class="content-item">
                        <img src="./img/body-2-baby-2.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂p>
                        <p class="desc2">小狗图案不锈钢皂p>
                        <p class="desc3">13673人说好p>
                    div>
                    <div class="content-item">
                        <img src="./img/body-2-baby-3.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂p>
                        <p class="desc2">小狗图案不锈钢皂p>
                        <p class="desc3">13673人说好p>
                    div>
                div>
                <div class="content">
                    <div class="content-item">
                        <img src="./img/body-2-baby-1.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂p>
                        <p class="desc2">小狗图案不锈钢皂p>
                        <p class="desc3">13673人说好p>
                    div>
                    <div class="content-item">
                        <img src="./img/body-2-baby-2.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂p>
                        <p class="desc2">小狗图案不锈钢皂p>
                        <p class="desc3">13673人说好p>
                    div>
                    <div class="content-item">
                        <img src="./img/body-2-baby-3.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂p>
                        <p class="desc2">小狗图案不锈钢皂p>
                        <p class="desc3">13673人说好p>
                    div>
                div>
            div>
            <div class="item">
                <div class="title">
                    <img src="./img/body-2-logo-1.jpg" alt="">
                    <span>与品质生活不期而遇span>
                div>
                <div class="content">
                    <div class="content-item">
                        <img src="./img/body-2-baby-1.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂p>
                        <p class="desc2">小狗图案不锈钢皂p>
                        <p class="desc3">13673人说好p>
                    div>
                    <div class="content-item">
                        <img src="./img/body-2-baby-2.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂p>
                        <p class="desc2">小狗图案不锈钢皂p>
                        <p class="desc3">13673人说好p>
                    div>
                    <div class="content-item">
                        <img src="./img/body-2-baby-3.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂p>
                        <p class="desc2">小狗图案不锈钢皂p>
                        <p class="desc3">13673人说好p>
                    div>
                div>
                <div class="content">
                    <div class="content-item">
                        <img src="./img/body-2-baby-1.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂p>
                        <p class="desc2">小狗图案不锈钢皂p>
                        <p class="desc3">13673人说好p>
                    div>
                    <div class="content-item">
                        <img src="./img/body-2-baby-2.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂p>
                        <p class="desc2">小狗图案不锈钢皂p>
                        <p class="desc3">13673人说好p>
                    div>
                    <div class="content-item">
                        <img src="./img/body-2-baby-3.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂p>
                        <p class="desc2">小狗图案不锈钢皂p>
                        <p class="desc3">13673人说好p>
                    div>
                div>
            div>
        div>

        <div class="body-3">
            <h1 class="title-h1">
                <div class="icon">div>热卖单品
            h1>
            <div class="content">
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长p>
                    <p class="desc-2">评价：17705 收藏：6875p>
                    <p>p>
                div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长p>
                    <p class="desc-2">评价：17705 收藏：6875p>
                    <p>p>
                div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长p>
                    <p class="desc-2">评价：17705 收藏：6875p>
                    <p>p>
                div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长p>
                    <p class="desc-2">评价：17705 收藏：6875p>
                    <p>p>
                div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长p>
                    <p class="desc-2">评价：17705 收藏：6875p>
                    <p>p>
                div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长p>
                    <p class="desc-2">评价：17705 收藏：6875p>
                    <p>p>
                div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长p>
                    <p class="desc-2">评价：17705 收藏：6875p>
                    <p>p>
                div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长p>
                    <p class="desc-1">评价：17705 收藏：6875p>
                    <p>p>
                div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长p>
                    <p class="desc-2">评价：17705 收藏：6875p>
                    <p>p>
                div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长p>
                    <p class="desc-2">评价：17705 收藏：6875p>
                    <p>p>
                div>
            div>
        div>

        <div class="footer">
            <div class="item">
                <h2 class="title">消费者保证h2>
                <div>
                    <span>保障范围span>
                    <span>退货退款流程span>
                    <span>服务中心span>
                    <span>更多特色服务span>
                div>
            div>
            <div class="item">
                <h2 class="title">消费者保证h2>
                <div>
                    <span>保障范围span>
                    <span>退货退款流程span>
                    <span>服务中心span>
                    <span>更多特色服务span>
                div>
            div>
            <div class="item">
                <h2 class="title">消费者保证h2>
                <div>
                    <span>保障范围span>
                    <span>退货退款流程span>
                    <span>服务中心span>
                    <span>更多特色服务span>
                div>
            div>
            <div class="item">
                <h2 class="title">消费者保证h2>
                <div>
                    <span>保障范围span>
                    <span>退货退款流程span>
                    <span>服务中心span>
                    <span>更多特色服务span>
                div>
            div>
        div>
    div>


    <script src="./js/index.js">script>
body>

html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
  • 381
  • 382
  • 383
  • 384
  • 385
  • 386
  • 387
  • 388
  • 389
  • 390
  • 391
  • 392
  • 393
  • 394
  • 395
  • 396
  • 397
  • 398
  • 399
  • 400
  • 401
  • 402
  • 403
  • 404
  • 405
  • 406
  • 407
  • 408
  • 409
  • 410
  • 411
  • 412
  • 413
  • 414
  • 415
  • 416
  • 417
  • 418
  • 419
  • 420
  • 421
  • 422
  • 423
  • 424
  • 425
  • 426
  • 427
  • 428
  • 429
  • 430
  • 431
  • 432
  • 433
  • 434
  • 435
  • 436
  • 437
  • 438
  • 439
  • 440
  • 441
  • 442
  • 443
  • 444
  • 445
  • 446
  • 447
  • 448
  • 449
  • 450
  • 451
  • 452
  • 453
  • 454
  • 455
  • 456
  • 457
  • 458
  • 459
  • 460
  • 461
  • 462
  • 463
  • 464
  • 465
  • 466
  • 467
  • 468
  • 469
  • 470
  • 471
  • 472
  • 473
  • 474
  • 475
  • 476
  • 477
  • 478
  • 479
  • 480
  • 481
  • 482
  • 483
  • 484
  • 485
  • 486
  • 487
  • 488
  • 489
  • 490
  • 491
  • 492
  • 493
  • 494
  • 495

CSS部分


*{
    margin: 0px;
    padding: 0px;
    list-style: none;
    text-decoration: none;
    font-size: 13px;
    color:#6C6C6C;
    box-sizing: border-box;
    /* background: rgb(245, 238, 238) ; */
}
.tx{
    color: #f40;
}
.web-shop{
    min-width: 1170px;
    background: #f4f4f4;
}
/* 头部导航部分 */
.web-shop .header{
    width: 100%;
    background-color:#F5F5F5;
}
.web-shop .header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1168px;
    height: 35px;  
    margin: 0 auto;
    line-height: 35px;
}
.web-shop .header .container .nav {
    display: flex;
}
.web-shop .header .container .nav li{
    padding: 0 14px;
    display: flex;
}
.web-shop .header .container .nav li a{
    position: relative;
    color:#6c6c6c;
    font-size: 12px;
    cursor: pointer; 
}
.web-shop .header .container .nav li .arrow::after{
    content: '';
    position: absolute;
    right: -12px;
    top: 1px;
    width: 0px;
    height: 0px;
    margin-top: 15px;
    margin-left: 5px;
    border-top: 4px solid #aaa;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: 3px solid transparent;
}
.web-shop .header .container .nav .orange a{
    color:#f40;
}
.web-shop .header .container .nav a:hover{
    color:#f40;
    text-decoration: underline;
}

/* 内容区域 */
.web-shop .body-1{
    width: 1167px;
    margin: 0 auto;
}
/*输入框部分 */
.web-shop .body-1 .search{
    height: 121px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.web-shop .body-1 .search .search-logo{
    width: 180px;
    height: 100px;
    background: url(../img/taobao.gif) center center;
    cursor: pointer;
}
.body-1 .search .search-box{
    position: relative;
    padding-right: 30px;
}
.body-1 .search .search-box .search-tab{
    display: flex;
    position: absolute;
    left: 20px;
    background: #ff5400;
}
.body-1 .search .search-box .search-tab a{
    padding: 4px 10px;
    display: inline-block;
    color: #fff;

}
.body-1 .search .search-box .search-input{
    display: flex;
    height: 33px;
    padding-top: 26px
}
.body-1 .search .search-box .search-input input{
    height: 39px;
    width: 554px;
    border: 3px solid #ff5400;   
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.body-1 .search .search-box .search-input .btn{
    height: 39px;
    width: 56px;
    border: 3px solid #ff5400;   
    background: #ff5400;
    color: #fff;
    border-left: 0; 
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.body-1 .search .search-box .search-choose{
    display: flex;
    justify-content: space-between;
    margin-top: 31px;
}
/* 导航栏 */
.body-1 .nav{
    display: flex;
    height: 30px;
    background-color: #ff8700;
    line-height: 30px;
}
.body-1 .nav .li{
    display: flex;
    height: 30px;
    padding: 0 15px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}
.body-1 .nav .left-nav{
    width: 190px;
    text-align: center;
    font-size: 16px;
    background: #ff5000;
    color: #fff;
    line-height: 30px;
}

/* 列表框和图片区域 */
.body-1 .shop{
    display: flex;
    justify-content: space-between;
    height: 500px;
}
.body-1 .shop .left-items{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 190px;
    height: 100%;
    padding-top: 10px;
    border: 1px solid #ff5000;
    border-top: 0;
    box-sizing: border-box;
}
.body-1 .shop .left-items .left-items-li{
    text-align: center;
    padding: 8px 15px;
}
.body-1 .shop .left-items .left-items-li:hover{
    background: #ff4400;
    color: #fff;
}
.body-1 .shop .left-items .left-items-li:hover a{
    color: #fff;
}
.body-1 .shop .left-items .left-items-content{
    position: absolute;
    top: 0;
    left: 187px;
    display: none;
    width: 500px;
    height: 100%;
    background: rgba(0,0,0,0.8);
    color: #fff;
}
/* 图片区域--------------------------------------------------- */
.body-1 .shop .img-box{
    width: 700px;
    height: 500px;
    padding-top: 5px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}
/* 右区域 */
.body-1 .shop .tu-right{ 
    width: 275px;
    height: 495px;
    background-color: #fff;
    border: 1px solid #ff5000;
    border-top: 0;
}
.body-1 .shop .tu-right .icon-box{
    height: 97px;
    width: 100%;
    text-align: center;
}
.body-1 .shop .tu-right .right-icon img{
    width:273px;
    height:91px;
}
.body-1 .shop .tu-right .right-btn{
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 25px;
    margin-top: 8px;
    margin-bottom: 20px;
}
.body-1 .shop .tu-right .right-btn a{
    display: inline-block;
    width: 75px;
    line-height: 25px;
    text-align: center;
    color: #FFF;
    background-color: #ff5000;
    border: 1px solid red;
    border-radius: 5px;
}
.body-1 .shop .tu-right .right-warn{
    width: 100%;
    height: 25px;
    line-height: 25px;
    text-align: center;
    margin: 0 auto;
    background-color: #ffe4dd;
}
.body-1 .shop .tu-right .right-info .info-top{
    display: flex;
    justify-content: space-around;
}
.body-1 .shop .tu-right .right-info .info-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}
.body-1 .shop .tu-right .right-info .info-bottom li{
    font-size: 12px;
}
.body-1 .shop .tu-right .right-rechage{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.body-1 .shop .tu-right .right-rechage li{
    display: inline-block;
    width: 67.6px;
    padding: 3px;
    border: 1px solid #f4f4f4;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}
.body-1 .shop .tu-right .right-rechage li .icon{
    display: inline-block;
    height: 36px;
    width: 40px;
}
.body-1 .shop .tu-right .right-rechage li .icon-1{
    background: url(../img/huafei.png) 50% 0 no-repeat; 
}
.body-1 .shop .tu-right .right-rechage li .icon-2{
    background: url(../img/huafei.png) 50% -43px no-repeat; 
}
.body-1 .shop .tu-right .right-rechage li .icon-3{
    background: url(../img/huafei.png) 50% -86px no-repeat; 
}
.body-1 .shop .tu-right .right-rechage li .icon-4{
    background: url(../img/huafei.png) 50% -129px no-repeat; 
}

.body-2{
    display: flex;
    justify-content: space-between;
    width: 1167px;
    margin: 10px auto 0;
}
.body-2 .item {
    width: 580px;
    padding: 13px;
    background: #fff;
}
.body-2 .item .title{
    display: flex;
    align-items: center;
}
.body-2 .item .title img{
    width: 75px;
    height: 30px;
    margin-right: 10px;
}
.body-2 .item .title span{
    color: #aaa;
}
.body-2 .item .content{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 5px;
}
.body-2 .item .content-item{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.body-2 .item .content-item img{
    width: 180px;
    height: 180px;
}
.body-2 .item .content-item .desc1{
    margin-top: 5px;
    font-size: 16px;
    line-height: 28px;
}
.body-2 .item .content-item .desc2{
    margin-top: 5px;
    font-size: 16px;
    line-height: 24px;
    color: #999;
}
.body-2 .item .content-item .desc3{
    line-height: 22px;
    margin-top: 12px;
    color: #35b1ff;
}

.body-3 {
    width: 1167px;
    margin: 10px auto 0;
    background: #fff;
}
.body-3 .title-h1{
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    font-size: 18px;
    color: orange;
    padding-left: 20px;
    border-bottom: 1px solid #f4f4f4;
}
.body-3 .title-h1 .icon{
    width: 4px;
    height: 14px;
    margin-right: 10px;
    background: orange;
}
.body-3 .content{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.body-3 .content .item{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
    padding: 12px;
    border: 1px solid #f4f4f4;

}
.body-3 .content .item:hover{
    border-color: #ff4400;
}
.body-3 .content .item img{
    width: 197px;
    height: 197px;
}
.body-3 .content .item p{
    width: 100%;
    margin-top: 5px;
}
.body-3 .content .item .desc-1{
    font-size: 16px;
    color: #aaa;
}
.body-3 .content .item .desc-2{
    font-size: 13px;
}

.footer {
    display: flex;
    justify-content: space-between;
    
    width: 1167px;
    margin: 0 auto;
}
.footer .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 241px;
    height: 300px;
}
.footer .item .title{
    font-size: 22px;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
  • 381
  • 382
  • 383
  • 384
  • 385
  • 386
  • 387
  • 388
  • 389
  • 390
  • 391
  • 392
  • 393
  • 394
  • 395
  • 396
  • 397
  • 398
  • 399
  • 400
  • 401
  • 402
  • 403
  • 404
  • 405
  • 406
  • 407
  • 408
  • 409
  • 410
  • 411
  • 412
  • 413
  • 414
  • 415
  • 416
  • 417
  • 418
  • 419

Js部分

var oNavContentData = [
    { title: '标题1', list1: [1, 2, 3, 4, 5], list2: [1, 2, 3, 4, 5], list3: [1, 2, 3, 4, 5] },
    { title: '标题2', list1: [1, 2, 3, 4, 5], list2: [1, 2, 3, 4, 5], list3: [1, 2, 3, 4, 5] },
    { title: '标题3', list1: [1, 2, 3, 4, 5], list2: [1, 2, 3, 4, 5], list3: [1, 2, 3, 4, 5] },
    { title: '标题4', list1: [1, 2, 3, 4, 5], list2: [1, 2, 3, 4, 5], list3: [1, 2, 3, 4, 5] },
    { title: '标题5', list1: [1, 2, 3, 4, 5], list2: [1, 2, 3, 4, 5], list3: [1, 2, 3, 4, 5] },
    { title: '标题6', list1: [1, 2, 3, 4, 5], list2: [1, 2, 3, 4, 5], list3: [1, 2, 3, 4, 5] },
    { title: '标题7', list1: [1, 2, 3, 4, 5], list2: [1, 2, 3, 4, 5], list3: [1, 2, 3, 4, 5] },
    { title: '标题8', list1: [1, 2, 3, 4, 5], list2: [1, 2, 3, 4, 5], list3: [1, 2, 3, 4, 5] },
    { title: '标题9', list1: [1, 2, 3, 4, 5], list2: [1, 2, 3, 4, 5], list3: [1, 2, 3, 4, 5] },
    { title: '标题10', list1: [1, 2, 3, 4, 5], list2: [1, 2, 3, 4, 5], list3: [1, 2, 3, 4, 5] },
    { title: '标题11', list1: [1, 2, 3, 4, 5], list2: [1, 2, 3, 4, 5], list3: [1, 2, 3, 4, 5] },
    { title: '标题12', list1: [1, 2, 3, 4, 5], list2: [1, 2, 3, 4, 5], list3: [1, 2, 3, 4, 5] },
    { title: '标题13', list1: [1, 2, 3, 4, 5], list2: [1, 2, 3, 4, 5], list3: [1, 2, 3, 4, 5] },
    { title: '标题14', list1: [1, 2, 3, 4, 5], list2: [1, 2, 3, 4, 5], list3: [1, 2, 3, 4, 5] },
]
var oNavItemBox = document.getElementById('left-items');
var oNavItemLi = document.querySelectorAll('.left-items-li'); //列表内容
var oNavContent = document.getElementById('left-items-content'); //内容区域

oNavItemLi.forEach((item, index) => {
    item.onmouseover = function(e) {
        oNavContent.style.display = 'block'
        oNavContent.innerText = oNavContentData[index].title
    }
    item.onmouseout = function(e) {
        oNavContent.style.display = 'none'
        oNavContent.innerText = ''
    }
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

代码下载

github仓库下载
或加我WX（j565017805）联系我。

github下载步骤（默认你已经安装了git）

第一步

第二步

在制定目录下，例如：我的Documents/gitbox文件夹下
windows => 进入git bash
mac => 终端 或 iterm
在这里插入图片描述
执行
在这里插入图片描述
红框部分替换成刚刚复制的链接

第三步

在编辑器上打开下载的文件，在浏览器上打开对应的 .html 文件。

该页面仅为静态页面，实现同一个效果的方式与很多种，希望能帮到大家～

注：本文转载自blog.csdn.net的余光、的文章"https://blog.csdn.net/jbj6568839z/article/details/101070079"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！