照片布局1

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>相册</title>
                <style>
                        *{margin: 0;padding: 0;}
                        .top{
                                margin:0 auto;
                                width: 1200px;
                                height: 24px;
                                background-color:red ;
                        }
                        .main{
                                margin:0 auto;
                                width: 1200px;
                                /*height:672px ;*/
                                /*overflow: hidden;
                                background-color:rosybrown ;*/
                        }
                            .left{
                                    float: left;
                                    margin:0 auto;
                                    width: 87px;
                                    height: 672px;
                                    background-color:aquamarine ;
                        }
                            .right{
                                    float: right;
                                    margin:0 auto;
                                    width: 1113px;
                                    height: 672px;
                                    background-color:darkcyan ;
                        }
                              .rightTop{
                                    width: 1113px;
                                    height: 168px;
                                    background-color:green ;

                            }
                                .rightTopleft{
                                        float: left;
                                        width: 408px;
                                        height: 168px;
                                        background-color:cyan ;
                                }
                                  .rightToplefttop{
                                          width: 408px;
                                        height: 111px;
                                        background-color:#E0FFFF ;
                                  }
                                  .rightTopleftbottom{
                                          width: 408px;
                                        height: 57px;
                                        background-color:mediumaquamarine ;
                                  }
                                .rightTopright{
                                        float: left;
                                        width: 705px;
                                        height: 168px;
                                        background-color:gold ;
                                }
                              .rightMain{
                                    width: 1113px;
                                    height: 504px;
                                    background-color:yellow ;

                            }    
                                .rightMainleft{
                                        float: left;
                                        width: 30px;
                                        height: 504px;
                                        background-color:blue ;
                                }
                                .rightMainright{
                                        float: left;
                                        width: 1083px;
                                        height: 504px;
                                        background-color:brown ;
                                }
                                  .rightMainrightleft{
                                          float: left;
                                          width: 621px;
                                        height: 504px;
                                        background-color:brown ;
                                  }
                                    .rightMainrightlefttop{
                                      width: 621px;
                                          height: 419px;
                                          background-color:lightcyan ;
                                    }
                                    .rightMainrightleftbottom{
                                      width: 621px;
                                          height: 85px;
                                          background-color:cornflowerblue ;
                                    }
                                  .rightMainrightright{
                                          float: left;
                                          width: 462px;
                                        height: 504px;
                                        background-color:hotpink ;
                                  } 
                </style>


</head>
        <body>
                <div class="top"><img src="img/index_01.jpg"/></div>
                <div class="main">
                        <div class="left"><img src="img/index_02.jpg"/></div>
                        <div class="right">
                                <div class="rightTop">
                                        <div class="rightTopleft">
                                                <div class="rightToplefttop"><img src="img/index_03.jpg"/></div>
                                                <div class="rightTopleftbottom"><img src="img/index_05.jpg"/></div>
                                        </div>
                                    <div class="rightTopright"><img src="img/index_04.jpg"/></div>
                                </div>   
                                <div class="rightMain">
                                        <div class="rightMainleft"><img src="img/index_06.jpg"/></div>
                                        <div class="rightMainright">
                                                <div class="rightMainrightleft">
                                                        <div class="rightMainrightlefttop"><img src="img/index_07.jpg"/></div>
                                                        <div class="rightMainrightleftbottom"><img src="img/index_09.jpg"/></div>
                                                </div>
                                                <div class="rightMainrightright"><img src="img/index_08.jpg"/></div>
                                        </div>
                                </div>
                        </div>
                </div>
        </body>
</html>
posted @ 2026-07-07 08:37 -王心雨- 阅读(4) 评论(0) 收藏举报
刷新页面返回顶部
照片布局1

公告
