• 黑马程序员前端实战项目---PC端品优购（下）

    目标

    能够写出列表页

    能够写出注册页

    能够把品优购网站部署到本地服务器

    能够把品优购网站上传到远程服务器

    教程推荐：Web前端零基础入门HTML5+CSS3+前端项目

    品优购项目

    首页制作

    main 主体模块制作

    以前书写的就是模块化中的公共部分。

    main 主体模块是 index 里面专有的，注意需要新的样式文件 index.css

     main 盒子宽度为 980 像素，高度是455像素，位置距离左边 220px (margin-left ) ，给高度就不用清除浮动

    main 里面包含左侧盒子，宽度为 721像素，左浮动，focus 焦点图模块

    main 里面包含右侧盒子，宽度为 250像素，右浮动，newsflash 新闻快报模块

    结构代码

    1. <div class="w">
    2.     <div class="main">
    3.         <div class="focus">
    4.             ...
    5.         div>
    6.         <div class="newsflash">
    7.             ...
    8.         div>
    9.     div>
    10. div>

    样式代码

    1. .main {
    2.     width: 980px;
    3.     height: 455px;
    4.     margin-left: 220px;
    5.     margin-top: 10px;
    6. }
    7. .focus {
    8.     float: left;
    9.     width: 721px;
    10.     height: 455px;
    11.     background-color: purple;
    12. }
    13. .newsflash {
    14.     float: right;
    15.     width: 250px;
    16.     height: 455px;
    17. }

    左侧 focus 模块制作

     大的 focus 盒子 包裹 1 号展示图片的盒子，2号 3号 左右箭头的盒子，4号 小圆点的盒子

    1. <div class="focus fl">
    2.     <a href="#" class="arrow-l"> < a>
    3.     <a href="#" class="arrow-r"> > a>
    4.     <ul>
    5.         <li>
    6.           <a href="#"><img src="upload/focus.jpg" alt="">a>
    7.         li>
    8.     ul>
    9.     <ol class="circle">
    10.         <li>li>
    11.         <li class="current">li>
    12.         <li>li>
    13.         <li>li>
    14.         <li>li>
    15.         <li>li>
    16.         <li>li>
    17.         <li>li>
    18.     ol>
    19. div>

    • 包裹 1 号盒子（ul > li > a > img），轮播图这样的布局是为了后面方便配置js逻辑代码

    2 号盒子 跟 3 号盒子 左右箭头，利用定位的方式来实现

    样式代码

    1. .arrow-l,
    2. .arrow-r {
    3.     position: absolute;
    4.     top: 50%;
    5.     margin-top: -20px;
    6.     width: 24px;
    7.     height: 40px;
    8.     background: rgba(0, 0, 0, .3);
    9.     text-align: center;
    10.     line-height: 40px;
    11.     color: #fff;
    12.     font-family: 'icomoon';
    13.     font-size: 18px;
    14. }
    15. .arrow-r {
    16.     right: 0;
    17. }

    • 4 号盒子 里面放 小圆点 （ol > li）

      样式代码

      1. .circle {
      2.     position: absolute;
      3.     bottom: 10px;
      4.     left: 50px;
      5. }
      6. .circle li {
      7.     float: left;
      8.     width: 8px;
      9.     height: 8px;
      10.     /*background-color: #fff;*/
      11.     border: 2px solid rgba(255, 255, 255, 0.5);
      12.     margin: 0 3px;
      13.     border-radius: 50%;
      14.     /*鼠标经过显示小手*/
      15.     cursor: pointer;
      16. ​
      17. }
      18. .current {
      19.     background-color: #fff;
      20.     box-shadow: 
      21. }

    小圆圈利用边框实现

    小圆点里面背景颜色来实现

    右侧 newsflash 模块制作

     右侧的模块 分为上中下三个盒子

    结构代码

    1. <div class="newsflash">
    2.     <div class="news">
    3.         ...
    4.     div>
    5.     <div class="lifeservice">
    6.         ...
    7.     div>
    8.     <div class="bargain">
    9.         ...
    10.     div>
    11. div>

    1 号盒子为 news 新闻模块 高度为 165px

     分为上下两个结构，但是两个模块都用 div，上面是 news-hd，下面是 news-bd

    结构代码

    1. <div class="news">
    2.     <div class="news-hd">
    3.         ...
    4.     div>
    5.     <div class="news-bd">
    6.         ...
    7.     div>
    8. div>

    样式代码

    1. .news {
    2.    height: 165px;
    3.    border: 1px solid #e4e4e4;
    4. }

    上面是news-hd，设置高度是 33px，设置下边框

    结构代码

    1. <div class="news-hd">
    2.     <h5>品优购快报h5>
    3.     <a href="#" class="more">更多a>
    4. div>

    样式代码

    1. .news-hd {
    2.     height: 33px;
    3.     line-height: 33px;
    4.     border-bottom: 1px dotted #e4e4e4;
    5.     padding: 0 15px;
    6. }
    7. .news-hd h5 {
    8.     float: left;
    9.     font-size: 14px;
    10. }
    11. .news-hd .more {
    12.     float: right;
    13. }
    14. .news-hd .more::after {
    15.     font-family: 'icomoon';
    16.     content: '\e920';
    17. }

    里面放一个h5 标题

    放一个a标签，内容是 更多，然后让 a 进行右浮动，三角用伪元素设置字体图标就好

    下面是news-bd

    结构代码

    1. <div class="news-bd">
    2.     <ul>
    3.         <li><a href="#"><strong>[重磅]strong> 它来了它来了，pink老师走来了, 它是谁？a>li>
    4.         <li><a href="#"><strong>[重磅]strong> 它来了它来了，pink老师走来了a>li>
    5.         <li><a href="#"><strong>[重磅]strong> 它来了它来了，pink老师走来了a>li>
    6.         <li><a href="#"><strong>[重磅]strong> 它来了它来了，pink老师走来了a>li>
    7.         <li><a href="#"><strong>[重磅]strong> 它来了它来了，pink老师走来了, 它是谁？a>li>
    8.     ul>
    9. div>

    样式代码

    1. .news-bd {
    2.     padding: 5px 15px 0;
    3. }
    4. .news-bd ul li {
    5.     height: 24px;
    6.     line-height: 24px;
    7.     overflow: hidden;
    8.     white-space: nowrap;
    9.     text-overflow: ellipsis;
    10. }

    里面包含 ul 和 li 还有链接

    给li设置高度，24px，设置单行文字溢出省略： 1. 设置 overflow: hidden; 2.设置 white-space: nowrap; 3. 设置 text-overflow: ellipsis;

    2 号盒子为 lifeservice 生活服务模块 高度为 209px

    结构代码

    1. <div class="lifeservice">
    2.     <ul>
    3.         <li>
    4.             <i>i>
    5.             <p>话费p>
    6.         li>
    7.         <li>
    8.             <i>i>
    9.             <p>话费p>
    10.         li>
    11.         <li>
    12.             <i>i>
    13.             <p>话费p>
    14.         li>
    15.         <li>
    16.             <i>i>
    17.             <p>话费p>
    18.         li>
    19.         <li>
    20.             <i>i>
    21.             <p>话费p>
    22.         li>
    23.         <li>
    24.             <i>i>
    25.             <p>话费p>
    26.         li>
    27.         <li>
    28.             <i>i>
    29.             <p>话费p>
    30.         li>
    31.         <li>
    32.             <i>i>
    33.             <p>话费p>
    34.         li>
    35.         <li>
    36.             <i>i>
    37.             <p>话费p>
    38.         li>
    39.         <li>
    40.             <i>i>
    41.             <p>话费p>
    42.         li>
    43.         <li>
    44.             <i>i>
    45.             <p>话费p>
    46.         li>
    47.         <li>
    48.             <i>i>
    49.             <p>话费p>
    50.         li>
    51.     ul>
    52. div>

    样式代码

    1. .lifeservice {
    2.     overflow: hidden;
    3.     height: 209px;
    4.     /* background-color: purple; */
    5.     border: 1px solid #e4e4e4;
    6.     border-top: 0;
    7. }
    8. .lifeservice ul {
    9.     width: 252px;
    10. }
    11. .lifeservice ul li {
    12.     float: left;
    13.     width: 63px;
    14.     height: 71px;
    15.     border-right: 1px solid #e4e4e4;
    16.     border-bottom: 1px solid #e4e4e4;
    17.     text-align: center;
    18. }
    19. .lifeservice ul li i {
    20.     display: inline-block;
    21.     width: 24px;
    22.     height: 28px;
    23.     background-color: pink;
    24.     margin-top: 12px;
    25.     background: url(../images/icons.png) no-repeat -19px -15px;
    26. }

    设置边框（左右下 边框）

    里面的内容 是 ul > 12*li，给li设置宽 63px，高71px，设置 右边和下边的边框，设置浮动

    这样设置后，第四个li会装不开，掉下来，解决办法如下

    lifeservice 盒子宽度为 250 ，但是装不开里面的 4 个小 li

    可以让 lifeservice 里面的 ul 宽度为 252，就可以装的下 4 个 小 li

    lifeservice 盒子 overflow 隐藏多余的部分就可以了

    在 li 里面放一个 i（里面放图标），下面的文本用 p 标签包裹

    给 i 设置 24px宽和28px的高（注意 i 是行内元素， 转成行内块），给 li 设置 text-align:center 让里面内容居中显示

    3 号盒子为 bargain 特价商品

    结构代码

    1. <div class="bargain">
    2.     <img src="upload/bargain.png" alt="">
    3. div>

    样式代码

    1. .bargain {
    2.     margin-top: 5px;
    3. }

    这个比较简单，直接插入一张图片即可

    推荐模块制作 -- recom

     

    • 大盒子 recom 推荐模块 recommend

      • 给这个 recom 大盒子 设置版心，设置 163px的高，背景颜色（#ebebeb），设置距离上边 12px

      结构代码

      1. <div class="w recom">
      2.     ...
      3. div>

      样式代码

      1. .recom {
      2.     height: 163px;
      3.     background-color: #ebebeb;
      4.     margin-top: 12px;
      5. }

      里面包含 2 个盒子， 浮动即可

    • 结构代码

      1.  <div class="w recom">
      2.     <div class="recom_hd">
      3.         ...
      4.     div>
      5.     <div class="recom_bd">
      6.         ...
      7.     div>
      8. div>

      1 号盒子 recom_hd

    • 设置宽度205px，高度163px

    • 里面放一个img标签，插入图片即可

    • 结构代码

      1. <div class="recom_hd">
      2.     <img src="images/recom.png" alt="">
      3. div>

      样式代码

      1. .recom_hd {
      2.     float: left;
      3.     height: 163px;
      4.     width: 205px;
      5.     background-color: #5c5251;
      6.     text-align: center;
      7.     padding-top: 30px;
      8. }

      2 号盒子 recom_bd ，注意里面的小竖线

    • 右侧结构里面放 ul 包含 4个 li，每个li里面包含一个img

    • 直接利用切片工具把里面的内容当成一张图片

    • 给 li 设置浮动

    • 给 img 设置宽高，宽度 248px，高度 163px

    • 小竖线利用伪元素来实现，给每一个li设置一个 after 伪元素，然后给这个伪元素设置绝对定位，设置top 10px，给li设置相对定位（注意，最后一个li不用设置伪元素），可以利用 nth-child(-n+3){...}

    • 结构代码

      1. <div class="recom_bd">
      2.     <ul>
      3.         <li><img src="upload/recom_03.jpg" alt="">li>
      4.         <li><img src="upload/recom_03.jpg" alt="">li>
      5.         <li><img src="upload/recom_03.jpg" alt="">li>
      6.         <li><img src="upload/recom_03.jpg" alt="">li>
      7.     ul>
      8. div>

      样式代码

      1. .recom_bd {
      2.     float: left;
      3. }
      4. .recom_bd ul li {
      5.     position: relative;
      6.     float: left;
      7. }
      8. .recom_bd ul li img {
      9.     width: 248px;
      10.     height: 163px;
      11. }
      12. .recom_bd ul li:nth-child(-n+3)::after {
      13.     content: '';
      14.     position: absolute;
      15.     right: 0;
      16.     top: 10px;
      17.     width: 1px;
      18.     height: 145px;
      19.     background-color: #ddd;
      20. }

      家用电器模块

    •  

       

    注意这个 floor ，不要给高度，内容有多少，算多少

    第一楼是家用电器模块： 里面包含两个盒子

    box_hd 制作

    • 1 号盒子 box_hd，给一个高度，有个下边框，里面分为左右 2 个盒子

    •  

      • box_hd 给 30px 的高度，2个像素的下边框

      • 里面放一个左侧 h3 的盒子，右侧一个div盒子，div盒子里面放 ul > li > a

      • 左侧盒左浮动，右侧盒子右浮动

      • a标签之间的距离用左右的padding撑开即可

      结构代码

      1. <div class="box_hd">
      2.     <h3>家用电器h3>
      3.     <div class="tab_list">
      4.         <ul>
      5.             <li> <a href="#" class="style_red">热门a>|li>
      6.             <li><a href="#">大家电a>|li>
      7.             <li><a href="#">生活电器a>|li>
      8.             <li><a href="#">厨房电器a>|li>
      9.             <li><a href="#">生活电器a>|li>
      10.             <li><a href="#">个护健康a>|li>
      11.             <li><a href="#">应季电器a>|li>
      12.             <li><a href="#">空气/净水a>|li>
      13.             <li><a href="#">新奇特a>|li>
      14.             <li><a href="#"> 高端电器a>li>
      15.         ul>
      16.     div>
      17. div>

      样式代码

      1. .box_hd {
      2.     height: 30px;
      3.     border-bottom: 2px solid #c81623;
      4. }
      5. .box_hd  h3 {
      6.     float: left;
      7.     font-size: 18px;
      8.     color: #c81623;
      9.     font-weight: 400;
      10. }
      11. .tab_list {
      12.     float: right;
      13.     line-height: 30px;
      14. }
      15. .tab_list ul li {
      16.     float: left;
      17. }
      18. .tab_list ul li a {
      19.     margin: 0 15px;
      20. }

      box_bd 制作

    • 2 号盒子 box_bd，不要给高度

    •  

      • box_bd 属于是tab栏的内容区域，所以在这个里面先嵌套一个盒子 tab_content，在tab_content 里面包裹tab选项卡对应的内容

      • 内容被一个大盒子包裹（tab_list_item），里面是 ul 包裹 5个 li，每个li设置对应的宽度，然后设置浮动

      • 而这5个li的宽度是不一致的，在这里我们的做法是 先把宽度的样式列出来，然后给对应的li设置

        • 第一个小 li 分为上下结构，上面是 ul 包裹 li ，li里面包裹 a，下面插入一张图片

        • 上面的li设置宽高，设置浮动，这样就排列下来了

        • 后面的小 li 里面先放一个a标签，然后在a标签里面插入图片即可

      结构代码

      1. <div class="box_bd">
      2.     <div class="tab_content">
      3.         <div class="tab_list_item">
      4.             <div class="col_210">
      5.                 <ul>
      6.                     <li><a href="#">节能补贴a>li>
      7.                     <li><a href="#">节能补贴a>li>
      8.                     <li><a href="#">节能补贴a>li>
      9.                     <li><a href="#">节能补贴a>li>
      10.                     <li><a href="#">节能补贴a>li>
      11.                     <li><a href="#">节能补贴a>li>
      12.                 ul>
      13.                 <a href="#">
      14.                     <img src="upload/floor-1-1.png" alt="">
      15.                 a>
      16.             div>
      17.             <div class="col_329">
      18.                 <a href="#">
      19.                     <img src="upload/floor-1-b01.png" alt="">
      20.                 a>
      21.             div>
      22.             <div class="col_221">
      23.                 <a href="#" class="bb"> <img src="upload/floor-1-2.png" alt="">a>
      24.                 <a href="#"> <img src="upload/floor-1-3.png" alt="">a>
      25.             div>
      26.             <div class="col_221">
      27.                     <a href="#"> <img src="upload/floor-1-4.png" alt="">a>
      28.                   
      29.             div>
      30.             <div class="col_219">
      31.                     <a href="#" class="bb"> <img src="upload/floor-1-5.png" alt="">a>
      32.                     <a href="#"> <img src="upload/floor-1-6.png" alt="">a>
      33.             div>
      34.         div>
      35.     div>
      36. div>

      样式代码

      1. .box_bd {
      2.     height: 361px;
      3.   
      4. }
      5. .tab_list_item>div {
      6.     float: left;
      7.     height: 361px;
      8. }
      9. ​
      10. .col_210 {
      11.     width: 210px;
      12.     background-color: #f9f9f9;
      13.     text-align: center;
      14. }
      15. .col_210  ul li {
      16.     float: left;
      17.     width: 85px;
      18.     height: 34px;
      19.     border-bottom: 1px solid #ccc;
      20.     text-align: center;
      21.     line-height: 33px;
      22.     margin-right: 10px;
      23. }
      24. .col_210  ul {
      25.     padding-left: 12px;
      26. }
      27. .col_329 {
      28.     width: 329px;
      29. }
      30. .col_221 {
      31.     width: 221px;
      32.     border-right: 1px solid #ccc;
      33. }
      34. .col_219 {
      35.     width: 219px;
      36. }
      37. .bb {
      38.     /* 一般情况下，a如果包含有宽度的盒子，a需要转为块级元素 */
      39.     display: block;
      40.     border-bottom: 1px solid #ccc;
      41. }

      tab栏切换需求

    •  tab栏的布局是 ul > li > a

    • 有多少个tab选项卡，那么对应就有多少个内容

    • 但是每一次只会显示一个内容块，其他内容进行的隐藏

    • 等后面我们学习了js之后，我们就会配合js来实现，tab栏的切换

    列表制作（★★★）

    品优购列表页制作准备工作

    列表页面是新的页面，我们需要新建页面文件 list.html

    因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来

    头部和底部的样式也需要，因此 list.html 中还需要引入 common.css

    需要新的 list.css 样式文件，这是列表页专门的样式文件

    列表页 header 和 nav 修改

     秒杀盒子 sk（ second kill ） 定位即可

    结构代码

    1. <header class="header w">
    2.      
    3.      ...
    4.      
    5.      <div class="sk">
    6.          <img src="images/sk.png" alt="">
    7.      div>
    8.      
    9.      ...
    10.      
    11.      ...
    12.      
    13.      ...
    14.  header>

    样式代码

    1. .sk {
    2.     position: absolute;
    3.     left: 190px;
    4.     top: 40px;
    5.     border-left: 1px solid #c81523;
    6.     padding: 3px 0 0  14px;
    7. }

    • 1 号盒子左侧浮动 sk_list 里面包含 ul 和 li

    • 2 号盒子左侧浮动 sk_con 里面包含 ul 和 li

    结构代码

    2. <nav class="nav">
    3.     <div class="w">
    4.         <div class="sk_list">
    5.             <ul>
    6.                 <li><a href="#">品优秒杀a>li>
    7.                 <li><a href="#">品优秒杀a>li>
    8.                 <li><a href="#">品优秒杀a>li>
    9.             ul>
    10.         div>
    11.         <div class="sk_con">
    12.             <ul>
    13.                 <li><a href="#">女装a>li>
    14.                 <li><a href="#" class="style_red">女鞋a>li>
    15.                 <li><a href="#">女装a>li>
    16.                 <li><a href="#">女装a>li>
    17.                 <li><a href="#">女装a>li>
    18.                 <li><a href="#">女装a>li>
    19.                 <li><a href="#">女装a>li>
    20.                 <li><a href="#">女装a>li>
    21.                 <li><a href="#">更多分类a>li>
    22.             ul>
    23.         div>
    24.     div>
    25. nav>

    样式代码

    1. .sk_list {
    2.     float: left;
    3. }
    4. .sk_list  ul li {
    5.     float: left;
    6. }
    7. .sk_list  ul li a {
    8.     display: block;
    9.     line-height: 47px;
    10.     padding: 0 30px;
    11.     font-size: 16px;
    12.     font-weight: 700;
    13.     color: #000;
    14. }
    15. .sk_con {
    16.     float: left;
    17. }
    18. .sk_con ul li {
    19.     float: left;
    20. }
    21. .sk_con  ul li a {
    22.     display: block;
    23.     line-height: 49px;
    24.     padding: 0 20px;
    25.     font-size: 14px;
    26.    
    27. }
    28. .sk_con  ul li:last-child a::after {
    29.     content: '\e91e';
    30.     font-family: 'icomoon';
    31. }

    列表页主体 sk_container

    1 号盒子 sk_container 给宽度 1200，不要给高度

    结构代码

    2. <div class="w sk_container">
    3.     <div class="sk_hd">
    4.         ...
    5.     div>
    6.     <div class="sk_bd">
    7.         ...
    8.     div>
    9. div>

    sk_hd 制作

    • 2 号盒子 sk_hd ，插入图片即可

    结构代码

    1. <div class="sk_hd">
    2.     <img src="upload/bg_03.png" alt="">
    3. div>

    sk_bd 制作

    • 3 号盒子 sk_bd ，里面包含很多的 ul 和 li

      • 当鼠标移入到 li 上面的时候显示红色的边框，在这里先给 li 设置透明的边框，当鼠标移入的时候 设置为红色即可

      • 由于给每个 li 都设置了外边距，导致一行的最后一个 li 掉了下来，在这里我们利用 nth-child(4n) 来选择出来每一行最后一个 li，去掉外边距就好了

    结构代码

    1. <div class="sk_bd">
    2.      <ul class="clearfix">
    3.         <li>
    4.             <img src="upload/list.jpg" alt="">
    5.         li>
    6.         <li>
    7.             <img src="upload/list.jpg" alt="">
    8.         li>
    9.         <li>
    10.             <img src="upload/list.jpg" alt="">
    11.         li>
    12.         <li>
    13.             <img src="upload/list.jpg" alt="">
    14.         li>
    15.         <li>
    16.             <img src="upload/list.jpg" alt="">
    17.         li>
    18.         <li>
    19.             <img src="upload/list.jpg" alt="">
    20.         li>
    21.         <li>
    22.             <img src="upload/list.jpg" alt="">
    23.         li>
    24.         <li>
    25.             <img src="upload/list.jpg" alt="">
    26.         li>
    27.         <li>
    28.             <img src="upload/list.jpg" alt="">
    29.         li>
    30.     ul>
    31. div>

    样式代码

    1. .sk_bd ul li {
    2.     overflow: hidden;
    3.     float: left;
    4.     margin-right: 13px;
    5.     width: 290px;
    6.     height: 460px;
    7.     border: 1px solid transparent;
    8. }
    9. .sk_bd ul li:nth-child(4n) {
    10.     margin-right: 0;
    11. }
    12. .sk_bd ul li:hover {
    13.     border: 1px solid #c81523;
    14. }

    注册页面（★★★）

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

     准备工作

    创建register.html，引入 base.css，引入favicon图标

    创建register.css ，在html页面进行引入

    header 头部实现

    整个内容用 版心 进行包裹

    第一个头部区域怎么简单怎么来，用一个header盒子包裹链接，链接里面放图片即可

    结构代码

    1. <header>
    2.     <div class="logo">
    3.         <a href="index.html"> <img src="images/logo.png" alt="">a>
    4.     div>
    5. header>

    样式代码

    1. .w {
    2.     width: 1200px;
    3.     margin: 0 auto;
    4. }
    5. header {
    6.     height: 84px;
    7.     border-bottom: 2px solid #c81523;
    8. }
    9. .logo {
    10.     padding-top: 18px;
    11. }

    registerarea 主体模块实现

     整个大盒子 高度为 522px，设置4个边框

    结构代码

    1. <div class="registerarea">
    2.    ...
    3. div>

    样式代码

    1. .registerarea {
    2.     height: 522px;
    3.     border: 1px solid #ccc;
    4.     margin-top: 20px;
    5. }

    • 1号盒子 是一个 h3 标签，放标题

      结构代码

      1. <h3>注册新用户
      2.     <div class="login">我有账号，去<a href="#">登陆a>div>
      3. h3>

      样式代码

      1. .registerarea h3 {
      2.     height: 42px;
      3.     border-bottom: 1px solid #ccc;
      4.     background-color: #ececec;
      5.     line-height: 42px;
      6.     padding: 0 10px;
      7.     font-size: 18px;
      8.     font-weight: 400;
      9. }
      10. .login {
      11.     float: right;
      12.     font-size: 14px;
      13. }
      14. .login a {
      15.     color: #c81523;
      16. }

      • 里面放 注册新用户 的文字，然后包一个 div的标签，让div标签右浮动

    • 2号盒子 里面放注册的内容

      结构代码

      1. <div class="reg_form">
      2.     <form action="">
      3.         <ul>
      4.             <li><label for="">手机号：label> <input type="text" class="inp">
      5.                 <span class="error"> <i class="error_icon">i> 手机号码格式不正确，请从新输入 span>li>
      6.             <li><label for="">短信验证码：label> <input type="text" class="inp">
      7.                 <span class="success"> <i class="success_icon">i> 短信验证码输入正确 span>li>
      8.             <li><label for="">登录密码：label> <input type="password" class="inp">
      9.                 <span class="error"> <i class="error_icon">i> 手机号码格式不正确，请从新输入 span>li>
      10.             <li class="safe">安全程度 <em class="ruo">弱em> <em class="zhong">中em> <em class="qiang">强em> li>
      11.             <li><label for="">确认密码：label> <input type="password" class="inp">
      12.                 <span class="error"> <i class="error_icon">i> 手机号码格式不正确，请从新输入 span>li>
      13.             <li class="agree"><input type="checkbox" name="" id=""> 
      14.                 同意协议并注册 <a href="#">《知晓用户协议》a>
      15.             li>
      16.             <li>
      17.                 <input type="submit" value="完成注册" class="btn">
      18.             li>
      19.         ul>
      20.     form>
      21. div>

      样式代码

      1. .reg_form {
      2.     width: 600px;
      3. ​
      4.     margin: 50px auto 0;
      5. }
      6. .reg_form ul li {
      7.     margin-bottom: 20px;
      8. }
      9. .reg_form ul li label {
      10.     display: inline-block;
      11.     width: 88px;
      12.     text-align: right;
      13. }
      14. .reg_form ul li .inp {
      15.     width: 242px;
      16.     height: 37px;
      17.     border: 1px solid #ccc;
      18. }
      19. .error {
      20.     color: #c81523;
      21. }
      22. .error_icon,
      23. .success_icon {
      24.     display: inline-block;
      25.     vertical-align: middle;
      26.     width: 20px;
      27.     height: 20px;
      28.     background: url(../images/error.png) no-repeat;
      29.     margin-top: -2px;
      30. }
      31. .success {
      32.     color: green;
      33. }
      34. .success_icon {
      35.     background: url(../images/success.png) no-repeat;
      36. }
      37. .safe {
      38.     padding-left: 170px;
      39. }
      40. .safe em {
      41.     padding: 0 12px;
      42.     color: #fff;
      43. }
      44. .ruo {
      45.     background-color: #de1111;
      46. }
      47. .zhong {
      48.     background-color: #40b83f;
      49. }
      50. ​
      51. .qiang {
      52.     background-color: #f79100;
      53. }
      54. .agree {
      55.     padding-left: 95px;
      56. }
      57. .agree input {
      58.     vertical-align: middle;
      59. }
      60. .agree a {
      61.     color: #1ba1e6;
      62. }
      63. .btn {
      64.     width: 200px;
      65.     height: 34px;
      66.     background-color: #c81623;
      67.     font-size: 14px;
      68.     color: #fff;
      69.     margin: 30px 0 0 70px;
      70. }

      • 先用一个盒子，把整个内容包裹起来，设置盒子宽度（600px），让这个盒子距上边50px，水平居中显示

      • 里面的内容利用 ul 包含 li 来实现的（不需要用表格）

      • 每个 li 里面，左侧放 label 标签， 中间放input 标签， 右侧放 span 提示信息

      • 左侧 label里面的文字都是右对齐，我们可以给label设置一个宽度（88px），然后利用text-align 来设置右对齐

      • input 表单设置 宽度 242px，高度 37px，设置边框

      • 右侧 span修饰一下文字颜色

      • 提示信息的样式优化

        • 定义一个 错误的样式，定义一个 正确的样式，然后给对应的盒子设置类名

        • 在span里面放一个小盒子，这个小盒子用来显示 图标的，设置一下宽高 （20x20）

        • 插入图片了之后，默认与文字是基线对齐，通过 vertical-algin 来设置 图片与文字对齐方式

      • 安装程度的布局，在第4个小 li 里面放 三个盒子，分别放 弱、中、强

        • 设置 em 的 左右 12px 的内边距，设置一下文字颜色

        • 分别设置 背景颜色

      • 同意协议 和 完成注册 都是用 li 进行包裹

    底部实现

    结构代码

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

    样式代码

    1. .mod_copyright {
    2.     text-align: center;
    3.     padding-top: 20px;
    4. }
    5. .links {
    6.     margin-bottom: 15px;
    7. }
    8. .links a {
    9.     margin: 0 3px;
    10. }
    11. .copyright {
    12.     line-height: 20px;
    13. }

    Web服务器

    把自己网站上传到服务器上，可以让其他人访问

    什么是Web服务器

    我们写的品优购网站，目前是放到自己电脑上的，只能自己访问浏览。

    如果想要很多人访问我们的网站，可以把品优购放到服务器上，这样就可以多人访问我们的品优购网站了

     

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

    务器等。

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

    以下服务器我们主要指的是Web服务器。

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

    本地服务器

    我们可以把自己的电脑设置为本地服务器， 这样同一个局域网内的同学就可以访问你的品优购网站了。 就业班学ajax的时候，再进行讲解

    远程服务器

    本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。

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

    比如域名： www.mi.com 可以访问小米网站

    小结

    服务器就是一台电脑。因为我们主要是做网站，所以我们主要使用web服务器

    服务器可以分为本地服务器和远程服务器

    远程服务器是别的公司为我们提供了一台计算机。

    我们可以把网站上传到远程服务器里面， 别人就可以通过域名访问我们的网站了

    将自己的网站上传到远程服务器（★★★）

    注意：一般稳定的服务器都是需要收费的。 比如：阿里云

    这里给大家推荐一个免费的远程服务器（免费空间） 免费空间-free.3v.do 提供100M永久香港免费ASP空间申请

    • 去免费空间网站注册账号。

    • 记录下主机名、用户名、密码、域名。

    • 利用 utftp 软件 上传网站到远程服务器

    • 在浏览器中输入域名，即可访问我们的品优购网站了

  • 相关阅读:
    离线数仓（1）：什么是数据仓库
    ECMAScript新特性
    给特斯拉机器人的星辰大海泼盆冷水
    redis的五种数据类型
    扔掉你的开发板，跟我玩Mcore-全志h616
    NPDP考试倒计时，如何高效提分？
    ClickHouse(15)ClickHouse合并树MergeTree家族表引擎之GraphiteMergeTree详细解析
    Redis 主从搭建简单教程
    errno perror stderr 的关系
    【Python 中的 range() 与 xrange()】
  • 原文地址：https://blog.csdn.net/JACK_SUJAVA/article/details/127753889