CSS浮动，平铺，鼠标状态

CSS6:

<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<p style="cursor: default">default</p>
<p style="cursor:auto">auto</p>
<p style="cursor: pointer">pointer</p>
<p style="cursor:crosshair">crosshair</p>
<p style="cursor:help ">help</p>
<p style="cursor: wait">wait</p>

效果为：
录屏太麻烦，这个是平价替代款

<style>
    #div {
        color: grey;
    }
</style>
<div id="div">我是div元素</div>
<div id="div1">我是div1元素</div>
<!-- id选择器 有唯一性 -->

效果为：

（这里注释取消的时候没有另加把文本打出来了）

<style>
    .div {
        color: grey;
    }
</style>
<div id="div" class="div">我是div元素</div>
<div id="div1" class="div">我是div1元素</div>
class 选择器 无唯一性

效果为：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    /* 去除默认间距使用通配符* */
    
    p {
        color: violet;
    }
    /* 标签选择器 */
</style>
<h1>我是h1标签</h1>
<p>我是p标签</p>
<div>我是div标签</div>
<style>
    li {
        display: inline;
    }
</style>
<ul>
    <li><a href="http://www.baidu.com">百度</a></li>
    <li><a href="http://www.sina.com.cn">新浪</a></li>
    <li><a href="http://www.taobao.com">淘宝</a></li>
</ul>

效果为：

CSS6:

<style>
    img {
        opacity: 0.4;
        width: 400px;
    }
    
    img:hover {
        opacity: 1;
        /* 透明度0-1之间，值越小，越透明 */
    }
</style>
<img src="https://static1.bcjiaoyu.com/d033cd0463116e4d403164f766e8fb87_d.jpg-1024x768">

效果为：

<style>
    div {
        width: 100px;
        height: 100px;
        text-align: center;
        float: left;
        /* 全都向左浮动就变成一横排 */
    }
    
    #first {
        float: left;
        /* 向左浮动占据蓝色块位置 */
        /* float:right; */
        /* 向右浮动直至边缘 */
    }
</style>
<div id="first" style="background-color: red"></div>
<div id="second" style="background-color:lightskyblue"></div>
<div id="third" style="background-color:green"></div>

效果为：

<style>
    div {
        background-image: url('https://static1.bcjiaoyu.com/7c6df0490bd86a401c7237d69ea01440_n.png-1200x800');
        background-repeat: no-repeat;
        /* 任意元素都可以添加背景图片，格式就像这样 */
    }
</style>
<div>
    <p>好美丽</p>
    <p>好可爱</p>
    <p>你的竹儿</p>
</div>

效果为：

<style>
    body {
        background-image: url('https://static1.bcjiaoyu.com/c6f845030eba0a554ed4f16a491a725a_d.jpg-300x260');
        /* 图片小 */
        background-repeat: no-repeat;
        /* 禁止重复 */
        background-position: center;
        /* 位置居中 */
    }
</style>
<p>好美丽</p>
<p>好可爱</p>
<p>你的竹儿</p>

效果为:

<style>
    body {
        background-image: url('https://static1.bcjiaoyu.com/5f49c0809f7c2f1ed6d3f7b10a188db4_x.jpg-300x260');
        /* background-repeat: repeat-y; */
        /* 竖直方向平铺 */
        background-repeat: repeat-x;
        background-position: center;
        font-weight: bolder;
    }
</style>
<div>
    <p>孟美岐</p>
    <p>吴宣仪</p>
    <p>杨超越</p>
</div>

效果为：

这篇博客是不是太长了呀。。。
快结束喽！！！

<style>
    body {
        background-image: url('https://static1.bcjiaoyu.com/5f49c0809f7c2f1ed6d3f7b10a188db4_x.jpg-300x260');
        /* background-repeat: repeat-y; */
        /* 竖直方向平铺 */
        background-repeat: no-repeat;
        background-position: top right;
        /* 图片定位可以用两个关键字 */
        font-weight: bolder;
    }
</style>
<div>
    <p>孟美岐</p>
    <p>吴宣仪</p>
    <p>杨超越</p>
</div>

效果为：