发表于： 2016-09-29 03:19:40
1 755
终于在电脑端把任务1做出来了！
主要思想：在头部定义了两个类选择器样式，分别是.table-column和.orange-square，
.orange-square的作用是定义橙色方块样式，通过display:inline-block使小方块横向排列；
.table-column的作用是通过display:block;和<div>标签一起使用，使3个方块横向成行并成为一个块。
这样就得到了九宫格。
问题：还是有些标签和css的表现形式不熟练。
写代码时很容易出现小bug导致页面显示失败。
对盒子模型的外边距合并还是有些疑惑，按理说我的padding和margin的大小设置应该有问题，但为什么显示的效果却是正确的？
代码如下：
<!DOCTYPE html>
<head>
<style type="text/css">
.table-column
{
padding: 1px;
margin: 2px;
display:block;
}
.orange-square
{
padding:1px;
margin: 1px;
width:100px;
height:100px;
background-color:rgb(232,131,13);
border-radius: 5px;
display:inline-block;
}
</style>
<title>task1</title>
</head>
<body>
<div class="table-column">
<div class="orange-square"></div>
<div class="orange-square"></div>
<div class="orange-square"></div>
</div>
<div class="table-column">
<div class="orange-square"></div>
<div class="orange-square"></div>
<div class="orange-square"></div>
</div><div class="table-column">
<div class="orange-square"></div>
<div class="orange-square"></div>
<div class="orange-square"></div>
</div>
</html>
返回列表
评论