淘宝主页(静态页面)第3天

Posted 2020-12-18 lintianxiajun

1.emmet语法

要产生相同的连续的内容，如下图所示：

为了减少代码量，可以使用emmet语法。

li.item$*5>a[href=#]>img[src=images/adimg_0$.jpg]

按住Tab键之后生成代码：

                <li class="item1"><a href="#"><img src="images/adimg_01.jpg" alt=""></a></li>
                <li class="item2"><a href="#"><img src="images/adimg_02.jpg" alt=""></a></li>
                <li class="item3"><a href="#"><img src="images/adimg_03.jpg" alt=""></a></li>
                <li class="item4"><a href="#"><img src="images/adimg_04.jpg" alt=""></a></li>
                <li class="item5"><a href="#"><img src="images/adimg_05.jpg" alt=""></a></li>

2.标准盒模型，怪异盒模型

盒模型

    1.标准盒模型

    宽度 = border(左右) + width + padding(左右)

    高度 = border(上下) + width + padding(上下)

    2.怪异盒模型(IE盒模型)

    宽度 = width

    高度 = height