module4-08-阿里百秀

阿里百秀

一、准备工作

1.1 技术选型

• 方案：响应式布局页面开发方案

• 技术：bootstrap框架

• 设计图：本设计图采用1280px 设计尺寸

1.2 需求分析

• ① 屏幕缩放发现中屏幕和大屏幕布局是一致的。因此我们列定义为col-md-就可以了，md是大于等于970以上的

• ② 屏幕缩放发现小屏幕布局发生变化，因此我们需要为小屏幕根据需求改变布局

• ③屏幕缩放发现超小屏幕布局又发生变化，因此我们需要为超小屏幕根据需求改变布局

• ④策略:我们先布局md以上的pc端布局，最后根据实际需求在修改小屏幕和超小屏幕的特殊

二、开始制作

2.1 container容器宽度修改

• 因为设计图宽度是1280px而bootstrap最大的只有1170px

2.2 主体结构搭建

• 需要消除container自带的内边距，消除方法是可以在里面添加一个row

• 在row里面构建header，main，aside分别占12份的2，7，3

（1）header

• logo区域

  • col与h1的使用会使元素有边距的问题，需要一一清除，注意权重问题

  • 为了让图片响应式，要设置宽度width100%

• nav区域

  • 使用nav > a来制作导航栏

（2）main

• news区域

  • 使用list0unstyled clearfix可以快速添加语义类样式

• publish区域

  • 结构：div > h3 + p * 3

  • 灵活使用bootstrap所自带的样式比如字号大小，颜色所对应的class

（3）aside

• 结构: (a > img) + (a > button + h4 + p)

2.3 header区域响应式制作

• header会因为屏幕缩小而把导航栏弄在同一行显示

• 小到一定程度让一个span代替logo的图片显示

三、总结

• bootstrap的img-responsive实质上是设置max-width： 100%；

• 建议字体图标单独出一个设置给i