亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

正在回答

4 回答

方法一：

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8"?/>
<title>九宮格</title>
<style>
*{margin:0;padding:?0;}
.box{width:?300px;height:?300px;margin:?50px?auto;background:?red;border-left:1px?solid?#000;border-top:1px?solid?#000;}
.box?span{width:?99px;height:?99px;background:?#00aeff;float:left;border-bottom:?1px?solid?#000;border-right:1px?solid?#000;}
</style>

</head>

<body>
<div?class="box">
????????<span></span>
????????<span></span>
????????<span></span>
????????<span></span>
????????<span></span>
????????<span></span>
????????<span></span>
????????<span></span>
????????<span></span>
</div>
</body>
</html>

方法二：

<!DOCTYPE?html>
<html>
<head>
<metacharset="utf-8"?/>
<title>九宮格</title>
<style>
*{margin:0;padding:?0;}
.box{width:?300px;height:?300px;margin:?50px?auto;background:?red;}
.box?span{display:?block;width:?99px;height:?99px;background:?#00aeff;float:left;border:?1px?solid?#000;position:?relative;margin:-1px?0?0?-1px;_width:100px;_height:100px;}
</style>

</head>

<body>
<div?class="box">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>
</body>
</html>


0 回復 有任何疑惑可以回復我~

用table布局，或者用div布局，使用float

0 回復 有任何疑惑可以回復我~

參考代碼

<!DOCTYPE?html>
<html>

	<head>
		<meta?charset="utf-8"?/>
		<title></title>
	</head>
	<style>
		.box?{
			overflow:?hidden;
			width:?632px;
			padding:?10px?0?0?10px;
			background:?red;
			margin:?100px?auto;
		}
		.box?div?{
			height:?200px;
			width:?200px;
			margin-right:?10px;
			float:?left;
			margin-bottom:?10px;
			background:?yellow;
			text-align:?center;
			line-height:?200px;
		}
	</style>

	<body>
		<div?class="box">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>

</html>

大小顏色自己調一下吧

4 回復 有任何疑惑可以回復我~

<table width="200px" heignt="200px" border="1">

? ? <tr height="50px"><td></td><td></td><td></td></tr>

? ? <tr height="50px"><td></td><td></td><td></td></tr>

? ? <tr height="50px"><td></td><td></td><td></td></tr>

</table>

簡單寫了個模型，要做成你截圖那樣的，再加些樣式就可以了

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
初識HTML(5)+CSS(3)-升級版
  • 參與學習       1228748    人
  • 解答問題       19080    個

HTML(5)+CSS(3)基礎教程8小時帶領大家步步深入學習標簽用法和意義

進入課程

怎么做九宮格！求助

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號