发表于: 2018-08-29 22:23:18

1 646



任务3任务总结。

耗时2018.8.24-2018.8.29

成果链接  https://jksmiss.github.io/start-a-project/task3/task3.html

我的脑图

官方脑图

我今天是这样做的

首先我下载了切图用的PhotoShop,然后我在修真院的网站上面下载了要设计图,最后在网页上 用蓝湖

蓝湖的网页上,我就用上了蓝湖开始测量距离,显示的都是PX。然后师兄叫我先用PX做出来一份,先布

局下,我就先开始做了我就知道了蓝湖可以测量距离是多少,接着我用PS来进行了切图。在师兄的指导下

我开始了,然而一开始并没有切好,图片切的一大一小的,不过没有关系。我就重新的切了一份,然后就

可以了,我开始按照上面的布局,开始创建HTML和,我运用DIV的标签,开始在上面设置了。然后我先插入

了一张图片,然后我要开始在上面修改数值,因为我之前我一直都是用类选择器,后来在师兄的教导下,我就

在尝试了下用标签选择器,这个中心的我差一点就用了PS来把它截图截了下来,然后师兄教导我,我用了<p>

这个标签就开始了我把那一段文字给打进去了,后来我才知道有居中text-align: center; 这个标签,后来我就用了

它把哪个葡萄藤的LOGO开始了居中,这个时候我发现我们用的是PX的数值,我的这个是二倍图,所以要进行一个

尺寸的转换,我在看了下资料以后,知道了浏览器都符合1rem就等于16px,那么根据数学的换算就可以等于

12px=0.75em,10px=0.625em是这样的,所以我们需要让它变为100,。就把font-size的换算

,需要在css中的body选择器中声明Font-size=62.5%,这样的话我们得出的数值就是要进行px转换的话再除以一百

就可以了。因为我们是二倍图,所以我们要除以二百,就是我们要用的数值来进行写上去,然后的话我发现了图标

太大了我就找到了这个标签zoom,这个标签可以调整图标的大小,还有一个标签转换的运用display: inline-block;

这个标签可以转换成行内快的元素,最后在师兄的指导下我成功的发现了还有这样的选择器.icon4 p{,这样的话

一样的可以进行后面的修改,我后来去查了下原来是这样的1、相同的权重:以后面出现的选择器为最后规矩

2、不同的权重,权重值高则生效:包含更高权重选择器的一条规则拥有更高的权重选择器可能会包含一个或

者多个与权重相关的计算点,若经过计算得到的权重值越大,则认为这个选择器的权重高。






今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)

今天完成了任务三完成了任务三以后,我学会了一些多的标签,还有数值的转换像px和rem的这样

明天计划的事情:(一定要写非常细致的内容) 

明天我计划复习下CSS选择器还有关于其他的一些旧知识了
遇到的问题:(遇到什么困难,怎么解决的) 

遇到了一直无法居中。还有关于浮动的一些东西
收获:(通过今天的学习,学到了什么知识)

1、相同的权重:以后面出现的选择器为最后规矩

2、不同的权重,权重值高则生效:包含更高权重选择器的一条规则拥有更高的权重选择器可能会包含一个或

者多个与权重相关的计算点,若经过计算得到的权重值越大,则认为这个选择器的权重高。



返回列表 返回列表
评论

    分享到