布局实操二

xxxxxxxxxx
<div class="phone">
    <div class="left">
        <img src="./images/1.webp" alt="">
    </div>
    <div class="right">
        <div class="item">
            <img src="./images/2.webp" alt="">
            <h3>黑鲨4S</h3>
            <p>磁动力升降肩键</p>
        </div>
        <div class="item">
            <img src="./images/2.webp" alt="">
            <h3>黑鲨4S</h3>
            <p>磁动力升降肩键</p>
        </div>
        <div class="item">
            <img src="./images/2.webp" alt="">
            <h3>黑鲨4S</h3>
            <p>磁动力升降肩键</p>
        </div>
        <div class="item">
            <img src="./images/2.webp" alt="">
            <h3>黑鲨4S</h3>
            <p>磁动力升降肩键</p>
        </div>
        <div class="item">
            <img src="./images/2.webp" alt="">
            <h3>黑鲨4S</h3>
            <p>磁动力升降肩键</p>
        </div>
        <div class="item">
            <img src="./images/2.webp" alt="">
            <h3>黑鲨4S</h3>
            <p>磁动力升降肩键</p>
        </div>
        <div class="item">
            <img src="./images/2.webp" alt="">
            <h3>黑鲨4S</h3>
            <p>磁动力升降肩键</p>
        </div>
        <div class="item">
            <img src="./images/2.webp" alt="">
            <h3>黑鲨4S</h3>
            <p>磁动力升降肩键</p>
        </div>
    </div>
</div>

xxxxxxxxxx
<style>
    body{
        background-color: #f1f1f1;
    }
    .phone{
        width: 1300px;
        height: 680px;
        margin: 0 auto;
    }
    .left{
        float: left;
        width: 234px;
        height: 680px;
        margin-top: 10px;
    }
    .right{
        float: right;
        width: 1050px;            
    }
    .item{
        width: 250px;
        height: 300px;
        float: left;
        margin-left: 10px;
        background-color: #fff;
        margin-top: 10px;
        text-align: center;
    }
</style>

实操

1. 【实操】编写CSS引入到HTML文件的四种方式
2. 【实操】CSS基础选择器有哪些，分别完成选择器的编写