电商官网静态页面

作为一个前端开发，基础页面布局和样式是必备，我们拿电商具体（模块、丰富度）都足够

在这里插入图片描述

仿小米官网静态页面

小米静态官网预览地址

html部分

<body>
    <div id="app">
        <div class="fix-tool">
            <a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航1a>
            <a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航2a>
            <a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航3a>
            <a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航4a>
            <a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航5a>
        div>
        <div class="main-header">
            <div class="main-nav">
                <div class="list">
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">小米商城a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">MIUIa>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">IoTa>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">金融a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">有品a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">小爱开放平台a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">企业团购a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">资质证照a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">协议规则a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">下载appa>
                div>
                <div class="login">
                    <div class="item">登陆div>
                    <div class="item">注册div>
                    <div class="item">消息通知div>
                div>
            div>
        div>
        <div class="main-body">
            
            <div class="container-1">
                <img src="./img/logo-1.jpg">
                <div class="nav-list">
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">小米手机 a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">Redmi 红米a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">电视a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">笔记本a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">家电a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">路由器a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">智能硬件a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">服务a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">社区a>
                div>
                <input type="text" placeholder="小米电视 小米音响">
                <a class="hid-content" target="_blank" href="https://blog.csdn.net/jbj6568839z">
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55Ap>
                        <p>1799元p>
                    div>
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55Ap>
                        <p>1799元p>
                    div>
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55Ap>
                        <p>1799元p>
                    div>
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55Ap>
                        <p>1799元p>
                    div>
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55Ap>
                        <p>1799元p>
                    div>
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55Ap>
                        <p>1799元p>
                    div>
                a>
            div>
            
            <div class="container-2">
                <ul class="left-nav">
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">手机 电话卡a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">电视 盒子a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">笔记本 显示器 平板a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">家电 插线板a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">出行 穿戴a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">智能 路由器a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">电源 配件a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">健康 配件a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">耳机 音箱a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">生活 箱包a>
                    <div class="hid-content">
                        
                    div>
                ul>
                <div id="slider-box" class="slider-box slider-box-1">
                    <div class="switch">
                        <span class="btn" id="per" onclick="pre()">左span>
                        <span class="btn" id="next" onclick="next()">右span>
                    div>
                    <ul class="nav">
                        <li>li>
                        <li>li>
                        <li>li>
                        <li>li>
                        <li>li>
                    ul>
                div>
            div>
            
            <div class="container-3">
                <div class="nav-list">
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀span>
                    div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀span>
                    div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀span>
                    div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀span>
                    div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀span>
                    div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀span>
                    div>
                div>
                <img class="img-con-3" src="./img/con-3-1.jpg">
                <img class="img-con-3" src="./img/con-3-2.jpg">
                <img class="img-con-3" src="./img/con-3-3.jpg">
            div>
            
            <div class="container-4">
                <div class="box">
                    <div class="title">小米闪购div>
                    <div class="content">
                        <div class="item item-1">
                            <div class="img">div>
                            <p class="name">小米净水器500G 白色p>
                            <p>感应出泡，高效清洁p>
                            <div class="price"><span class="price-now">888元span><span class="price-last">1120元span>
                            div>
                        div>
                        <div class="item item-2">
                            <div class="img">div>
                            <p class="name">小米净水器500G 白色p>
                            <p class="desc">感应出泡，高效清洁p>
                            <div class="price"><span class="price-now">888元span><span class="price-last">1120元span>
                            div>
                        div>
                        <div class="item item-3">
                            <div class="img">div>
                            <p class="name">小米净水器500G 白色p>
                            <p class="desc">感应出泡，高效清洁p>
                            <div class="price"><span class="price-now">888元span><span class="price-last">1120元span>
                            div>
                        div>
                        <div class="item item-4">
                            <div class="img">div>
                            <p class="name">小米净水器500G 白色p>
                            <p class="desc">感应出泡，高效清洁p>
                            <div class="price"><span class="price-now">888元span><span class="price-last">1120元span>
                            div>
                        div>
                        <div class="item item-5">
                            <div class="img">div>
                            <p class="name">小米净水器500G 白色p>
                            <p class="desc">感应出泡，高效清洁p>
                            <div class="price"><span class="price-now">888元span><span class="price-last">1120元span>
                            div>
                        div>
                    div>
                div>
            div>
            
            <div class="container-5">
                <img src="./img/banner-2.jpg" alt="">
            div>
            
            <div class="container-6">
                <div class="box">
                    <div class="title">
                        <span>手机span>
                        <span>查看全部span>
                    div>
                    <div class="content">
                        <img class="phone-img" src="./img/phone-logo.jpg" alt="">
                        <div class="phone-box">
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Prop>
                                <p class="desc">1亿像素 五摄四像p>
                                <p class="price">2799元起p>
                            div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Prop>
                                <p class="desc">1亿像素 五摄四像p>
                                <p class="price">2799元起p>
                            div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Prop>
                                <p class="desc">1亿像素 五摄四像p>
                                <p class="price">2799元起p>
                            div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Prop>
                                <p class="desc">1亿像素 五摄四像p>
                                <p class="price">2799元起p>
                            div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Prop>
                                <p class="desc">1亿像素 五摄四像p>
                                <p class="price">2799元起p>
                            div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Prop>
                                <p class="desc">1亿像素 五摄四像p>
                                <p class="price">2799元起p>
                            div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Prop>
                                <p class="desc">1亿像素 五摄四像p>
                                <p class="price">2799元起p>
                            div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Prop>
                                <p class="desc">1亿像素 五摄四像p>
                                <p class="price">2799元起p>
                            div>
                        div>
                    div>
                div>
            div>
            
            
            <div class="container-7">
                <img src="./img/banner-1.jpg" alt="">
            div>
        div>
        <div class="main-footer">
            <div class="container">
                <div class="nav">
                    <div class="item">预约维修服务div>
                    <div class="item">7天无理由退货div>
                    <div class="item">15天免费换货div>
                    <div class="item">满150元包邮div>
                    <div class="item" >520余家售后网点div>
                div>
                <div class="feature-box">
                    <div class="feature">
                        <dl class="item">
                            <dt>帮助中心dt>
                            <dd>账户管理dd>
                            <dd>账户管理dd>
                            <dd>账户管理dd>
                        dl>
                        <dl class="item">
                            <dt>帮助中心dt>
                            <dd>账户管理dd>
                            <dd>账户管理dd>
                            <dd>账户管理dd>
                        dl>
                        <dl class="item">
                            <dt>帮助中心dt>
                            <dd>账户管理dd>
                            <dd>账户管理dd>
                            <dd>账户管理dd>
                        dl>
                        <dl class="item">
                            <dt>帮助中心dt>
                            <dd>账户管理dd>
                            <dd>账户管理dd>
                            <dd>账户管理dd>
                        dl>
                        <dl class="item" style="border-right: 1px solid #ccc;">
                            <dt>帮助中心dt>
                            <dd>账户管理dd>
                            <dd>账户管理dd>
                            <dd>账户管理dd>
                        dl>
                    div>
                    <div class="service">
                        <p class="center">WX: j565017805p>
                        <p class="center">CSDN:https://blog.csdn.net/jbj6568839z<br/>欢迎点赞！！！p>
                        <p class="center">博健p>
                    div>
                div>
            div>
        div>
        <img class="footer-img" src="./img/footer.png" alt="">
    div>

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

  • 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

CSS部分

#app{
    min-width: 1226px;
    margin-right: auto;
    margin-left: auto;
}
img{
    display: block;
}
.center{
    text-align: center;
}
/* 头部 */
.main-header{
    position: relative;
    z-index: 30;
    height: 40px;
    font-size: 12px;
    color: #b0b0b0;
    background: #333;
}
.main-header .main-nav{
    width: 1226px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
}
.main-nav .list,.login{
    display: flex;
}
.main-nav .list .item{
    color: #b0b0b0;
    margin-right: 15px;
}
.main-nav .list .item:hover{
    color: #fff;
}
.main-nav .login .item{
    color: #b0b0b0;
    margin-left: 15px;
}
/* 主内容 */
.main-body{
    width: 100%;
}
/* 盒子一 */
.container-1{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1226px;
    margin: 0 auto;
    height: 100px;
}
.container-1 img{
    display: block;
    width: 52px;
    height: 52px;
}
.container-1 .hid-content{
    position: absolute;
    top: 100px;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 0;
    background: #fff;
    overflow: hidden;
    transition: height .28s;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.container-1 .hid-content .item{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.container-1 .hid-content .item img{
    width: 160px;
    height: 110px;
    border-right: 1px solid #ddd;
}
.container-1 .nav-list .item{
    color: #333;
    font-size: 16px;
    transition: color .3s ease-in-out;
    margin-right: 15px;
}
.container-1 .nav-list .item:hover{
    color: #f40;
}
.container-1:hover  .hid-content{
    height: 200px;
    border-top: 1px solid #ccc;
    box-shadow: 0 3px 5px rgba(0,0,0,0.4);    
}
.container-1 input{
    width: 223px;
    height: 48px;
    border: 1px solid #e0e0e0;
    text-align: right;
    padding: 10px;
}

/* 盒子二 */
.container-2{
    position: relative;
    width: 1226px;
    margin: 0 auto;
}
.container-2 .left-nav{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    height: 460px;
    border: 0;
    color: #fff;
    background: rgba(105,101,101,.6);
}
.container-2 .left-nav:hover .hid-content{
    display: block;
}
.container-2 .left-nav .item{
    position: relative;
    display: block;
    padding-left: 30px;
    height: 42px;
    line-height: 42px;
    width: 230px;
    color: #fff;
    font-weight: 350;
}
.container-2 .left-nav .hid-content{
    position: absolute;
    top: 0;
    left: 230px;
    width: 400px;
    height: 100%;
    border: 1px solid #ccc;
    padding: 30px;
    background: #fff;
    display: none;
}
.container-2 .left-nav .item:hover{
    background: #ff6700;
}
.container-2 .slider-box{
    position: relative;
    width: 1226px;
    height: 460px;
}
.container-2 .slider-box-1{
    background: url('../img/1.jpg');
    background-size: cover;
}
.container-2 .slider-box-2{
    background: url('../img/2.jpg');
    background-size: cover;
}
.container-2 .slider-box-3{
    background: url('../img/3.jpg');
    background-size: cover;
}
.container-2 .slider-box-4{
    background: url('../img/4.jpg');
    background-size: cover;
}
.container-2 .slider-box-5{
    background: url('../img/5.jpg');
    background-size: cover;
}
.container-2 .slider-box .switch{
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -20px;
    width: 996px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.container-2 .slider-box .switch .btn{
    width: 30px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: rgba(0,0,0,0.1);
    color: #eee;
}
.container-2 .slider-box .switch .btn:hover{
    color: #F40;
    cursor: pointer;
}
.container-2 .slider-box .nav{
    position: absolute;
    right: 50px;
    bottom: 0;
    width: 90px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.container-2 .slider-box .nav li{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #bbb;
}

/* 盒子三 */
.container-3{
    display: flex;
    justify-content: space-between;
    margin: 20px auto 0;
    width: 1226px;
    padding-bottom: 20px;
}
.container-3 .nav-list{
    width: 234px;
    height: 170px;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: #5f5750;
}
.container-3 .nav-list .item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 78px;
    height: 85px;
    transition: all .28s;
}
.container-3 .nav-list .item:hover{
    cursor: pointer;
    opacity: 0.5;
}
.container-3 .nav-list .item .icon{
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 4px;
}
.container-3 .img-con-3{
    width: 316px;
    height: 170px;
}

/* 盒子四 */
.container-4{
    width: 100%;
    background: #f5f5f5;
}
.container-4 .box{
    width: 1226px;
    margin: 0 auto;
}
.container-4 .box .title{
    font-size: 22px;
    line-height: 58px;
}
.container-4 .box .content{
    display: flex;
    justify-content: space-between;
}
.container-4 .box .content .item{
    width: 234px;
    height: 399px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.container-4 .box .content .item .img{
    width: 200px;
    height: 200px;
}
.container-4 .box .content .item .name{
    font-size: 16px;
    color: #000;
}
.container-4 .box .content .item .desc{
    font-size: 12px;
    color: #aaa;
    margin-top: 5px;
}
.container-4 .box .content .item .price{
    margin-top: 15px;
}
.container-4 .box .content .item .price .price-now{
    color: #f40;
}
.container-4 .box .content .item .price .price-last{
    color: #CCC;
    text-decoration: line-through;
    margin-left: 2px;
}
.container-4 .box .content .item .img{
    background: url('../img/con-4-1.jpg') center no-repeat;
    background-size: 200px 200px;
}
.container-4 .box .content .item{
    background: #fff;
}
.container-4 .box .content .item-1{
    border-top: 1px solid palevioletred;
}
.container-4 .box .content .item-2{
    border-top: 1px solid red;
}
.container-4 .box .content .item-3{
    border-top: 1px solid green;
}
.container-4 .box .content .item-4{
    border-top: 1px solid orange;
}
.container-4 .box .content .item-5{
    border-top: 1px solid blue;
}

/* 盒子五 */
.container-5{
    background: #f5f5f5;
    padding: 16px 0;
}
.container-5 img{
    width: 1226px;
    height: 120px;
    margin: 0 auto;
}

/* 盒子六 */
.container-6{
    background: #f5f5f5;
}
.container-6 .box{
    width: 1226px;
    margin: 0 auto;
}
.container-6 .box .title{
    display: flex;
    justify-content: space-between;
    font-size: 22px;
    line-height: 58px;
}
.container-6 .box .content{
    display: flex;
    justify-content: space-between;
}
.container-6 .box .content .phone-img{
    width: 234px;
    height: 634px;
}
.container-6 .box .content .phone-box{
    width: 978px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.container-6 .box .content .phone-box .item{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 234px;
    height: 310px;
    background: #fff;
    padding: 20px 0;
}
.container-6 .box .content .phone-box .item img{
    width: 160px;
    height: 160px;
}
.container-6 .box .content .phone-box .item .name{
    margin-top: 10px;
    margin-bottom: 3px;
}
.container-6 .box .content .phone-box .item .desc{
    line-height: 24px;
    color: #bbb;
}
.container-6 .box .content .phone-box .item .price{
    margin-top: 15px;
    font-size: 16px;
    color: #f40;
}

/* 盒子七 */
.container-7{
    background: #f5f5f5;
    padding: 16px 0;
}
.container-7 img{
    width: 1226px;
    height: 120px;
    margin: 0 auto;
}

.main-footer{

}
.main-footer .container{
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
}
.main-footer .container .nav{
    display: flex;
    justify-content: space-between;
    height: 80px;
    padding: 27px 0;
    border-bottom: 1px solid #ccc;
}
.main-footer .container .nav .item{
    width: 243px;
    text-align: center;
    transition: color .28s;
}
.main-footer .container .nav .item:hover{
    color: #f40;
    cursor: pointer;
}
.main-footer .container .nav .item:not(:last-child){
    border-right: 1px solid #ccc;
}
.main-footer .container .feature-box{
    display: flex;
    justify-content: space-between;
}
.main-footer .container .feature-box .feature{
    display: flex;
    padding: 30px 0;
}
.main-footer .container .feature-box .feature .item{
    width: 180px;
}
.main-footer .container .feature-box .feature .item dt{
    height: 50px;
    line-height: 50px;
    font-size: 16px;
}
.main-footer .container .feature-box .feature .item dd{
    line-height: 30px;
    color: rgba(0,0,0,0.6);
}
.main-footer .container .feature-box .service{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 250px;
    padding: 30px 0;
}
.main-footer .container .feature-box .service p:nth-child(1){
    margin: 0 0 5px;
    font-size: 22px;
    line-height: 1;
    color: #ff6700;
}
.main-footer .container .feature-box .service p:nth-child(2){
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 20px;
}
.main-footer .container .feature-box .service p:nth-child(3){
    border: 1px solid #ff6700;
    background: #fff;
    color: #ff6700;
    width: 118px;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
    cursor: pointer;
}
.footer-img{
    width: 1226px;
    height: auto;
    margin: 0 auto;
}

.fix-tool{
    position: fixed;
    top: 55%;
    display: flex;
    flex-direction: column;
    width: 60px;
    height: 300px;
    background: #fff;
    left: 50%;
    margin-left: 613px;
    border: 1px solid #ccc;
}
.fix-tool a{
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
}
.fix-tool a:hover{
    background: rgba(0,0,0,0.2);
}

  • 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
  • 496
  • 497
  • 498
  • 499
  • 500
  • 501
  • 502
  • 503
  • 504
  • 505
  • 506
  • 507
  • 508
  • 509
  • 510
  • 511
  • 512

注意如果粘贴过去的代码和示例不一样，那可能是因为我对一些标签样式进行了初始化，消除了诸如a标签，li标签等默认样式。

  • 创建basic.css文件
  • 将下方代码粘贴进去
  • 在html中用 link标签引入
/*公共样式--开始*/
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
    margin: 0;
    padding: 0;
}
*{box-sizing: border-box;}
html, body {
    min-height: 100%;
}
body {
    font-family: "Microsoft YaHei";
    font-size:14px;
    color:#333;
}
h1, h2, h3, h4, h5, h6{font-weight:normal;}
ul,ol {
    list-style: none;
}
 
img {
    border: none;
    vertical-align: middle;
}
 
a {
    text-decoration: none;
    color: #232323;
}
 
table {
    border-collapse: collapse;
    table-layout: fixed;
}
 
input, textarea {
    outline: none;
    border: none;
}
 
textarea {
    resize: none;
    overflow: auto;
}
 
.clearfix {
    zoom: 1;
}
.clearfix:after {
    content: ".";
    width: 0;
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    overflow:hidden;
}
 
.fl {
    float: left
}
 
.fr {
    float: right
}
 
.tl {
    text-align: left;
}
 
.tc {
    text-align: center
}
 
.tr {
    text-align: right;
}
 
.ellipse {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inline{
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

  • 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

如果帮助到了您，不妨去我的github仓库点个star吧～

点击传送门进入代码仓库
点击star

在这里插入图片描述

好像一个循序善诱的老奶奶。。。谢谢大家

PS：作为静态网页，练习的主要是布局能力，即DIV+CSS结合后的能力

我也考虑过在这基础上加上js（jQ）的代码更贴近真实的网页，更多的交互与否取决于你们的需要，如果对你们有帮助，请留言吧～

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

评论记录：

未查询到任何数据！