第二周小米项目练习笔记

• css中命名用中杠线"-";JS中命名用下划线"_"
• 针对textarea文本域中：
  • resize: none; 去除拉伸功能；
  • outline-style: none; 去掉选中时的聚焦蓝框；
• 单元格中的边框间距设置问题：
  • table内联属性设置:在table标签中设置属性，其中边框颜色不能显示，只能在style中设置边框颜色;
    • 在style中设置table的样式：
    • 在body中的table标签添加属性值：其中border为属性值，不能添加边框样式和颜色；（无论设置边框尺寸为多少，都是1px）

        
         ...
         
    

  • table嵌入样式的设置：在style样式标签中设置分别对thead下的th与tbody下的td设置边框，给table设置border-collapse:collapse;实现边框重合；

• 图片的重置样式设置：

     img{
            border: 0; /*去除img的默认1px的边框*/
            vertical-align: middle; /*去掉图片底侧默认的3像素空白缝隙，display:block也可以实现*/
         }
  
  

• 删除线标签有s,del两个，重置样式去掉删除线用text-decoration: none;;
• 斜体标签有i,em两个，重置样式去掉斜体样式，设置font-style: none;;
• h标签，重置样式去掉粗体样式，设置font-weight: normal;;
• 设置光标箭头变成小手标：cursor: pointer;;
• 设置容器的width与height值，指的是除了padding与border以外，内容区域的宽高。若后添加padding与border值，则容器整体宽高会增大，若要保持容器的总宽高不变，必须相应减少设置的宽高值；
• 给input标签添加placeholder后，设置placeholder样式：

  .section-nav .w .nav-right input::-webkit-input-placeholder{
      font-size: 12px;
      text-align: right;
      padding: 0 4px;
      background-color: #eeeeee;
   }
  .section-nav .w .nav-right input:hover::-webkit-input-placeholder{
      color: #ffffff;
      background-color: #ff6700;
   }
  

• 两个内联元素在html中，如果换行书写，这样两个元素之间会有一个空格的间隙；不能紧密相连，解决方法是添加浮动；
• 在容器内添加图片，可以用背景图添加，如果图片有点击效果，可以添加一个空的a链接在背景图上，或者是给a链接添加背景图；
• 背景图添加中，如果图片的尺寸大于添加背景图的容器尺寸，可以用background-size设置背景图添加尺寸。
  + cover属性：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中。
  + contain属性：把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
• img在使用过程中添加浮动后，不能继承父级容器的行高，设置行高也不能像单行文本一样垂直居中，解决方法，在外面套一层标签(p div span均可以)；
  • 例：在一个a标签中添加图片，使其右浮动

   
  
      
  手机 电话卡
   
   
  

• 给ol下的li添加边框，利用伪类元素添加

/*添加边框，使用before与after伪类元素*/
/*给li设置相对定位*/
ol li{
      position: relative;
   }
/*before与after的公共样式*/
ol li:before,ol li:after{
    position: absolute;
    content:"";
    background-color: #665e57;
}
/*before与after的单独样式*/
/*给li设置一个left的类选择器，设置左部边框*/
ol li.left:before{
    width: 1px;
    height: 70px;
    top: 6px;
    left: 0;
}
/*给li设置一个top的类选择器，设置顶部边框*/
ol li.top:after{
    width: 64px;
    height: 1px;
    top: -1px;
    left: 6px;
}

• 给不同a便签下的p元素设置不同的背景色，以及a的悬浮特性

 
  

            

            选购手机
      
  
 
 

• 开发过程中如果出现文字在默认情况下，顶部超出容器一些，可以通过行高值将其向下调节，只需将行高值大于字体值两像素以上即可；
• 通过设置字体的font-weight值来调节其加粗程度，bold值一般为700左右，无单位，若去除h标签的默认加粗设置，可设置font-weight: normal;;
• 省略号的设置

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

• 在一个容器中，添加一段文字和一个内联元素（span,img）,出现文字与内联元素的位置不居中对齐，可使用vertical-align: middle;进行设置，但是此设置有一个局限，就是当文字或内联元素宽高过大，middle会存在位置偏移问题，上面空隙会大于下面空隙，偏移会很严重，所以遇到此种情况，可以给vertical-align设置具体的数值，进行调节位置。

   
    

       
小米手机
       
       查看全部
       >
        
    
   
   

• 脱离文档流后，内联元素会block化；
• 阴影: box-shadow: x y blur(阴影半径) spread(扩展半径) color inset/outset(默认);
• 过渡复合属性: transition
  • transition-property: 指定过渡元素的属性名；如width,height，all即变化的属性；
  • transition-duration: 过渡时间，即变化过程的持续时间;
  • transition-timing-function: 缓冲的函数；如：ease(默认),ease-in,ease-in-out,linear(恒速);
  • transition-delay: 推迟时间，即开始变化的延迟时间；
  • 简写: transition: width 1s linear 0.5s;注：简写中每个属性用空格相隔，两个变量之间用逗号相隔；
• 小米项目实战中购物车实现div的动画效果，代码如下：

    
    购物车( 0 )
购物车中还没有商品，赶紧选购吧！

• 小米项目中，导航栏用ul li a做的浮动中，a为内联元素，则它的宽高与内容宽高相等，若想扩大其宽高尺寸或背景颜色范围，可以给a标签添加padding,实际显示上下左右均可设置padding;