如何用div+css无缝拼接图片?

html-css011

如何用div+css无缝拼接图片?,第1张

你的HTML代码 特别是A标签 嵌套错误。应该是:<a href="图片9的链接" style="margin:0padding:0"><img src="图片1" alt="" width="" height=""></a>

margin:0padding:0的意思是 边距为0,无缝

里面的长宽和内容自己修改。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{

margin:0

padding:0

}

.d1 {

margin: auto

height: 200px

width: 504px

}

.d2 {

margin: auto

height: 200px

width: 504px

}

.d3 {

margin: auto

height: 200px

width: 504px

}

.d1-1 {

height: 100px

width: 504px

float: left

background-color: #000

}

.d1-2 {

height: 100px

width: 252px

float: left

background-color: #030

}

.d1-3 {

height: 100px

width: 252px

float: left

background-color: #CF0

}

.d2-1 {

height: 200px

width: 252px

float: left

background-color: #03F

}

.d2-2 {

height: 200px

width: 252px

float: left

background-color: #F00

}

.d3-1 {

height: 200px

width: 168px

float: left

background-color: #900

}

.d3-2 {

height: 200px

width: 168px

float: left

background-color: #FFC

}

.d3-3 {

height: 200px

width: 168px

float: left

background-color: #36C

}

</style>

</head>

<body>

<div class="d1">

<div class="d1-1"></div>

<div class="d1-2"></div>

<div class="d1-3"></div>

</div>

<div class="d2">

<div class="d2-1"></div>

<div class="d2-2"></div>

</div>

<div class="d3">

<div class="d3-1"></div>

<div class="d3-2"></div>

<div class="d3-3"></div>

</div>

</body>

</html>