今天继续跟着pink老师学习品优购这个项目，今天是第十二天了，后面要继续努力加油

目标

• 能够写出列表页
• 能够写出注册页
• 能够把品优购网站部署到本地服务器
• 能够把品优购网站上传到远程服务器

品优购项目

首页制作

main 主体模块制作

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

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

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

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

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

  样式代码

  `

左侧 focus 模块制作

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

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

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

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

  • 小圆圈利用边框实现
  • 小圆点里面背景颜色来实现

  样式代码

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

  结构代码

  <div class="newsflash">
      <div class="news">
          ...
      </div>
      <div class="lifeservice">
          ...
      </div>
      <div class="bargain">
          ...
      </div>
  </div>
  

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

  

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

    `

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

  • 下面是news-bd

    • 里面包含 ul 和 li 还有链接
    • 给li设置高度，24px，设置单行文字溢出省略： 1. 设置 overflow: hidden; 2.设置 white-space: nowrap; 3. 设置 `text-overflo
    • 以上是我今天的总结后面继续努力