发表于: 2019-03-28 00:31:04

2 866


完成的事:

                  这几天看了关于css和css盒子模型的资料,对于css和盒子模型有了一定的了解。

 并试着进行了九宫格的制作。

1、指定圆角边框为%10

2、设置正方形尺寸:宽高设为30vw (viewport width) 即视口宽度的30%

3、设置正方形颜色为橙黄色(orange)

4、设置正方形外边距为1vw

5、设置正方形为向左浮动,因为尺寸刚好满足3个正方形在一行


遇到的问题:

九宫格不能自适应,当把网页窗口缩小后,正方形形状发生改变,位置也发生改变

我是用<p>做方块,但好像用<div>也可以,百度了一下<div>的定义,用<div>来做方块应该更正确。


<div> 可定义文档中的分区或节(division/section)。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。


明天的计划:

把<p>标签换为<div>,继续查找资料调整编码以达到自适应的目的。



返回列表 返回列表
评论

    分享到