小米商城HTML/CSS项目练习

前期准备

• 引入reset.css重置样式表，all.css图标字体，base.css公共样式表。
• 创建index.html以及与其名称相同的index.css。
• 根据经验，固定容器宽度，以免屏幕过大不实用。
• 给body添加min-width以免窗口过小发生溢出。
• 先确定结构（html），再具体编写样式。

过程中需要注意的点

• 向右浮动，顺序会反向。
• 文字垂直居中：

line-height：height;

• 容器中所有元素浮动会造成高度塌陷，解决方法：clearfix。
• 文字水平居中

text-align：center;

• 水平居中：通过计算设置margin。
• 子元素会从父元素继承一些不需要的性质，需要重设。
• 制作小三角：
  利用伪元素

.triangle::after{
   
    content:'';
    width: 0;
    height: 0;
    /* 设置四个方向的边框 */
    border:6px solid transparent;
    /* 去除上边框 */
    border-top:none;
    /* 设置下边框 */
    border-bottom-color: #fff;
}

• 伪元素设置hover格式:

    classa:honver::after

• 过渡效果：通过transition高度改变。 当height为auto时，transiton无效。

    transition: height 0.3s;

• 隐藏logo中的文本

 text-indent: -9999px;

• 鼠标移入，图片横向切换。
  通过切换偏移量。

.header .logo{
   
    position: relative;
    float: left;
    width: 55px;
    height: 55px;
     /* 隐藏home */
    overflow: h