讲讲关于div的使用方法，就以下面这个代码为例子，填充每个个格子， 使用不用的颜色，使用div
<!DOCTYPEhtml><html><head><title>用div做一个九宫格</title><metacharset="utf-8"><styletype="t...
<!DOCTYPE html>
<html>
<head>
<title>用div做一个九宫格</title>
<meta charset="utf-8">
<style type="text/css">
th,td{border:1px solid black;width:120px;height:120px}
.important{background-color:red;}
</style>
</head>
<body>
<table style="border-collapse:collapse;">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</div>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</div>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html> 展开
<html>
<head>
<title>用div做一个九宫格</title>
<meta charset="utf-8">
<style type="text/css">
th,td{border:1px solid black;width:120px;height:120px}
.important{background-color:red;}
</style>
</head>
<body>
<table style="border-collapse:collapse;">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</div>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</div>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html> 展开
展开全部
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<title>用div做一个九宫格</title>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0;padding: 0;}
.demo{width: 600px;height: 600px;margin: 50px auto;overflow: hidden;}
.demo > div{width: 200px;height: 200px;float: left;text-align: center;line-height: 200px;color: #fff;}
.D1{background: #269abc;}
.D2{background: #26bc50;}
.D3{background: #93bc26;}
.D4{background: #bca926;}
.D5{background: #bc5726;}
.D6{background: #8c26bc;}
.D7{background: #4626bc;}
.D8{background: #bc2650;}
.D9{background: #a9bc26;}
</style>
</head>
<body>
<div class="demo">
<div class="D1">1</div>
<div class="D2">2</div>
<div class="D3">3</div>
<div class="D4">4</div>
<div class="D5">5</div>
<div class="D6">6</div>
<div class="D7">7</div>
<div class="D8">8</div>
<div class="D9">9</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
