黑马前端笔记4--CSS（2）

【参考课程】黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程：b站课程链接

课程资料：素材和源码： 下载链接
【PPT】链接：https://pan.baidu.com/s/1jm1LUuk5NIM-PPhmAbjEkg 提取码：sp39

相关资料：W3C-CSS基础教程：网页链接

01 Emmet语法

1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成
2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div

    <!-- 输入 div*3 ，按tab -->
    <div></div>
    <div></div>
    <div></div>

3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了

    <!-- ul>li -->
    <ul>
        <li></li>
    </ul>

4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p

    <!-- div+p -->
    <div></div>
    <p></p>

5. 如果带有类名，直接写 .类名（如： .demo ） 带id名字的，写 #id（如： #two ）tab 键就可以了

    <!-- .nav -->
    <div class="nav"></div>
    <!-- #emo -->
    <div id="emo"></div>
    <!-- 未注明标签类型时默认为div标签，想要生成其他标签写明即可 -->
    <!-- p.part -->
    <p class="part"></p>

6. 如果生成的div 类名是有顺序的， 可以用 自增符号 $

   <!-- .demo$*5 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>

7. 如果想要在生成的标签内部写内容可以用 { } 表示

    <!-- 我们想生成的标签里面默认显示几个文字：  div{文字}-->
    <!-- div{pink老师最帅} -->
    <div>pink老师最帅</div>
    <!-- div{$}*5 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>