课程名称：前端工程师
课程章节： 第2章 项目首页开发
主讲老师：Dell

课程内容：

第2章 仿"京东到家"首页开发

2-1 flex + iconfont 完成首页 docker 样式编写

• 1）display:flex 是容器，容器的所有子元素是项目
• 2）box-sizing:border-box

设置box-sizing:border-box;属性后，元素设置的width属性值就是该元素实实际占据页面的宽度，之后给元素设置padding或者border调整样式时，就不用考虑会不会改变元素际宽度，极大的的方便了我们开发编写代码。

• 3） flex布局：flex : 1 平均布局
• 4）App.vue 是原始入口组件：响应式布局
• 5）border-box。 width往内缩
• 6）图标的下载及使用
  第一种：下载到本地后，拷贝iconfont.css中的内容到style目标录下
  第二种：使用在线代码，引入线上地址，放到iconfont.css中，main.js中引入iconfont.css文件，我本次采用这种方法

@font-face {
  font-family: 'iconfont';  /* project id 1906953 */
  src: url('//at.alicdn.com/t/font_1906953_dyhm74t2yk.eot');
  src: url('//at.alicdn.com/t/font_1906953_dyhm74t2yk.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1906953_dyhm74t2yk.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1906953_dyhm74t2yk.woff') format('woff'),
  url('//at.alicdn.com/t/font_1906953_dyhm74t2yk.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1906953_dyhm74t2yk.svg#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: .16rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

• 7）BEM css样式书写规范

BEM 是块(block),元素(element),修饰符(modifier)简写

• 8）sass写法，简化BEM的书写方式

2-2使用Scss 组织地址区域布局

• 1） @mixin + @include
• 2）white-space.段落中的文字不换行

// 自动换行
@mixin ellpsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; 
}

• 3）Scss的样式注意事项：
  1）头部地址栏的样式、Scss封装【文字省略号】的样式
• 隐藏代码编写：overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）
• 不换行，文字…缩略显示样式编写：
  white-space:nowrap;
  text-overflow:ellipsis;
  2）变量，改颜色
  文字的颜色写成一个常量，哪里用到直接引用就可以了。

// 文字的颜色的常量
$content-fontColor:#333;
$medium-fontColor:#666;
$content-notive-fontColor:#777;
$light-fontColor:#999;
$content-bgColor:#F1F1F1;
$search-bgColor:#F5F5F5;
$search-fontColor:#B7B7B7;
$hightlight-fontColor:#e93b3b;
$btn-bgColor: #0091FF;
$bgColor:#ffffff;

使用示例：

 //引入mixins.scss
@import "../../style/mixins.scss";
.order {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  height: .49rem;
  &__price {
    padding: .14rem .14rem .15rem .24rem;
    background: $bgColor;
    width: 2.77rem;
    font-size: .14rem;
    //使用颜色常量名字
    color: $content-fontColor;
  }

学习收获

通过本次的学习，学会首页的布局，及布局时，要注意的一些段落换行、隐藏、常量的样式编写方法。