发表于： 2016-10-02 11:17:25
1 601
根据以前学的基础做了一个。现在做的没用DISPLAY，用的浮动。等晚些时候学习了网站里的视频之后，再按照网站的标准做一个。各位师兄师姐有什么建议请尽管提。上代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>九宫格</title>
<style>
.container{
width:1100px;
margin:0 auto;
}
.column{
width:80px;
height:80px;
background-color:orange;
border-radius:0.3em;
float:left;
margin-left:5px;
margin-top:5px;
}
.row{
clear:both;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div class="row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div class="row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</div>
</body>
</html>
------------------------------分割线----------------------------------------
用table-row和table-cell的时候，margin无效，求解惑！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.container{
display:table;
width:180px;
height:180px;
}
.tableRow{
display:table-row;
}
.tableCell{
display:table-cell;
height:30%;
width:30%;
background-color:orange;
border-radius:0.3em;
border:1px solid black;
margin-top:10px;/*无效？？*/
margin-left:10px;/*无效？？*/
}
</style>
<title>九宫格</title>
</head>
<body>
<div class="container"><!-- 表格布局 -->
<div class="tableRow"><!-- 表格的行，共三行 -->
<div class="tableCell"></div><!-- 表格的单元格，每行中有三个单元格 -->
<div class="tableCell"></div>
<div class="tableCell"></div>
</div>
<div class="tableRow">
<div class="tableCell"></div>
<div class="tableCell"></div>
<div class="tableCell"></div>
</div>
<div class="tableRow">
<div class="tableCell"></div>
<div class="tableCell"></div>
<div class="tableCell"></div>
</div>
</div>
</body>
</html>
返回列表
评论