2022年7月8日——HTML案例（3）-CFANZ编程社区

图文排版

效果图

2022年7月8日——HTML案例（3）_图文
2022年7月8日——HTML案例（3）_图文_02
文件结构：

2022年7月8日——HTML案例（3）_图文_03
代码演示：

<!DOCTYPE html>
<html>
    <head>
        <title>图文排版</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .main{
                width: 1200px;
                height: 500px;
                /* background-color: bisque; */
                margin:50px auto;
            }
            .main, .main > div.one, .main > div.two,  .main > div.three{
                height: 500px;
            }
            .main > div.one, .main > div.two, .main > div.three{
                float: left;
            }
            .main > div.one{
                width: 300px;
                background-color: aqua;
            }
            .main > div.two{
                width: 600px;
                /* background-color: black; */
            }
            .main > div.three{
                width: 300px;
                /* background-color: blue; */
            }


            .main > div.one > div.top{
                width: 300px;
                height: 400px;
                background-color: rgb(0, 185, 124);
            }
            .main > div.one > div.bottom{
                width: 300px;
                height: 100px;
                background-color: rgb(6, 255, 172);
            }
            .main > div.two >div.top{
                width: 580px;
                height: 290px;
                margin: 0 10px 10px; 
                background-color: antiquewhite;
            }
            .main > div.two > div.bottom{
                width: 600px;
                height: 200px;
                /* background-color: rgb(173, 164, 151); */
            }
            .main > div.two > div.bottom div{
                width: 180px;
                height: 200px;
                margin: 0 10px;
                float: left;
                background-color: aqua;
            }
            .main > div.three > .top{
                width: 300px;
                height: 200px;
                background-color: rgb(245, 46, 218);
            }
            .main > div.three > .bottom{
                width: 300px;
                height: 290px;
                margin-top: 10px;
                background-color: rgb(158, 34, 142);
            }


            #one > div.one > div.top, #one > div.two > div.top, 
            .twobottom1, .twobottom2, .twobottom3,
            #one > div.three > div.top,#one > div.three > div.bottom{
                background-size: 100%;
            }

            #one > div.one > div.top{
                background-image: url('img/001.png');
            }
            #one > div.two > div.top{
                background-image: url('img/002.png');
            }
            .twobottom1{
                background-image: url('img/003.png');
            }
            .twobottom2{
                background-image: url('img/004.png');
            }
            .twobottom3{
                background-image: url('img/005.png');
            }
            #one > div.three > div.top{
                background-image: url('img/006.png');
            }
            #one > div.three > div.bottom{
                background-image: url('img/007.png');
            }
        </style>
    </head>
    <body>
        <h1>图文排版</h1>
        <div class="main">
            <div class="one">
                <div class="top"></div>
                <div class="bottom"></div>
            </div>
            <div class="two">
                <div class="top"></div>
                <div class="bottom">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="three">
                <div class="top"></div>
                <div class="bottom"></div>
            </div>
        </div>




        <div class="main" id="one">
            <div class="one">
                <div class="top"></div>
                <div class="bottom" id="onebottom"></div>
            </div>
            <div class="two">
                <div class="top" id="twotop"></div>
                <div class="bottom">
                    <div class="twobottom1"></div>
                    <div class="twobottom2"></div>
                    <div class="twobottom3"></div>
                </div>
            </div>
            <div class="three">
                <div class="top"></div>
                <div class="bottom"></div>
            </div>
        </div>
    </body>
</html>