项目实战练习(比较散的知识点)

=项目实战(比较散的知识点)

第一步 准备开发工具&素材&图纸

1. 审查布局类型 ( 上中下 | 上(左右)下 | 左右

2. 找版心(内容最宽处,内容宽度最通用处)

3. 寻找页面上的公共要素

   1. 字号
   2. 颜色
      1. **背景颜色 **(注意区分是背景颜色还是背景图片)
      2. 文本颜色 #ccc
      3. 装饰颜色
   3. 行高
   4. 间隙
   5. 组件: 通用的样式,可以写准备好,后面需要的时候直接调用.

4. 搭建结构

   剪切后想取消可以按下 ESC

• 所有的轮播 按钮一般都是定位起来的

• 导航条有些是吸顶导航,就是导航条只跟着窗口,一直在窗口的上方.

• 做页面 网页三要素一定要有 可以words description title

• 图片一定要改成英文,不带中文.

• 网页logo 一般都作为h1标题,来看看标准的格式

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AuGI2mVr-1626005366232)(C:\Users\liu\AppData\Local\Temp\1625918051918.png)]

里面的描述在网页上是不显示的哦,注意后面样式里面处理一下.

• 爬虫都是搜索代码,他不知道你的显示是怎样的,上面的span 写出来只是为了让爬虫爬到.

• 需要做成响应式网页的话,版心宽度写成 min-width/max-width,要做成什么网页看产品设计要求.

• 字体最标准的写法是写成 unicode码

• transform 无法作用于行内元素,必须是行内块元素,块元素 可以给他加个绝对定位,直接变成块元素.’

• 为了解决部分选择器样式重叠,可以选择使用子代选择器,更方便哦,比如说ul下面的li,li下面的a

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XMFt1Ntu-1626005366234)(C:\Users\liu\AppData\Local\Temp\1625920335089.png)]

• 一个页面需要过渡的全部都要过渡,过渡时间自己把控

• 一个网站多个页面,会有相同的样式,我们就可以被他们提出来,后面重做页面的时候直接引入.

  比如说首页和小的子页面,都有相同的banner,我们就可以把banner的样式单独写成样式.

  但是后面引用的时候记得修改样式的路径.

• 细节: 用图片做背景之前可以提前准备一个和背景颜色相似的颜色,防止背景图片加载不出来的时候不至于变成空白

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0IvyOTAn-1626005366235)(C:\Users\liu\AppData\Local\Temp\1625966300319.png)]no-repeat center/cover 记得要加上;

• 每个大区域命名可能需要一个项目前缀,比如说:

  .cq-banner
  .cq-header
  .ca-footer
  这里的cq就是项目前缀,具体需不需要可以看要求.
  
  

• flex 也可以影响定位元素的位置

• 开发的时候先做top banner footer.

• 当发现多个字组合在一起的小段,其小段的宽度与实际设计的宽度不一样,c出现换行时,需要考虑:html渲染的字体与设计的字体不一样,导致宽度不一样,解决办法1:给它加点字间距,让小段伸缩一下. 中文网站上一般不会让你出现英文标点

  .ltl {
    leter-spacing: -1px;
    }
  

解决办法2:

  .no-wrap {
     word-spacing: nowrap;
  }

• 字体默认会有1.6倍行高,会导致整体高度增大,在一些大的公司对于这种细节问题抓得比较严,怎么重置行高呢?(我习惯了在测量间距的时候一行字的底部接着第二行的顶部,为了防止隐藏的行高被忽略,时刻要注意.

  .lh12 {
    line-height: 12px;
  }    设置字体行高与字体大小相等.
  

• 网页底部一般都是设置死的,后期基本不会改动.

• 装饰性的线条,可以考虑用伪元素来做

• 经常需要更换的就用图片,而不是用背景图片,给整个盒子加装饰,一般是背景图片

• 图标的话都比较小,小按钮一般都是图标.不确定的话,可以问问产品经理

• span标签不具备语义性,可以用它来包裹需要隐藏的文本

• 像大背景的区域,如果掌控不好,可以直接设置高度. 但技术好,仔细设计的话就不需要

• 小盒子如果写了高度,考虑设置box-sizing’

.不确定的话,可以问问产品经理

• span标签不具备语义性,可以用它来包裹需要隐藏的文本

• 像大背景的区域,如果掌控不好,可以直接设置高度. 但技术好,仔细设计的话就不需要

• 小盒子如果写了高度,考虑设置box-sizing’