发表于： 2018-09-21 21:06:56
1 786
今天完成的事情：
任务六
下拉框
页面垂直居中问题
.tail{
width: 100%;
height:82px;
border-top: 1px solid #999;;
display: flex;
justify-content: space-around;
align-items: center;
background: #f8fafb;
position: fixed;
bottom: 0;}
.write{
width: 70px;
height: 70px;
background: mediumturquoise;
border-radius: 50%;
background-image: url(../img/task6.7.png);
background-repeat: no-repeat;
background-position: 17px 12px;
}.patient ul li{
line-height: 50px;
text-align: center;
border:1px #999 solid;
background:#ffffff;
color:#999;
font-size:1.1rem;
background-image: url(../img/task6.4.png);
background-repeat: no-repeat;
background-position:97% 20px;
}
明天计划的事情：任务七
遇到的问题：因为昨天解决了下拉框的问题，所以剩下的没什么特别难的，一般的问题百度就能找到答案。
收获：今天学会了background-position，不得不说这个解决了我很大的问题，我一直苦于没办法让图片移动用了这个才明白，最主要使用在 一张png 上有多个logo 或者 ico 这个时候就用到background-position了background-position：x y x等于平行轴 y等于竖行轴。x y的取值可以为正数，也可以是负数
任务六总结：
这个任务的难点就在于这个下拉框，开始的话我想的是直接写一个下拉框，但是脑子里一点头绪都没有，完全想不到这个问题要怎么实现，然后我就开始搜百度想看看别人是怎么完成这个的，但是看了半天根本看不明白，上面写的一眼看去都好复杂，就在我抓耳挠腮的时候，师兄告诉我可以让我试试模拟下拉框，这个模拟下拉框会简单的更多，之后我就去搜了百度，修修改改总算是弄明白这个模拟下拉框了。
深度思考：
1.去除inline-block间距有哪几种方法？
方法1: 改变书写方式
元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就消失了。
方法2：font-size
这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距。
方法3：使用margin负值
margin负值的大小与上下文的字体和文字大小相关，Arial字体的margin负值为-3像素，Tahoma和Verdana就是-4像素，而Geneva为-6像素。由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。
方法4：使用word-spacing或letter-spacing
一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。
letter-spacing子元素要设置letter-spacing为0，不然会继承父元素的值；使用word-spacing时，只需设置父元素word-spacing为合适值即可。
使用letter-spacing和word-spacing时，其在不同浏览器下效果不同。
2.css有哪些属性可以继承？
一是文本相关的属性，具体有： font-family, font-size, font-style,font-variant, font-weight, font, letter-spacing,line-height，text-align, text-indent, text-transform,word-spacing 二是列表相关的属性，具体如下： list-style-image, list-style-position,list-style-type, list-style 还有一个属性比较重要的是color属性。
任务五总结：
这次好多了，不再像前几个任务一样，看见以后一脸的蒙蔽不知道该怎么下手，慢慢的开始有点构思了，开始会看着UI图先看一会，过程中会思考这个地方应该怎么布局应该用什么元素，又或者应该怎么样排列，比如用FLEX应该怎么用才能达到效果，不得不过这个FLEX的确是好用，没有盒子模型和FLEX解决不了的问题。
任务四总结：
任务越做越考验基础，这可着实让我自己坑了自己，一开始想着看啥看，边做边做边学呗，可没想到越复杂月考验对基础的理解。其实任务四一眼看到的时候，觉得还是蛮简单的应该会很容易上手，当然我不出意料的卡在那里几个小时想不出办法，最后自己实在想不出办法请教了师兄，然后知道自己该在那里找资料，成功的解决了问题完成了任务。
任务三总结：
今天的任务三对我而言就比较复杂了，不是想九宫格那么简单了，我第一眼看到的时候还是比较懵逼的，这么复杂我能做出来吗？师兄却告诉我没事先试试，你先试试看看能不能做出来，或者说做到什么程度，有解决不了再让我去找他。对我而言问题最大的就是自适应，让内容随着屏幕的大小转换，而不是挤成一堆，后来想不出来问了师兄和查了百度才解决了。
任务二总结：
听从师兄的建议下载了github、webstorm，说实话以前从没接触这些软件，什么用途？怎么用？完全是一脸懵逼，下好了不知道根本怎么用，师兄很耐心的帮我调试，并且告诉我这些东西的用途、用法，以及使用中有哪些是要注意的。
任务一总结：
今天是第一次接触WEB前端，有很多看了一脸懵逼的东西，比如上午看了一上午的html基础教程，了解到了html的教程、简介、编辑器、基础、元素、标题、样式、段落.....等等。之后又看了css的基础教程了解到简介、语法、派生选择器、id选择器、类选择器、属性选择器、文本.......等等。然后开始尝试用html和css自己制作一个网页实现九宫格，学到了html标签、盒子模型、浮动。
返回列表
评论