移动WEB-06

一 @media 媒体查询 优化

1.使用min-width时,不需要写max-width

2.利用CSS层叠性,覆盖掉前面的属性

3.使用min-width时,必须要从小写到大

二 腾讯全端思路导图

1. 创建index.html , title部分引入 (link rel=bootstrap.css ) 和 (link rel=index.css )

2. /body上面 引入 script src=" jquery.js" 和
bootscrap.js  


3. 在 bootstarp 中文文档 找到头部导航模块,复制过来, 设置版心 (container) 

注意点: 每个模块的 父相 必须重新设置类名,用bootstarp封装类名,容易造成多模块重复类名相互间影响,只需要给模块的父相设置一个就可以了.

4. 头部模块的父相需要设置 高度和背景色(transparent) ,消除边框border:none

5.设置字体颜色 (.nav>li>a)

6.设置媒体查询
// 900px 以内,轮播图往下移动70px,图片固定高度250px
@media (max-width:950px) {
    .nav-carousel {
       margin-top: 70px;
       .item > img {
           height: 400px;
       }
    }
    
  7. 轮播图部分,图片超出当前当前盒子时剪裁多余内容,保持宽高. ( object-fit: cover;)
  .item > img {
   width: 100%;
   height: 400px;
   object-fit: cover;
  
  8.当网页下拉到1200像素,需要实现导航条背景色,高度和下拉菜单背景色 . border .box-shadow
  border:none
  box-shadow:none
  
  注意一:
  媒体查询 最小值(min-width)最为判断条件,应该从小到大写. 
  最大值(max-width) 则是从大到小写.
  
  书写方式: 
  内部样式  @media(min/max-width:1200px)
  外链式link media="(min-width:1200px)"
  
  注意二 
  bootstrap 的特点
  
  1.基于媒体查询封装好的ui框架,可以快速开发响应式网站.
  2.优点: 基于框架开发,效率高,稳定性好.
  
  3.全局CSS样式 (修改,不要直接修改类名CSS属性,新建类名).  其中包括: 版心 (container . container-fluid ,配合row)  . 栅格系统 . 按钮 . 表格 .表单.
  
  4.组件  字体图标,建议使用iconfont. 路径导航(面包屑) . 导航条: 在小屏,有交互效果,开始引入使用jq.bootstrap.js
  
  5.JS插件 轮播图 设置4张banner ,4个指示器 ,介绍active(可以设置当前banner为首页展示),介绍左右箭头