css 如何制作九宫格?

html-css054

css 如何制作九宫格?,第1张

<!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>

<meta name="keywords" content="">

<meta name="description" content="">

<style type="text/css">

* { padding:0margin:0}

dl { width:153pxborder-top:1px solid #dddborder-left:1px solid #ddd}

dl dd { list-style:nonewidth:50pxheight:50pxfloat:leftborder-right:1px solid #dddborder-bottom:1px solid #dddfloat:left}

</style>

<script type="text/javascript" src="js/jquery.min.js"></script>

</head>

<body>

<dl>

<dd></dd>

<dd></dd>

<dd></dd>

<dd></dd>

<dd></dd>

<dd></dd>

<dd></dd>

<dd></dd>

<dd></dd>

</dl>

</body>

</html>

把一张用来做边框的图片横砍两刀，竖砍两刀，就变成一个由九个小图片组成的九宫格，其中四个角的四张图片就是边框的四个角，四条边上的四张图片就用来做边框的四条边。最中间的那个图片是边框包围着的实际内容，不属于边框，所以这张图片是用不到的，因此这个九宫格实际被利用到的就是四周的八张图片。