发表于： 2019-09-10 17:29:01
8 953
今天完成的事情：
1.了解HTML<!DOCTYPE>标签。它是一个声明，告诉浏览器应使用HTML的何种版本进行编写，不同的版本声明的内容不同，且此声明大小写均可。
2.CSS可定义如何显示HTML，HTML为骨架，CSS可对其进行修饰，例如修改颜色、字体。
3.任务要求完成一个自适应的九宫格。完成情况如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale:0.5,maximum-scale:2">
<title>奉二的九宫格</title>
<style type="text/css">
.box1
{
margin: 0;
padding: 0;
}
.box2
{
background-color:yellow;
width:31.3%;
padding-top: 31.3%;
margin: 1%;
border-radius:20px;/*给方块加圆角*/
float:right;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果如下图：
4.完成过程：最初是先做了一个小格子，背景颜色黄色，宽高均设置为100px，并给一个小圆角10px，代码如下：
{
background-color:yellow;
width:100px;
height: 100px;
margin: 10px;
border-radius:10px;/*给方块加圆角*/
;
效果如下图：
于是根据相同的原理先弄出9个格子，代码如下：
.box
{
background-color:yellow;
width:100px;
height: 100px;
margin: 10px;
border-radius:10px;/*给方块加圆角*/
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
div为块级元素，块级元素的特点是会独占一行，因此9个格子会竖直排列，部分截图如下：
查阅相关资料，了解到了一个叫浮动(float)的概念，例如浮动可以使元素向左排列，加入左浮动float代码后，效果图如下：
这个位置卡了很久，一直不理解格子怎样换行变成3*3格式。百度查阅很久后，了解到了一个方法，就是先做一个父级大格子，再把子级小格子都塞进去，对小格子宽度进行设置，可以做到一行只排列3个格子，并由于浮动的特点，大格子宽度不够容纳第4个小格子时，小格子会自动换行到下一行，以此来实现3*3排列，代码如下：
.box1
{
width: 100%;
height: 100%;
}
.box2
{
background-color:yellow;
width:31.3%;
padding-top: 31.3%;
margin: 1%;
border-radius:20px;/*给方块加圆角*/
float:right;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
</div>
</body>
我让小格子的外边距margin设置为1%，通过计算，宽度的百分比应该为（100%-1%*2*3）/3=31.3%，此处我想实现九宫格的自适应，查阅资料，父级元素没有设置固定的宽度值，则会直接参照浏览器窗口宽度，那么设置为100%，高度也为100%。但实际运行后网页是一片空白，百度过后知道高度并不是确定的。
继续查阅资料，得到一种思路，直接把内外边距取0，得到一个和浏览器窗口大小一样的大格子，小格子可以用padding-top撑开，（注：margin, padding 的百分比数值是相对父元素的宽度计算的）。修改后代码如第三条所示。
5.配置好nginx后，手机访问网页，效果如下图：
收获：向前端迈出了第一步，总而言之磕磕碰碰，遇到很多问题，刚来成都线下试学，怕自己进度不行，很方，没有基础，只能慢慢来，代码应该还存在一些问题。一些概念的东西目前也只是了解的模模糊糊，不能算很清楚，这点需要加强。查阅资料是一个很需要耐心的过程，自学很需要自己会查找资料，真是不容易。了解了float的这种使用方法，一些HTML的基本标签使用。还需要查阅css使用外联的方式，需要巩固基础知识。
遇到的问题：9个格子换行问题、小格子的具体标签描述、以及一些基础概念的理解。在百度中查询资料以及反复实验解决，具体过程思路写在今日完成的事情里。
明天计划的事：继续完成下一个任务。
返回列表
评论