相册布局2 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>相册</title>
		<style type="text/css">
			*{margin:0; padding:0}
			.top{
					margin: 0 auto;
					width: 1200px;
					height: 24px;
					background-color: #4472C4;
			}
			
			.main{
					margin: 0 auto;
					width: 1200px;
					height: 672px;
					background-color: #ED7D31;
			}
				.left{
					float: left;
					width:87px;
						height: 672px;
						background-color: #00FF00;
				}
				.right{
					float: left;
						width:1113px;
						height: 672px;
						background-color: #00FFFF;
				}
					.rightTop{
						width: 1113px;
							height: 168px;
							background-color: darkgreen;
					}
					.rightMain{
						width: 1113px;
							height: 504px;
							background-color: greenyellow;
					}
						.rightTopright{
							float: left;
							width: 705px;
								height: 168px;
								background-color: darkseagreen;
						}
						.rightTopleft{
							float: left;
							width: 408px;
								height: 168px;
								background-color: cornflowerblueyellow;
						}
							.img03{
							width: 408px;
								height: 111px;
								background-color:yellow
							}
							.img05{
								width: 408px;
									height: 57px;
									background-color:yellow
							
							}
			   .rightMain{
                    width: 1113px;
                    height: 504px;
                    background-color:yellow ;

                }    
                    .rightMainleft{
                        float: left;
                        width: 30px;
                        height: 504px;
                        background-color:blue ;
                    }
                    /*.rightMainright{
                        float: left;
                        width: 621px;
                        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:yellow ;
                      } 
        </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="img05"><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>
		<!--</style>	
	</head>
	<body>
		<div class='top'>
			
		</div>
		<div class="main">
			<div class="left">
				
			</div>
			<div class="right">
				<div class="rightTop">
					<div class="rightTopright"></div>											
					<div class="rightTopleft">
						<div class="rightTopleftbottom"></div>													
					</div>
				</div>
				<div class="rightMain">
					
				</div>
			</div>
		</div>
	</body>
</html>-->
posted @ 2026-07-07 08:38  -王心雨-  阅读(4)  评论(0)    收藏  举报