零基础教你制作相册
一制作空白页面
<!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"></div>
<div class="main">
<div class="left"></div>
<div class="right">
<div class="rightTop">
<div class="rightTopleft">
<div class="rightToplefttop"></div>
<div class="rightTopleftbottom"></div>
</div>
<div class="rightTopright"></div>
</div>
<div class="rightMain">
<div class="rightMainleft"></div>
<div class="rightMainright">
<div class="rightMainrightleft">
<div class="rightMainrightlefttop"></div>
<div class="rightMainrightleftbottom"></div>
</div>
<div class="rightMainrightright"></div>
</div>
</div>
</div>
</div>
</body>
</html>
二.将图片插入
（1）使用img形式
<!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>
（2）使用background-image:url()形式
<!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 ;
background-image:url(img/index_01.jpg) ;
}
.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 ;
background-image:url(img/index_02.jpg)
}
.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 ;
background-image:url(img/index_03.jpg)
}
.rightTopleftbottom{
width: 408px;
height: 57px;
background-color:mediumaquamarine ;
background-image:url(img/index_05.jpg)
}
.rightTopright{
float: left;
width: 705px;
height: 168px;
background-color:gold ;
background-image:url(img/index_04.jpg)
}
.rightMain{
width: 1113px;
height: 504px;
background-color:yellow ;
}
.rightMainleft{
float: left;
width: 30px;
height: 504px;
background-color:blue ;
background-image:url(img/index_06.jpg)
}
.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 ;
background-image:url(img/index_07.jpg)
}
.rightMainrightleftbottom{
width: 621px;
height: 85px;
background-color:cornflowerblue ;
background-image:url(img/index_09.jpg)
}
.rightMainrightright{
float: left;
width: 462px;
height: 504px;
background-color:hotpink ;
background-image:url(img/index_08.jpg)
}
</style>
</head>
<body>
<div class="top"></div>
<div class="main">
<div class="left"></div>
<div class="right">
<div class="rightTop">
<div class="rightTopleft">
<div class="rightToplefttop"></div>
<div class="rightTopleftbottom"></div>
</div>
<div class="rightTopright"></div>
</div>
<div class="rightMain">
<div class="rightMainleft"></div>
<div class="rightMainright">
<div class="rightMainrightleft">
<div class="rightMainrightlefttop"></div>
<div class="rightMainrightleftbottom"></div>
</div>
<div class="rightMainrightright"></div>
</div>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号