发表于： 2016-02-16 19:07:50
4 1729
因为之前看过一点入门的书，所以上手还是比较快
看完了任务和相关链接之后，翻了一下之前看过的书，有了一个大致的思路
主要出题点在运用HTML/CSS的知识来完成网页布局，比较快的方法是运用HTML表格来完成，但这种方法不推荐使用，于是我又试了一下CSS表格的方式来完成布局。中间遇到了很多问题，比如webstorm软件不熟悉，很多知识点忘记了又去重新复习，感觉收获还是很大。
考虑到很多一起奋战的朋友还是对完成任务没什么思路，特别把过程发出来大家可以参考一下，如果实在没有思路的可以看一下下面发的源码，用的是第二种方法。
HTML部分：
<body>
<div class="table">
<div class="line">
<div class="l1"> </div>
<div class="l1"> </div>
<div class="l1"> </div>
</div>
<div class="line">
<div class="l2"> </div>
<div class="l2"> </div>
<div class="l2"> </div>
</div>
<div class="line">
<div class="l3"> </div>
<div class="l3"> </div>
<div class="l3"> </div>
</div>
</div>
</body>
CSS部分
.table{display:table;border-spacing: 5px;width: 100%}
.line{display: table-row}
.l1{display: table-cell;border-radius: 4px;background-color: antiquewhite;line-height: 4em}
.l2{display: table-cell;border-radius: 4px;background-color: antiquewhite;line-height: 4em}
.l3{display: table-cell;border-radius: 4px;background-color: antiquewhite;line-height: 4em}
特别说明一下 是占位符 div里面不想出现字符，但又需要字符来占位
返回列表
评论