发表于: 2019-02-14 23:29:55

1 885


前言:感谢CCTV 感谢父母... Ohhh 不是,感谢今天我联系到了大师姐,荣幸的加入了上海分院的群,然后被火箭师兄领走了,并且悉心的点评了我之前所有被晾着的日报(天,终于有活的师兄能交流了!),嗯,加油加油,准备准备去线下和各位和蔼可亲的师兄师姐交流学习了!


今天完成的事:


1.解决了昨天遗留的问题——自适应

  昨天问题出在absolute定位的时候,left和top确定各自位置不知道用什么值,其实是单位混淆了,使用vw可以完美解决这个自适应的问题,而em适用于字体大小、行间距的调节。



---------------------------------------------------------------------------------------------------


2.另一种方法

  我在思考有没有其他方法可以做九宫格,然后网上查到了Flex布局————

  Flex布局中的基本概念:

  采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

容器的属性有:

1、flex-driection

2、flex-wrap

3、flex-flow

4、justify-content

5、align-items

6、align-content

-----------------------

项目的属性有:

1、order

2、flex-grow

3、flex-shrink

4、flex-basis

5、flex

6、align-self


Tips:每个属性都有不同的效果,在这里不一一赘述

(戳链接内容非常丰富——https://blog.csdn.net/qq_34648000/article/details/79115294)

------------------------------------------------------------------------------------------

Flex全称:Flexible Box,意为"弹性布局",能为盒状模型提供最大的灵活性


Flex优势:传统的方案更依赖于diplay属性+position属性+float属性,对于特殊的布局非常的不方便,比如:垂直居中


实践:

在了解了这些概念后,我开始了Flex布局,遇到了如下几个问题:

1.采用传统布局的时候,用一个大的box把九个小box包裹,然后采用逐个定位,这样想想就很繁琐,但是一开始上手Flex毫无头绪,因为Flex更讲究“整体性”,所以我就干脆删掉了之前所有东西,重新构思。

2.了解了“容器”和“项目”的属性后,一一实践,大概确定了这次要用到几个属性 flex-direction:row(实现盒子从左向右一一排列)flex-wrap:wrap(实现盒子能自动换行) justify-content:center(居中)

3.经过一系列查资料(好久),加上自己的思考,决定把九个格子再细分为三组(以下为很丑的手稿)

4.确定格子的表现形式,还是用padding+width,但是比例调了好久,不知道为什么高于31%就不行了!(后面有空再去验证,师兄看到了指点一下?)


5.最后一个大问题,所有设置完后,发现所有的格子很完美的,非常好看的,竖着排!!劳资忙活半天看到这幅场景也是心累到爆炸,后来突然想到了,应该就是div这个块级元素独占一行的特性,把display改成: inline-block后解决了,反正搞了大半天(真是一个下午)终于呈现了Flex版本的九宫格,总体来看感觉比之前干净一些,上图:



(悄咪咪的说,我今天查到了怎么做GIF图,完美展示,学以致用开心~)


3.(今天完成的第3件事):

之前已经注册好了Github,然后今天按照教程继续安装了Git和Github for Windows,最终安装完成一系列玩意儿


运行了Github for Windows,重新建立了库,和本地文件夹,在本地文件夹里打了一个新的html文件,进行样本实验,熟悉了修改删除代码,Publish了代码到Github上。就是不知道服务器要自己买吗?干啥用的?明天查查



明天的计划

1.完成Github任务二的学习

2.配置Nginx,手机端浏览试试

3.有时间进行任务一的深度思考

4.是不是会了Github,以后就要上传代码链接到日报了?明天试试


--------------------------------------------------------------------------------------------------


今天情人节,忙活一天代码了,痛并快乐着,希望接下来自己好好学Web完成转型,面包和爱情总会有的!!






返回列表 返回列表
评论

    分享到