web移动开发总结(三)

总结(维金所项目)

1. 标签页插件的使用(重点)
2. 商品左边自适应右边固定的布局(重点)
3. 工具提示插件的使用(重点)
4. 新闻版块的布局
5. 合作伙伴版块布局
6. 登录模态框的使用(重点)
7. 表单的使用
8. 响应式的针对性处理(重点)

商品的布局

1. 添加一个布局容器居中
2. 使用JS插件标签页实现 商品点击效果和上下布局
3. 修改标签页标题数量 和 内容数量 和标题 内容的文字
4. 内容里面使用栅格系统
5. 内容每块是一个商品盒子 盒子是一左一右的布局 左边自适应右边固定
6. 内容的左边里面有一个标题 后面是一个栅格布局各占一半 左边文字居左 右边文字居右
7. 内容的右边是2个段落
8. 修改标签页标题样式
   1. 去掉active 里面的a的默认背景色 和 hover的背景色
   2. 去掉a的默认边框 修改a的文字大小和颜色
   3. 给active a添加一个底部3px红色边框
9. 修改内容商品盒子样式
   1. 实现商品盒子左右布局 使用flex布局 父元素flex 左边flex:1 右边宽度固定
   2. 实现左边内容居中 设置左边盒子padding:15px
   3. 实现右边内容文字水平垂直居中 使用伸缩盒子 垂直方向布局 主轴 侧轴居中
   4. 实现小半圆 给右边添加2个伪元素 设置宽高 圆角 定位 一个在左上角一个左下角
   5. 实现第一个商品红色 添加一个red类名个带red设置背景色 字体颜色
   6. 实现red里面的图标 给red单独添加一个伪元素 设置图标的编码和字体 和 样式

工具提示插件的使用

1. 在JS插件 》 工具提示中
2. 复制工具提示标签结构
3. 默认工具提示没有效果的 需要手动初始化
   使用官方的JS代码去初始化
   $(function () {
   $(’[data-toggle=“tooltip”]’).tooltip()
   })

新闻区域

1. 栅格系统列偏移的使用
2. 标签页插件的使用
3. 列表组组件的使用

合作伙伴区域

1. 使用伸缩布局
2. 伸缩布局换行

登录功能

1. 使用JS插件的模态框插件
2. 使用全局CSS样式的表单

导航条吸顶功能

1. 使用JS插件的Affix
2. 设置样式宽度100% z-index 和 top:0;

移动端处理

1. 合作伙伴超出屏幕宽度 设置flex-wrap:wrap; 换行
2. 新闻区域内容靠左使用媒体查询屏幕宽度991以下单独处理每个li 25%宽度 里面 a固定宽度居中
3. 商品盒子的内容左边文字掉下来 单独在会掉下来的屏幕区间设置媒体查询吧右边盒子的宽度变小一点 左边就自动变大就能放下文字了

总结

1. 商品推荐布局
2. 使用到的bootstrap框架
   1. container容器
   2. tab标签页 JS插件
   3. 栅格系统 布局
   4. 工具提示插件
3. 标签页插件的使用
   1. 标签页的标题ul nav nav-tabs
标题里面每一个标题li  默认选中的active
a链接标题链接 href="内容的选择器推荐是id" href="#product1"  data-toggle="tab" 初始化tab插件
   2. 标签页的内容div tab-content
每个内容div tab-pane  指定一个id  和标题进行关联
4. 标签页标题的样式修改： 检查元素 发现有些样式不需要使用同样的选择器覆盖  如果要新增 对应选择器去添加一些样式
5. 内容里面使用栅格布局
col-md-4 col-sm-6 col-xs-12 响应式栅格布局
6. 商品布局
商品的容器都是放到栅格的列里面 
    <div class="col-md-4">
   <div class="product"></div>
 </div>
   商品里面的左边自适应右边固定宽度布局
浮动  定位 伸缩布局
商品里面左边又嵌套了栅格 所有屏幕都是2列 col-xs-6
右边添加2个段落 使用strong 强调 sub下标
左边的 盒子里面的右边2个文字居右 使用nth-child(even) 或者2n 
右边文字水平垂直居中 伸缩布局居中
 小圆使用上下的伪元素定位
 体验 使用伪元素定位
 第一个红色添加active类名设置红色
7. 工具提示的使用
   1. 使用data-属性触发工具提示
   2. 默认工具提示的没有效果 需要调用JS手动初始化
   3. 设置样式不能使用last-child 会动态在后面添加元素导致不是最后一个子元素  使用nth-of-tpye
8. 新闻
   1. 栅格系统列偏移
   2. 使用标签插件实现新闻切换 左边是标题 右边是内容
   3. 右边内容 使用列表组
9. 合作伙伴 
   1. 栅格系统的响应式 col-md-4  col-sm-6 col-xs-12
   2. 栅格系统的嵌套  
      <div class="col-md-4">
  <div class="row">
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
  </div>
</div>
10. 点击登录 使用模态框的插件
    1. 有一个触发模态框的按钮 
添加属性data-toggle="modal" data-target="#myModal"
    2. 有一个模态框的框框 指定一个id
    3. 模态框里面分为上 中 下
    4. 中间使用表单 水平排列的表单 
    5. 使用栅格系统实现左右布局 如果不加 class="form-horizontal" 默认里面 form-group 间距无效  因为里面栅格脱标没有高度 margin无效 清除浮动 或者 父元素加这个类名class="form-horizontal" 
11. 吸顶插件affix 添加一个导航条吸顶
data-spy="affix" data-offset-top="40" 
有点bug 不太推荐使用
12. 使用媒体查询单独优化部分屏幕文字掉下来的现象  使用媒体查询改变单独屏幕样式商品右边的宽度在320-360屏幕之间 让右边宽度90
13. 新闻默认在移动端没有栅格的时候靠左对齐 如果想单独居中 单独设置媒体查询改变宽度 和让内容a居中（a是块级元素使用块级元素居中）