第二周小米项目练习笔记

css中命名用中杠线"-";JS中命名用下划线"_"
针对textarea文本域中：
- resize: none; 去除拉伸功能；
- outline-style: none; 去掉选中时的聚焦蓝框；
单元格中的边框间距设置问题：
- table内联属性设置:在table标签中设置属性，其中边框颜色不能显示，只能在style中设置边框颜色;
  - 在style中设置table的样式：
```
    <style>
         table{
               width: 500px;
               text-align: center;
               border: 6px dashed blue;
          }
    </style>
```
  - 在body中的table标签添加属性值：其中border为属性值，不能添加边框样式和颜色；（无论设置边框尺寸为多少，都是1px）
```
    <table border="1px" cellspacing="0"  cellpadding="0">
     ...
    </table> 
```
- table嵌入样式的设置：在style样式标签中设置分别对thead下的th与tbody下的td设置边框，给table设置border-collapse:collapse;实现边框重合；
```
  <style>
        table{
            width: 500px;
            text-align: center;
            border: 5px solid blue;
            border-collapse: collapse;
        }
        table thead tr th,table tbody tr td{
            border: 4px solid red;
        }
    </style>
```

图片的重置样式设置：

   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标签中添加图片，使其右浮动

 <ul>
    <li><a href="#" target="_blank">手机 电话卡<span><img src="images/jiao.png"/></span></a></li>
 </ul>
 <style>
    ul li a span{
          float: right;
            }
    ul li a span img{
          vertical-align: baseline;
            }
 </style>

给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的悬浮特性

 <body>
  <li><a class="tu1" href="#" target="_blank">
            <p></p>
            选购手机
      </a>
  </li>
 </body>
 <style>
 ol li a.tu1 p{
     background: url("../images/sp-b-l-01.png") no-repeat center top;
 }
 ol li a.tu1:hover p{
     background: url("../images/sp-b-l-0101.png") no-repeat center top;
 }
 ol li a.tu1:hover{
     color: #fff;
 }
 </style>

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

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

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

   <body>
    <div class="top">
       <h4>小米手机</h4>
       <a href="#">
       查看全部
       <span>&gt;</span>
        </a>
    </div>
   </body>
   <style>
   .top a span{
       display: inline-block;
       width: 20px;
       height: 20px;
       border-radius: 50%;
       background-color: #2196f3;
       font-size: 20px;
       line-height: 20px;
       text-align: center;
       vertical-align: 1px;
   }
   </style>

脱离文档流后，内联元素会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的动画效果，代码如下：

<style>
.header .w .shopping .loader{
    position: absolute;
    top: 40px;
    right: 0;
    width: 316px;
    height: 0;
    line-height: 98px;
    font-size: 12px;
    color: #424242;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);/*阴影的使用*/
    overflow: hidden;/*在div高度为0时，添加此项使内容隐藏*/
    transition: height 0.5s ease;/*添加在需要动画的元素上，即div上*/
}
.header .w .shopping:hover .loader{
    height: 98px;
}
</style>
<body>
<div class="shopping">
<a href="#" target="_blank">
    <ins></ins>
    购物车( 0 )</a>
<div class="loader">购物车中还没有商品，赶紧选购吧！</div>
</div>
</body>

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

第二周小米项目练习笔记

第二周小米项目练习笔记

相关阅读更多精彩内容

友情链接更多精彩内容