发表于： 2016-03-28 23:14:25
1 1587
今天刚完成任务一，感觉代码还是不够简洁。（图片不知道为啥，放不进来。按那个图片按钮没反应）
试过其他人的方法，但是一用float:left；橙色格子就变成了一排，所以就用自己的方法。
HTML代码：
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="type/html; charset=utf-8"/>
<title>九宫格</title>
<link rel="stylesheet" type="text/css" href="nine.css"/>
</head>
<body>
<div id="header">
<div class="cheng"></div>
<div class="cheng"></div>
<div class="cheng"></div>
<div id="content">
<div class="cheng"></div>
<div class="cheng"></div>
<div class="cheng"></div>
</div>
<div id="footer">
<div class="cheng"></div>
<div class="cheng"></div>
<div class="cheng"></div>
</div>
</div>
</body>
</html>
CSS代码：
#header #content #footer{width:350px;height:120px;}
.cheng{
width:90px;
height:90px;
margin:2px;
border-radius:10px;
background-color:orange;
float:left;
}
#content,#footer{clear:both;}
之前的CSS代码：
div .abc{
width:300px;
height:300px;
}
div.a{
background-color: orange;
border-radius: 10px;
height: 90px;
width: 90px;
margin: 10px;
float:left;
}
之前的html代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="type/html;charset=utf-8"/>
<title>九宫格</title>
<link rel="stylesheet" type="text/css" href="nine2.css"/>
</head>
<body>
<div class="abc">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
</body>
</html>
麻烦大家帮我找出一下错误，谢谢！
明天准备任务2！
刚弄完nginx,大概了解了网站与服务器的关系，手机访问也成功。现在开始任务2——2016.3.29
返回列表
评论