html和css的学习

个人简历网页的编写
效果图：
代码：

    <div style="text-align: center;padding: 10px;border-bottom: 3px dotted #ccc;">
        <img src="img/koala.jpg" alt="" style="border: Spx #ccc solid;border-radius: 50%;">
        <p>xx</p>
        <h2 style="color:#555;font: size 20px;">求职意向:软件开发</h2>
    </div>

    <div style="float: right;width: 300px;border: 1px solid yellow;height: 300px;padding: 10px;">
        <img src="img/3.png" alt="" style="vertical-align: middle;">&nbsp;项目经历
        <h3>&nbsp;&nbsp;时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;参与项目</h3>
        <table>
            <tr>
                <td  style="padding: Spx;">
                    2021年11月
                </td>
                <td>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti qui magni est
                </td>
            </tr>
        </table>
        <div style="float: right;width: 300px;border: 1px solid yellow;height: 150px;padding: 10px;">
            <img src="img/4.png" alt="" style="vertical-align: middle;">&nbsp;作品展示
        </div>
        <div style="float: right;width: 300px;border: 1px solid yellow;height: 300px;padding: 10px;">
            <img src="img/5.png" alt="" style="vertical-align: middle;">&nbsp;友情链接
        </div>
    </div>

    <div style="overflow: hidden;">
            <div style="float: left;width: 300px;border: 1px solid blue;height: 250px;padding: 10px;">
                <img src="img/1.png" alt="" style="vertical-align: middle;"> 个人信息
                <table>
                    <tr>
                        <td  style="padding: Spx;">
                            性别：
                        </td>
                        <td>
                            男
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: Spx;">
                            家庭住址：
                        </td>
                        <td>
                            xx省
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: Spx;">
                            微信号码：
                        </td>
                        <td>
                            xxx
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: Spx;">联系电话</td>
                        <td>xxxx</td>
                    </tr>
                </table>
            </div>        
                <div style="float: left;width: 300px;border: 1px solid blue;height: 300px;padding: 10px;">
                    <img src="img/2.png" alt="" style="vertical-align: middle;"> 教育经历
                    <table>
                        <tr>
                            <td  style="padding: Spx;">&nbsp;&nbsp;&nbsp;
                                学校
                            </td>
                            <td>
                                时间
                            </td>
                        </tr>
                        <tr>
                            <td style="padding: Spx;">
                                三峡大学
                            </td>
                            <td>
                                xx年xx月xx日
                            </td>
                    </table>
                </div>
            </div>   
    </div>
</div>