跟随黑马学前端-18，品优购项目

第十八天：品优购项目

标准总是过时的，这让它们成为了标准。

学习目标

  • 能够独立自主完成品优购首页制作

  • 能够独立自主完成品优购列表页制作

  • 能够独立自主完成品优购注册页制作

  • 能够把品优购网站部署上线

网站制作流程

image-20230101153654191

品优购项目规划

项目整体介绍

  • 项目名称：品优购

  • 项目描述：品优购是一个电商网页，我们要完成PC端首页、列表页、注册页的制作

学习目的

  1. 电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术

  2. 品优购项目能复习、总结当前学习的布局技术

  3. 写完品优购项目能对实际开发中制作PC端页面流程有一个整体的感知

  4. 为后端学习移动端项目做铺垫

开发工具

VSCode Photoshop Chrome

技术栈

  • 利用HTML+CSS3手动布局，可以大量使用H5新增标签和样式

  • 采取结构与样式相分离，模块化开发

  • 良好的代码规范有利于团队更好的开发协作，提高代码质量。因此品优购项目中，需要遵守以下规范：

    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
    513
    514
    515
    516
    517
    518
    519
    520
    521
    522
    523
    524
    525
    526
    527
    528
    529
    530
    531
    532
    533
    534
    535
    536
    537
    538
    539
    540
    541
    542
    543
    544
    545
    546
    547
    548
    549
    550
    551
    552
    553
    554
    555
    556
    557
    558
    559
    560
    561
    562
    563
    564
    565
    566
    567
    568
    569
    570
    571
    572
    573
    574
    575
    576
    577
    578
    579
    580
    581
    582
    583
    584
    585
    586
    587
    588
    589
    590
    591
    592
    593
    594
    595
    596
    597
    598
    599
    600
    601
    602
    603
    604
    605
    606
    607
    608
    609
    610
    611
    612
    613
    614
    615
    616
    617
    618
    619
    620
    # 代码规范

    ## 1. 概述

    欢迎使用品优购代码规范， 这个是我借鉴京东前端代码规范，组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范，

    以下规范是团队基本约定的内容，必须严格遵循。

    #### HTML规范

    基于 [W3C](http://www.w3.org/)、[苹果开发者](https://developer.apple.com/) 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。

    #### 图片规范

    了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。

    #### CSS规范

    统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。

    #### 命名规范

    从 `目录`、`图片`、`HTML/CSS文件`、`ClassName` 的命名等层面约定规范团队的命名习惯，增强团队代码的可读性。

    ##  2. HTML 规范

    ###  DOCTYPE 声明

    HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：

    ~~~html
    <!DOCTYPE html>
    ~~~

    **HTML5标准模版**

    ```html
    <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
      <meta charset="UTF-8">
      <title>HTML5标准模版</title>
      </head>
      <body>

      </body>
    </html>
    ```

    ### 页面语言lang

    推荐使用属性值 `cmn-Hans-CN`（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 `zh-CN` 属性值

    ```
    <html lang="zh-CN">
    ```

    更多地区语言参考：

    ```
    zh-SG 中文 (简体, 新加坡)   对应 cmn-Hans-SG 普通话 (简体, 新加坡)
    zh-HK 中文 (繁体, 香港)     对应 cmn-Hant-HK 普通话 (繁体, 香港)
    zh-MO 中文 (繁体, 澳门)     对应 cmn-Hant-MO 普通话 (繁体, 澳门)
    zh-TW 中文 (繁体, 台湾)     对应 cmn-Hant-TW 普通话 (繁体, 台湾)
    ```

    ### charset 字符集合

    一般情况下统一使用 “UTF-8” 编码

    ```
    <meta charset="UTF-8">
    ```

    由于历史原因，有些业务可能会使用 “GBK” 编码

    ```
    <meta charset="GBK">
    ```

    请尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 [IETF对UTF-8的定义](http://www.ietf.org/rfc/rfc3629)，其编码标准的写法是 “UTF-8”；而 UTF8 或 utf8 的写法只是出现在某些编程系统中，如 .NET framework 的类 System.Text.Encoding 中的一个属性名就叫 UTF8。

    ### 书写风格

    #### HTML代码大小写

    HTML标签名、类名、标签属性和大部分属性值统一用小写

    *推荐：*

    ```
    <div class="demo"></div>
    ```

    *不推荐：*

    ```
    <div class="DEMO"></div>
    	
    <DIV CLASS="DEMO"></DIV>
    ```

    ### 类型属性

    不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含

    *推荐：*

    ```
    <link rel="stylesheet" href="" >
    <script src=""></script>
    ```

    *不推荐：*

    ```
    <link rel="stylesheet" type="text/css" href="" >
    <script type="text/javascript" src="" ></script>
    ```

    ### 元素属性

    - 元素属性值使用双引号语法
    - 元素属性值可以写上的都写上

    *推荐：*

    ```
    <input type="text">
    <input type="radio" name="name" checked="checked" >
    ```

    *不推荐：*

    ```
    <input type=text>	
    <input type='text'>
    <input type="radio" name="name" checked >
    ```

    ### 特殊字符引用

    文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。

    在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体

    *推荐：*

    ```
    <a href="#">more&gt;&gt;</a>
    ```

    *不推荐：*

    ```
    <a href="#">more>></a>
    ```

    ### 代码缩进

    统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

    ```
    <div class="jdc">
        <a href="#"></a>
    </div>
    ```

    ### 代码嵌套

    元素嵌套规范，每个块状元素独立一行，内联元素可选

    *推荐：*

    ```
    <div>
        <h1></h1>
        <p></p>
    </div>	
    <p><span></span><span></span></p>
    ```

    *不推荐：*

    ```
    <div>
        <h1></h1><p></p>
    </div>	
    <p> 
        <span></span>
        <span></span>
    </p>
    ```

    段落元素与标题元素只能嵌套内联元素

    *推荐：*

    ```
    <h1><span></span></h1>
    <p><span></span><span></span></p>
    ```

    *不推荐：*

    ```
    <h1><div></div></h1>
    <p><div></div><div></div></p>
    ```

    ## 3. 图片规范

    ### 内容图

    内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大

    - 优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
    - 尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大
    - **PC平台单张的图片的大小不应大于 200KB。**

    ### 背景图

    背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片

    - PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
    - 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
    - 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
    - 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式
    - 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式

    ## 4. CSS规范

    ### 代码格式化

    样式书写一般有两种：一种是紧凑格式 (Compact)

    ```
    .jdc{ display: block;width: 50px;}
    ```

    一种是展开格式（Expanded）

    ```
    .jdc {
        display: block;
        width: 50px;
    }
    ```

    **团队约定**

    统一使用展开格式书写样式

    ### 代码大小写

    样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

    ```
    /* 推荐 */
    .jdc{
    	display:block;
    }
    	
    /* 不推荐 */
    .JDC{
    	DISPLAY:BLOCK;
    }
    ```

    ### 选择器

    - 尽量少用通用选择器 `*`
    - 不使用 ID 选择器
    - 不使用无具体语义定义的标签选择器

    ```css
    /* 推荐 */
    .jdc {}
    .jdc li {}
    .jdc li p{}

    /* 不推荐 */
    *{}
    #jdc {}
    .jdc div{}
    ```

    ### 代码缩进

    统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

    ```
    .jdc {
        width: 100%;
        height: 100%;
    }
    ```

    ### 分号

    每个属性声明末尾都要加分号；

    ```
    .jdc {
        width: 100%;
        height: 100%;
    }
    ```

    ### 代码易读性

    左括号与类名之间一个空格，冒号与属性值之间一个空格

    *推荐：*

    ```
    .jdc { 
        width: 100%; 
    }
    ```

    *不推荐：*

    ```
    .jdc{ 
        width:100%;
    }
    ```

    逗号分隔的取值，逗号之后一个空格

    *推荐：*

    ```
    .jdc {
        box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
    }
    ```

    *不推荐：*

    ```
    .jdc {
        box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
    }
    ```

    为单个css选择器或新申明开启新行

    *推荐：*

    ```css
    .jdc, 
    .jdc_logo, 
    .jdc_hd {
        color: #ff0;
    }
    .nav{
        color: #fff;
    }
    ```

    *不推荐：*

    ```css
    .jdc,jdc_logo,.jdc_hd {
        color: #ff0;
    }.nav{
        color: #fff;
    }
    ```

    颜色值 `rgb()` `rgba()` `hsl()` `hsla()` `rect()` 中不需有空格，且取值不要带有不必要的 0

    *推荐：*

    ```
    .jdc {
        color: rgba(255,255,255,.5);
    }
    ```

    *不推荐：*

    ```
    .jdc {
        color: rgba( 255, 255, 255, 0.5 );
    }
    ```

    属性值十六进制数值能用简写的尽量用简写

    *推荐：*

    ```
    .jdc {
        color: #fff;
    }
    ```

    *不推荐：*

    ```css
    .jdc {
        color: #ffffff;
    }
    ```

    不要为 `0` 指明单位

    *推荐：*

    ```css
    .jdc {
        margin: 0 10px;
    }
    ```

    *不推荐：*

    ```css
    .jdc {
        margin: 0px 10px;
    }
    ```

    ### 属性值引号

    css属性值需要用到引号时，统一使用单引号

    ```css
    /* 推荐 */
    .jdc { 
    	font-family: 'Hiragino Sans GB';
    }

    /* 不推荐 */
    .jdc { 
    	font-family: "Hiragino Sans GB";
    }
    ```

    ### 属性书写顺序

    建议遵循以下顺序：

    1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
    2. 自身属性：width / height / margin / padding / border / background
    3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
    4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

    ```css
    .jdc {
        display: block;
        position: relative;
        float: left;
        width: 100px;
        height: 100px;
        margin: 0 10px;
        padding: 20px 0;
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        color: #333;
        background: rgba(0,0,0,.5);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -o-border-radius: 10px;
        -ms-border-radius: 10px;
        border-radius: 10px;
    }
    ```

    [mozilla官方属性顺序推荐](https://www.mozilla.org/css/base/content.css)

    ## 命名规范

    由历史原因及个人习惯引起的 DOM 结构、命名不统一，导致不同成员在维护同一页面时，效率低下，迭代、维护成本极高。

    ### 目录命名

    * 项目文件夹：shoping
    * 样式文件夹：css
    * 脚本文件夹：js
    * 样式类图片文件夹：img
    * 产品类图片文件夹： upload
    * 字体类文件夹： fonts

    ### ClassName命名

    ClassName的命名应该尽量精短、明确，必须以**字母开头命名**，且**全部字母为小写**，单词之间**统一使用下划线** “_” 连接

    .nav_top

    #### 常用命名推荐

    **注意**：ad、banner、gg、guanggao 等有机会和广告挂勾的不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此

    ```
    <div class="ad"></div>
    ```

    这种广告的英文或拼音类名不应该出现

    另外，**敏感不和谐字眼**也不应该出现，如：

    ```
    <div class="fuck"></div>
    <div class="jer"></div>
    <div class="sm"></div>
    <div class="gcd"></div> 
    <div class="ass"></div> 
    <div class="KMT"></div> 
    ...
    ```

    | ClassName              | 含义                                     |
    | ---------------------- | ---------------------------------------- |
    | about                  | 关于                                     |
    | account                | 账户                                     |
    | arrow                  | 箭头图标                                 |
    | article                | 文章                                     |
    | aside                  | 边栏                                     |
    | audio                  | 音频                                     |
    | avatar                 | 头像                                     |
    | bg,background          | 背景                                     |
    | bar                    | 栏（工具类）                             |
    | branding               | 品牌化                                   |
    | crumb,breadcrumbs      | 面包屑                                   |
    | btn,button             | 按钮                                     |
    | caption                | 标题，说明                               |
    | category               | 分类                                     |
    | chart                  | 图表                                     |
    | clearfix               | 清除浮动                                 |
    | close                  | 关闭                                     |
    | col,column             | 列                                       |
    | comment                | 评论                                     |
    | community              | 社区                                     |
    | container              | 容器                                     |
    | content                | 内容                                     |
    | copyright              | 版权                                     |
    | current                | 当前态，选中态                           |
    | default                | 默认                                     |
    | description            | 描述                                     |
    | details                | 细节                                     |
    | disabled               | 不可用                                   |
    | entry                  | 文章，博文                               |
    | error                  | 错误                                     |
    | even                   | 偶数，常用于多行列表或表格中             |
    | fail                   | 失败（提示）                             |
    | feature                | 专题                                     |
    | fewer                  | 收起                                     |
    | field                  | 用于表单的输入区域                       |
    | figure                 | 图                                       |
    | filter                 | 筛选                                     |
    | first                  | 第一个，常用于列表中                     |
    | footer                 | 页脚                                     |
    | forum                  | 论坛                                     |
    | gallery                | 画廊                                     |
    | group                  | 模块，清除浮动                           |
    | header                 | 页头                                     |
    | help                   | 帮助                                     |
    | hide                   | 隐藏                                     |
    | hightlight             | 高亮                                     |
    | home                   | 主页                                     |
    | icon                   | 图标                                     |
    | info,information       | 信息                                     |
    | last                   | 最后一个，常用于列表中                   |
    | links                  | 链接                                     |
    | login                  | 登录                                     |
    | logout                 | 退出                                     |
    | logo                   | 标志                                     |
    | main                   | 主体                                     |
    | menu                   | 菜单                                     |
    | meta                   | 作者、更新时间等信息栏，一般位于标题之下 |
    | module                 | 模块                                     |
    | more                   | 更多（展开）                             |
    | msg,message            | 消息                                     |
    | nav,navigation         | 导航                                     |
    | next                   | 下一页                                   |
    | nub                    | 小块                                     |
    | odd                    | 奇数，常用于多行列表或表格中             |
    | off                    | 鼠标离开                                 |
    | on                     | 鼠标移过                                 |
    | output                 | 输出                                     |
    | pagination             | 分页                                     |
    | pop,popup              | 弹窗                                     |
    | preview                | 预览                                     |
    | previous               | 上一页                                   |
    | primary                | 主要                                     |
    | progress               | 进度条                                   |
    | promotion              | 促销                                     |
    | rcommd,recommendations | 推荐                                     |
    | reg,register           | 注册                                     |
    | save                   | 保存                                     |
    | search                 | 搜索                                     |
    | secondary              | 次要                                     |
    | section                | 区块                                     |
    | selected               | 已选                                     |
    | share                  | 分享                                     |
    | show                   | 显示                                     |
    | sidebar                | 边栏，侧栏                               |
    | slide                  | 幻灯片，图片切换                         |
    | sort                   | 排序                                     |
    | sub                    | 次级的，子级的                           |
    | submit                 | 提交                                     |
    | subscribe              | 订阅                                     |
    | subtitle               | 副标题                                   |
    | success                | 成功（提示）                             |
    | summary                | 摘要                                     |
    | tab                    | 标签页                                   |
    | table                  | 表格                                     |
    | txt,text               | 文本                                     |
    | thumbnail              | 缩略图                                   |
    | time                   | 时间                                     |
    | tips                   | 提示                                     |
    | title                  | 标题                                     |
    | video                  | 视频                                     |
    | wrap                   | 容器，包，一般用于最外层                 |
    | wrapper                | 容器，包，一般用于最外层                 |


品优购项目搭建工作
名称 说明
项目文件夹 shopping
样式类图片文件夹 images
样式文件夹 css
产品类图片文件夹 upload
字体类文件夹 fonts
脚本文件夹 js
模块化开发

  • 开发过程中，有很多样式和结构在很多页面中都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用

  • 这里最典型的应用就是commom.css公共样式。写好一个样式，其余的页面用到这些相同的样式

  • 模块化开发具有重复使用、修改方便等优点

    image-20230101162153178

  • common.css公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式

网站favicon图标

favicon一般用于所谓缩略的网站标志，它显示在浏览器地址或者标签上

目前主流浏览器均支持favicon图标

网站TDK三大标签SEO优化

SEO(Search Engine Optimization搜索引擎优化)，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式

SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度

页面必须有三个标签用来符合SEO优化

image-20230101163650123

  • title网站标题

    title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网站入口和对网页主题归属的最佳判断点

    • 建议：网站名（产品名）-网站的介绍

  • description描述

    1
    2
    <meta name="description" content=" 品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品,便捷,诚信的服务,为您提供愉悦的网上购物体验！" / >">

  • keywords关键字

    1
    <meta name= "keywords" content= " 网上购物,网上商城手机,笔记本,电脑,MP3,CD,,VCD,DV,相机,数码,配件，手表，存储卡，京东 " / >
Logo_SEO优化

  1. logo里放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要

  2. h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可

  3. 为了让搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来

    • 方法1，text-indent移到盒子外面(text-indent:-9999px)，然后，overflow:hidden。
    • 方法2，直接给font-size:0。这样就看不到文字

  4. 最后给链接一个title属性，这样鼠标放到logo上就能看到提示文字了

Tab栏切换
image-20230105154552954

准备两个盒子：tab-list放选项卡，tab-content放内容。选项和内容要一一对应。当点击选项1，就显示内容1，其余的隐藏。当点击选项2，就显示内容2，其他的隐藏。

主界面

index.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
<!--
 * @Author: Joker_Yue,Joker_Yue@qq.com
 * @Date: 2023-01-01 16:12:25
 * @LastEditors: Joker_Yue
 * @LastEditTime: 2023-01-05 18:32:38
 * @FilePath: \HTML\02黑马\shopping\index.html
 * @Description: 项目首页
-->
<!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>
    <!-- 网站说明、网站关键字 -->
    <meta name="description"
        content=" 品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品,便捷,诚信的服务,为您提供愉悦的网上购物体验！" />
    <meta name="keywords" content=" 网上购物,网上商城手机,笔记本,电脑,MP3,CD,,VCD,DV,相机,数码,配件，手表，存储卡，京东 " />
    <!-- 引入CSS -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入公共CSS -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入 mainCSS -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入网站图标favicon -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
    <!-- 快捷导航模块 -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您!&nbsp;</li>
                    <li>
                        <a href="#">请登录&nbsp;</a><a href="register.html" class="style_red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li>我的订单</li>
                    <li></li>
                    <li class="arrow-icon">我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class="arrow-icon">关注品优购</li>
                    <li></li>
                    <li class="arrow-icon">客户服务</li>
                    <li></li>
                    <li class="arrow-icon">网站导航</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- herder 头部模块-->
    <header class="header w">
        <!-- logo模块 -->
        <div class="logo">
            <h1>
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>
        <!-- search搜索模块 -->
        <div class="search">
            <input type="search" name="" id="" placeholder="语言开发">
            <button>搜索</button>
        </div>
        <!-- hotwords热点词 -->
        <div class="hotwords">
            <a href="#" class="style_red">优惠券首发</a>
            <a href="#">亿元补贴</a>
            <a href="#">9.9团购</a>
            <a href="#">每满99减30</a>
            <a href="#">办公用品</a>
            <a href="#">电脑</a>
            <a href="#">通信</a>
        </div>
        <!-- shopcar购物车 -->
        <div class="shopcar">我的购物车
            <!-- 购物车统计 -->
            <i class="count">8</i>
        </div>
    </header>

    <!-- nav导航模块 -->
    <nav class="nav">
        <div class="w">
            <div class="dropdown">
                <div class="dt">全部商品分类</div>
                <div class="dd">
                    <ul>
                        <li><a href="#">家用电器</a></li>
                        <li><a href="list.html">手机、</a><a href="#">数码、</a><a href="#">通讯</a></li>
                        <li><a href="#">电脑、办公</a> </li>
                        <li><a href="#">家居、家具、家装、厨具</a> </li>
                        <li><a href="#">男装、女装、童装、内衣</a> </li>
                        <li><a href="#">个户化妆、清洁用品、宠物</a> </li>
                        <li><a href="#">鞋靴、箱包、珠宝、奢侈品</a> </li>
                        <li><a href="#">运动户外、钟表</a> </li>
                        <li><a href="#">汽车、汽车用品</a> </li>
                        <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>
            <div class="navitems">
                <ul>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 首页专有的模块main -->
    <div class="w">
        <div class="main">
            <div class="focus">
                <ul>
                    <li>
                        <img src="upload/focus1.png" alt="">
                    </li>
                </ul>
            </div>
            <div class="newsflash">
                <div class="news">
                    <div class="news-hd">
                        <h5>品优购快报</h5>
                        <a href="#" class="more">更多</a>
                    </div>
                    <div class="news-bd">
                        <ul>
                            <li><a href="#">[重磅] 他来了他来了</a></li>
                            <li><a href="#">[重磅] 他来了他来了</a></li>
                            <li><a href="#">[重磅] 他来了他来了</a></li>
                            <li><a href="#">[重磅] 他来了他来了</a></li>
                            <li><a href="#">[重磅] 他来了他来了</a></li>
                        </ul>
                    </div>
                </div>
                <div class="lifeservice">
                    <ul>
                        <li>i
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>i
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>i
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>i
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>i
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>i
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>i
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>i
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>i
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>i
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>i
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>i
                            <i></i>
                            <p>话费</p>
                        </li>
                    </ul>
                </div>
                <div class="bargain">
                    <img src="upload/bargain.png" alt="">
                </div>

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

    <!-- 推荐模块-->
    <div class="w recom">
        <div class="recom_hd">
            <img src="images/recom.png" alt="">
        </div>
        <div class="recom_bd">
            <ul>
                <li><img src="upload/recom_03.jpg" alt=""></li>
                <li><img src="upload/recom_03.jpg" alt=""></li>
                <li><img src="upload/recom_03.jpg" alt=""></li>
                <li><img src="upload/recom_03.jpg" alt=""></li>
            </ul>
        </div>
    </div>

    <!-- 楼层区域 -->
    <div class="floor">
        <!-- 1楼 家用电器 -->
        <div class="w jiadian">
            <div class="box_hd">
                <h3>家用电器</h3>
                <div class="tab_list">
                    <ul>
                        <li><a href="#" class="style_red">热门</a>|</li>
                        <li><a href="#">大家电</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">厨房电器</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">个护健康</a>|</li>
                        <li><a href="#">应季电器</a>|</li>
                        <li><a href="#">空气/净水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#"> 高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box_bd">
                <div class="tab_content">
                    <div class="tab_list_item">
                        <div class="col_210">
                            <ul>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">节能补贴</a></li>
                            </ul>
                            <a href="#">
                                <img src="upload/floor-1-1.png" alt=""></a>
                        </div>
                        <div class="col_329">
                            <a href="#">
                                <img src="upload/floor-1-b01.png" alt=""></a>
                        </div>
                        <div class="col_221">
                            <a href="#" class="bb">
                                <img src="upload/floor-1-2.png" alt=""></a>
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt=""></a>
                        </div>
                        <div class="col_221">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt=""></a>
                        </div>
                        <div class="col_219">
                            <a href="#" class="bb">
                                <img src="upload/floor-1-5.png" alt=""></a>
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 2楼 手机 -->
        <div class="w shouji">
            <div class="box_hd">
                <h3>手机通讯</h3>
                <div class="tab_list">
                    <ul>
                        <li><a href="#" class="style_red">热门</a>|</li>
                        <li><a href="#">大家电</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">厨房电器</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">个护健康</a>|</li>
                        <li><a href="#">应季电器</a>|</li>
                        <li><a href="#">空气/净水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#"> 高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box_bd">
                <div class="tab_content">
                    <div class="tab_list_item">
                        <div class="col_210">
                            <ul>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">节能补贴</a></li>
                            </ul>
                            <a href="#">
                                <img src="upload/floor-1-1.png" alt=""></a>
                        </div>
                        <div class="col_329">
                            <a href="#">
                                <img src="upload/floor-1-b01.png" alt=""></a>
                        </div>
                        <div class="col_221">
                            <a href="#" class="bb">
                                <img src="upload/floor-1-2.png" alt=""></a>
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt=""></a>
                        </div>
                        <div class="col_221">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt=""></a>
                        </div>
                        <div class="col_219">
                            <a href="#" class="bb">
                                <img src="upload/floor-1-5.png" alt=""></a>
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- footer底部样式 -->
    <footer class="footer">
        <div class="w">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="mod_help">
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>

                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>

                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>

                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>

                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>

                <dl>
                    <dt>帮助中心</dt>
                    <dd><img src="images/wx_cz.jpg" alt="">
                        品优购客户端
                    </dd>
                </dl>
            </div>

            <div class="mod_copyright">
                <div class="links">
                    <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |
                    品优购公益 | English Site | Contact U
                </div>
                <div class="copyright">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                    京ICP备08001421号京公网安备110108007702
                </div>
            </div>
        </div>
    </footer>
</body>

</html>

base.css

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
/*
 * @Author: Joker_Yue,Joker_Yue@qq.com
 * @Date: 2023-01-01 16:10:31
 * @LastEditors: Joker_Yue
 * @LastEditTime: 2023-01-05 18:33:15
 * @FilePath: \HTML\02黑马\shopping\css\base.css
 * @Description: base.css
 */
* {
    /* 边距清零 */
    margin: 0;
    padding: 0;
    /* CSS3盒子模型 */
    box-sizing: border-box;
}

em,
i {
    /* 去掉em和i的斜体 */
    font-style: normal
}

li {
    /* 去掉li的小圆点 */
    list-style: none
}

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

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

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

a:hover {
    color: #c81623
}

button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 去掉灰色默认边框 */
    outline: none;
    border:0;
}

body {
    /* 解决文字模糊 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}

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

.clearfix {
    *zoom: 1
}

.mod_price {
    font-size: 14px;
    color: #e33333
}

.mod_price i {
    margin-right: 3px;
    font-family: arial, sans-serif;
    font-weight: 400;
    font-size: 12px
}

.o2_wide {
    min-width: 1190px
}

.o2_mini {
    min-width: 990px
}

.grid_c1 {
    margin: 0 auto;
    width: 1190px
}

.o2_mini .grid_c1 {
    width: 990px
}

.grid_c2 {
    width: 590px
}

.o2_mini .grid_c2 {
    width: 490px
}

.grid_c4 {
    width: 290px
}

.o2_mini .grid_c4 {
    width: 240px
}

.mod_ver {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    font-size: 0
}

common.css

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
/*
 * @Author: Joker_Yue,Joker_Yue@qq.com
 * @Date: 2023-01-01 16:10:31
 * @LastEditors: Joker_Yue
 * @LastEditTime: 2023-01-05 18:33:40
 * @FilePath: \HTML\02黑马\shopping\css\common.css
 * @Description: common.css
 */
/* 声明字体图标 这里一定要注意路径的变化 */
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?tomleg');
    src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?tomleg') format('truetype'),
        url('../fonts/icomoon.woff?tomleg') format('woff'),
        url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* 版心 */
.w {
    width: 1200px;
    margin: 0 auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.style_red {
    color: #c81632;
}

/* 快捷导航模块 */
.shortcut {
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}

.shortcut ul li {
    float: left;
}

.shortcut .fr ul li:nth-child(even) {
    /* 选择所有的偶数小li */
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 9px 15px 0;
}

.arrow-icon::after {
    /* 箭头标识 */
    content: '\e91e';
    font-family: 'icomoon';
    margin-left: 6px;
}

/* header头部制作 */
.header {
    height: 150px;
    position: relative;
}

.logo {
    width: 171px;
    height: 61px;
    top: 25px;
    position: absolute;

}

.logo a {
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo.png) no-repeat;
    /* font-size: 0; */
    text-indent: -9999px;
    overflow: hidden;
}

/* 搜索框 */
.search {
    width: 538px;
    height: 36px;
    border: 2px solid #b1191a;
    position: absolute;
    left: 346px;
    top: 25px;
}

.search input {
    /* 搜索输入框 */
    width: 454px;
    height: 32px;
    padding-left: 10px;
    float: left;
}

.search button {
    /* 搜索按钮 */
    width: 80px;
    height: 32px;
    background-color: #b1191a;
    font-size: 16px;
    color: #fff;
}

.hotwords {
    /* 搜索框下的热点词 */
    position: absolute;
    top: 66px;
    left: 346px;


}

.hotwords a {
    margin: 0 10px;
}

/* 购物车 */
.shopcar {
    width: 140px;
    height: 35px;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
    position: absolute;
    right: 60px;
    top: 25px;
    line-height: 35px;
    text-align: center;
}

.shopcar::before {
    font-family: 'icomoon';
    content: '\e93a';
    margin-right: 5px;
    color: #b1191a;
}

.shopcar::after {
    font-family: 'icomoon';
    content: '\e920';
    margin-left: 10px;
}

.count {
    /* 购物车小红点 */
    position: absolute;
    top: -5px;
    left: 105px;
    height: 14px;
    color: #fff;
    background-color: #e60012;
    padding: 0 5px;
    line-height: 14px;
    border-radius: 7px 7px 7px 0;
}

/* nav模块 */
.nav {
    height: 47px;
    border: 2px solid #b1191a;
}

.nav .dropdown {
    float: left;
    width: 210px;
    height: 45px;
    background-color: #b1191a;

}

.nav .navitems {
    /* 导航栏组 */
    float: left;
}

.dropdown .dt {
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
}

.dropdown .dd {
    /* display: none; */
    width: 210px;
    height: 465px;
    background-color: #c81632;
    margin-top: 2px;
}

.dropdown .dd ul li {
    position: relative;
    height: 31px;
    line-height: 31px;
    margin-left: 2px ;
    padding-left: 10px;
    transition: background-color .5s ease;
}

.dropdown .dd ul li:hover {
    background-color: #fff;
}

.dropdown .dd ul li::after{
    position: absolute;
    font-family: 'icomoon';
    content: '\e920';
    top: 1px;
    right: 10px;
    color:#fff;
    font-size: 14px;

}

.dropdown.dd ul li a {
    font-size: 14px;
    color: #fff;
    transition: color .6s ease;
}

.dropdown .dd ul li:hover a {
    color: #c81632;
}

.navitems ul li{
    float: left;
}
.navitems ul li a{
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    padding: 0 25px;
}
/* 底部模块 */
.footer{
    height: 415px;
    background-color: #f5f5f5;
    padding-top: 30px;

}
/* 服务模块 */
.mod_service{
    height: 80px;
    border-bottom: 1px solid #ccc;
}
.mod_service ul li{
    width: 300px;
    height: 50px;
    float: left;
    padding-left: 35px;
}
.mod_service ul li h5{
    width: 50px;
    height: 50px;
    /* background-color: purple ; */
    background:url(../images/icons.png) no-repeat -252px -2px ;
    float: left;
    margin-right: 8px;
}
.service_txt h4{
    font-style: 14px;
}
.service_txt p{
    font-size: 12px;
}
/* 帮助模块 */
.mod_help{
    height: 185px;
    border-bottom: 1px solid #ccc;
    padding-top: 20px;
    padding-left: 50px;

}
.mod_help dl dt{
    font-size: 16px;
    margin-bottom: 10px;

}
.mod_help dl{
    float: left;
    width: 200px;
}
.mod_help dl:last-child{
    width: 90px;
    text-align: center;
}
.mod_copyright{
    text-align: center;
    margin-top: 20px;
}
.links{
    margin-bottom: 15px;
}
.links a{
    margin:0 3px;
}
.copyright{
    line-height: 20px;
}

index.css

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
/*
 * @Author: Joker_Yue,Joker_Yue@qq.com
 * @Date: 2023-01-03 17:11:47
 * @LastEditors: Joker_Yue
 * @LastEditTime: 2023-01-05 18:34:28
 * @FilePath: \HTML\02黑马\shopping\css\index.css
 * @Description: index.css
 */
.main {
    width: 980px;
    height: 455px;
    /* background-color: pink; */
    margin-left: 220px;
    margin-top: 10px;
}

.focus {
    width: 721px;
    height: 455px;
    float: left;
    background-color: purple;
}

.newsflash {
    width: 250px;
    height: 455px;
    /* background-color:skyblue; */
    float: right;
}

.news {
    height: 165px;
    /* background-color: pink; */
    border: 1px solid #fff;

}

/* 头部 */
.news-hd {
    height: 33px;
    border-bottom: 1px solid #e4e4e4;
    line-height: 33px;
    font-size: 14px;
    padding: 0 15px;

}

.news-hd h5 {
    float: left;
}

.news-hd .more {
    float: right
}

.news-hd .more::after {
    font-family: 'icomoon';
    content: '\e920';
}

.news-bd ul li {
    height: 24px;
    line-height: 24px;
    /* font-size: 12px; */
    /* 文字超出部分显示省略号 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.news-bd {
    padding: 5px 15px 0;
}

.lifeservice {
    height: 209px;
    /* background-color: purple;  */
    border: 1px solid #e4e4e4;

}

.lifeservice ul {
    width: 252px;
}

.lifeservice ul li {
    width: 63px;
    height: 71px;
    float: left;
    border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    overflow: hidden;
    text-align: center;

}

.lifeservice ul li i {
    display: inline-block;
    width: 24px;
    height: 28px;
    margin-top: 12px;
    background: url(../images/icons.png) no-repeat -19px -15px;
}

.bargain {
    margin-top: 5px;
}

/* 推荐模块 */
.recom {
    height: 163px;
    background-color: #ebebeb;
    margin-top: 12px;

}

.recom_hd {
    float: left;
    height: 163px;
    width: 205px;
    background-color: #5c5251;
    text-align: center;
    padding-top: 30px;
}

.recom_bd {
    float: left;
}

.recom_bd ul li {
    float: left;
    position: relative;
}

.recom_bd img {
    /* 设置图片大小 */
    width: 248px;
    height: 163px;
}

.recom_bd ul li:nth-child(-n+3):after {
    content: '';
    position: absolute;
    top: 10px;
    right: 0;
    width: 1px;
    height: 145px;
    background-color: #ddd;
}

/* 楼层模块 */
.box_hd {
    /* 楼层头部 */
    height: 30px;
    border-bottom: 2px solid #c81623;
}
 h3 {
    float: left;
    font-size: 18px;
    color: #c81623;
    font-size: 400;
}
.tab_list {
    float: right;
    line-height: 30px;
}
.tab_list ul li {
    float: left;
}
.tab_list ul li a {
    margin: 0 15px;
}
.floor .w {
    margin-top: 30px;
}
.box_bd {
    /* 楼层主体 */
    height: 361px;
    /* background-color: pink; */
}
.tab_list_item>div{
    float: left;
    height: 361px;
}
.col_210{
    width: 210px;
    background-color: #f9f9f9;
    text-align: center;
}
.col_210 ul li{
    float: left;
    width: 85px;
    height: 34px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    line-height: 33px;
    margin-right: 10px;

}
.col_210 ul{
    padding-left: 12px;

}
.col_329{
    width: 329px;
}
.col_221{
    width: 221px;
    border-right: 1px solid #ccc;
}
.col_219{
    width: 219px;
}
.bb{
    /* 添加下边框 */
    /* 一般情况下，a如果包含有宽度的盒子，a需要转换为块级元素 */
    display: block;
    border-bottom: 1px solid #ccc;
}
列表页

list.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
<!--
 * @Author: Joker_Yue,Joker_Yue@qq.com
 * @Date: 2023-01-05 16:13:38
 * @LastEditors: Joker_Yue
 * @LastEditTime: 2023-01-05 18:34:52
 * @FilePath: \HTML\02黑马\shopping\list.html
 * @Description: 列表页
-->
<!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>
    <!-- 网站说明、网站关键字 -->
    <meta name="description"
        content=" 品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品,便捷,诚信的服务,为您提供愉悦的网上购物体验！" />
    <meta name="keywords" content=" 网上购物,网上商城手机,笔记本,电脑,MP3,CD,,VCD,DV,相机,数码,配件，手表，存储卡，京东 " />

    <!-- 引入CSS -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入公共CSS -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入专有CSS -->
    <link rel="stylesheet" href="./css/list.css">
    <!-- 引入网站图标favicon -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
    <!-- 快捷导航模块 -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您!&nbsp;</li>
                    <li>
                        <a href="#">请登录&nbsp;</a><a href="#" class="style_red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li>我的订单</li>
                    <li></li>
                    <li class="arrow-icon">我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class="arrow-icon">关注品优购</li>
                    <li></li>
                    <li class="arrow-icon">客户服务</li>
                    <li></li>
                    <li class="arrow-icon">网站导航</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- herder 头部模块-->
    <header class="header w">
        <!-- logo模块 -->
        <div class="logo">
            <h1>
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>
        <!-- 列表页的秒杀 -->
        <div class="sk">
            <img src="images/sk.png" alt="">
        </div>
        <!-- search搜索模块 -->
        <div class="search">
            <input type="search" name="" id="" placeholder="语言开发">
            <button>搜索</button>
        </div>
        <!-- hotwords热点词 -->
        <div class="hotwords">
            <a href="#" class="style_red">优惠券首发</a>
            <a href="#">亿元补贴</a>
            <a href="#">9.9团购</a>
            <a href="#">每满99减30</a>
            <a href="#">办公用品</a>
            <a href="#">电脑</a>
            <a href="#">通信</a>
        </div>
        <!-- shopcar购物车 -->
        <div class="shopcar">我的购物车
            <!-- 购物车统计 -->
            <i class="count">8</i>
        </div>
    </header>

    <!-- nav导航模块 -->
    <nav class="nav">
        <div class="w">
            <div class="sk_list">
                <ul>
                    <li><a href="#">品优购秒杀 </a></li>
                    <li><a href="#">品优购秒杀 </a></li>
                    <li><a href="#">品优购秒杀 </a></li>
                </ul>
            </div>
            <div class="sk_con">
                <ul>
                    <li><a href="#">女装</a></li>
                    <li><a href="#" class="style_red">女鞋</a></li>
                    <li><a href="#">女装</a></li>
                    <li><a href="#">女装</a></li>
                    <li><a href="#">女装</a></li>
                    <li><a href="#">女装</a></li>
                    <li><a href="#">女装</a></li>
                    <li><a href="#">女装</a></li>
                    <li><a href="#">更多分类</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 列表页主体部分 -->
    <div class="w sk_container">
        <div class="sk_hd">、
            <img src="upload/bg_03.png" alt="">
        </div>
        <div class="sk_bd">
            <ul class="clearfix"> <!-- 清除浮动 -->
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
            </ul>
        </div>
    </div>
    <!-- footer底部样式 -->
    <footer class="footer">
        <div class="w">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="mod_help">
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>

                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>

                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>

                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>

                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>

                <dl>
                    <dt>帮助中心</dt>
                    <dd><img src="images/wx_cz.jpg" alt="">
                        品优购客户端
                    </dd>
                </dl>
            </div>

            <div class="mod_copyright">
                <div class="links">
                    <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |
                    品优购公益 | English Site | Contact U
                </div>
                <div class="copyright">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                    京ICP备08001421号京公网安备110108007702
                </div>
            </div>
        </div>
    </footer>
</body>

</html>

list.css

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
/*
 * @Author: Joker_Yue,Joker_Yue@qq.com
 * @Date: 2023-01-05 16:24:18
 * @LastEditors: Joker_Yue
 * @LastEditTime: 2023-01-05 18:35:08
 * @FilePath: \HTML\02黑马\shopping\css\list.css
 * @Description: list.css
 */
/* 这是list.css专有的样式 */
.nav{
    /* 隐藏溢出 */
    overflow: hidden;
}
.sk {
    position: absolute;
    top: 40px;
    left: 190px;
    border-left: 1px solid #c81523;
    padding: 3px 0 0 14px ;
}
.sk_list{
    float: left;
}
.sk_list ul li{
    float: left;
}
.sk_list ul li{
    display: block;
    line-height: 47px;
    padding: 0 30px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
}
.sk_con{
    float: left;
}
.sk_con ul li{
    float: left;
}
.sk_con ul li a{
    display: block;
    line-height: 49px;
    padding: 0 20px;
    font-size: 14px;
}
/* .sk_con ul li:last-child a{
    padding-right: 0;
    margin-right: 0;
} */
.sk_con ul li:last-child a::after{
    font-family: 'icomoon';
    content: '\e91e';
    /* display: block; */
}
.sk_bd ul li{
    overflow: hidden;
    width: 290px;
    height: 460px;  
    border: 1px solid transparent;
    transition: border .5s;
    float: left;
    margin-right: 13px;

}
.sk_bd ul li:nth-child(4n){
    margin-right: 0;
}
.sk_bd ul li:hover{
    border: 1px solid #c81523;
}
注册页

注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化

register.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
<!--
 * @Author: Joker_Yue,Joker_Yue@qq.com
 * @Date: 2023-01-05 17:27:30
 * @LastEditors: Joker_Yue
 * @LastEditTime: 2023-01-05 18:36:17
 * @FilePath: \HTML\02黑马\shopping\register.html
 * @Description: 注册页
-->
<!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>
    <!-- 引入网站图标favicon -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入CSS -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入register.css -->
    <link rel="stylesheet" href="./css/register.css">

</head>

<body>
    <div class="w">
        <header>
            <div class="logo">
                <a href="index.html">
                    <img src="images/logo.png" alt="">
                </a>

            </div>
        </header>
        <div class="registerarea">
            <h3>注册新用户
                <div class="login">我有账号，去<a href="#">登陆</a>
                </div>
            </h3>
            <!-- 登录总体框架 -->
            <div class="reg_form">
                <form action="">
                    <ul>
                        <li><label for="">手机号：</label>
                            <input type="text" class="inp">
                            <span class="error"><i class="error_icon"></i> 手机号码格式不正确，请重新输入</span>
                        </li>
                        <li><label for="">短信验证码：</label>
                            <input type="text" class="inp">
                            <span class="success"><i class="success_icon"></i> 短信验证码输入正确</span>
                        </li>
                        <li><label for="">登陆密码</label>
                            <input type="password" class="inp">
                            <span class="error"><i class="error_icon"></i> 手机号码格式不正确，请重新输入</span>
                        </li>
                        <li class="safe">
                            安全程度:
                            <em class="ruo">弱</em>
                            <em class="zhong">中</em>
                            <em class="qiang">强</em>
                        </li>
                        <li><label for="">确认密码</label>
                            <input type="password" class="inp">
                            <span class="error"><i class="error_icon"></i> 手机号码格式不正确，请重新输入</span>
                        </li>

                        <!-- 同意协议 -->
                        <li class="agree"><input type="checkbox" name="" id="">同意协议并注册
                            <a href="#">《知晓用户协议》</a>
                        </li>

                        <!-- 提交按钮 -->
                        <li>
                            <input type="submit" value="完成注册" class="btn">
                        </li>
                    </ul>
                </form>
            </div>
        </div>
        <footer>
            <div class="mod_copyright">
                <div class="links">
                    <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |
                    品优购公益 | English Site | Contact U
                </div>
                <div class="copyright">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                    京ICP备08001421号京公网安备110108007702
                </div>
            </div>
        </footer>
    </div>
</body>

</html>

register.css

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
.w {
    width: 1200px;
    margin: 0 auto;
}
/* 头部 */
header {
    height: 84px;
    border-bottom: 2px solid #c81523;

}
.logo {
    padding-top: 18px;
}

/* 注册区域 */
.registerarea {
    height: 522px;
    border: 1px solid #ccc;
    margin-top: 20px;
}
.registerarea h3 {
    height: 42px;
    border-bottom: 1px solid #ccc;
    background-color: #ececec;
    line-height: 43px;
    font-size: 18px;
    font-weight: 400;
    padding: 0 10px;
}
.login {
    float: right;
    font-size: 14px;
}
.login a {
    color: #c81523
}
/* 注册表 */
.reg_form {
    width: 600px;
    /* background-color: pink; */
    margin: 50px auto 0;
    /* vertical-align: middle; */
}
.reg_form ul li {
    margin-bottom: 20px;
    /* margin: 0  auto 20px; */
}
.reg_form ul li label {
    display: inline-block;
    width: 88px;
    text-align: center;
}
.reg_form ul li .inp {
    /* display: inline-block; */
    width: 242px;
    height: 37px;
    border: 1px solid #ccc;
}
/* 错误和成功信息 */
.error {
    color: red;
}
.error_icon,
.success_icon {
    display: inline-block;
    /* 文字垂直居中 */
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-top: -2px;
}
.success {
    color: green;
}
.error_icon {
    background: url(../images/error.png) no-repeat;
}
.success_icon {
    background: url(../images/success.png) no-repeat;
}
/* 安全认证 */
.safe{
    padding-left: 160px;
    color: gray;
}
.safe em{
    padding: 0 12px;
    background-color: pink;
    color: #fff;
}
.safe .ruo{
    background-color: #de1111;
}
.safe .zhong{
    background-color: #40b83f;
}
.safe .qiang{
    background-color: #f79100;
}
.agree{
    padding-left: 95px;
}
.agree input{
    vertical-align: middle;
}
.agree a{
    color: #1ba1e6;
}
.btn{
    width: 200px;
    height: 34px;
    background-color: #c81623 ;
    font-size: 14px;
    color: #fff;
    /* border: none; */
    margin: 30px 0 0 110px;
}

/* 底部信息 */
.mod_copyright{
    text-align: center;
    margin-top: 20px;
}
.links{
    margin-bottom: 15px;
}
.links a{
    margin:0 3px;
}
.copyright{
    line-height: 20px;
}

web服务器

我们写的网站，只能本地浏览，于是服务器的需求便产生了

服务器（也称为主机）是提供计算服务的设备。他也是一台计算机，在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、web服务器等

Web服务器一般指网站服务器，是驻留于因特网上某种类型计算机的程序，可以向浏览器web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载

我们主要讲的是web服务器

根据服务器在网络中的所在位置不同，又可分为本地服务器和远程服务器

  • 本地服务器：我们可以把自己的电脑设置为本地服务器，这样同一个局域网内的设备就可以访问此电脑

  • 远程服务器：本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把html文件上传到远程服务器

    远程服务器通常是别的公司为我们提供了一台电脑（主机），我们只要把网站上传到这台电脑上，任何人就可以根据域名访问我们的网站了