Web前端基础（12）

更新时间：2022-08-22 14:55:14

8.行内对齐方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            img{
                width: 50px;
                /* 行内元素的水平对齐方式:top/bottom/middle/baseline(默认) */
                vertical-align: baseline;
            }
        </style>
    </head>
    <body>
        <img src="../imgs/2.jpg" />
        <input type="text" />
    </body>
</html>

显示效果:

Web前端基础（12）

9.布局练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body>div{
                width: 1000px;
                margin: 0 auto;
                background-color: #0A7EB8;
            }
            #t_left_div{
                width: 611px;
                height: 376px;
                float: left;
            }
            #t_right_div{
                width: 375px;
                height: 376px;
                float: right;
            }
            body>div>div{
                overflow: hidden;/* 解决高度为0的问题 */
                margin-bottom: 10px;/* 两行之间的间距 */
            }
            
            body>div>div>div{/* 给所有第3层的div添加背景颜色 */
                background-color: #e8e8e8;
            }
            #b_left_div{
                width: 366px;
                height: 233px;
                float: left;
            }
            .b_right_div{
                    width: 198px;
                    height: 233px;
                    float: right;
                    margin-left: 10px;
            }
            
        </style>
    </head>
    <body>
        <div>
            <div >
                <div id="t_left_div"></div>
                <div id="t_right_div"></div>
            </div>
            <div >
                <div id="b_left_div"></div>
                <div class="b_right_div"></div>
                <div class="b_right_div"></div>
                <div class="b_right_div"></div>
            </div>
        </div>
    </body>
</html>

显示效果：

Web前端基础（12）

本节所有代码:

https://download.csdn.net/download/qq_44273429/12729675

注:代码中的图片路径为我本地路径,可自行上传图片,更改图片所在路径即可,有疑惑可以问我

未完待续

上一篇 : ：Java：org.apache.commons.beanutils.BeanUtils拷贝对象属性下一篇 : 云计算时代应用设计十二要素

Web前端基础（12）

相关阅读

推荐文章