2018.6.5
今天完成的事情:
1.完成任务二到任务四的任务总结
2.学习了display:flex相关并应用
3.任务五的提交
明天计划的事情:
1.开始任务六,作出一个demo出来
遇到的问题:
1.文字高度的自适应
height设定为auto
收获:
任务一到任务四总结
css-task-1任务总结
任务名称：CSS=TASK1
成果链接：https://helloimyhe.github.io/web/css1/task1.html
任务耗时：2018.5.28-2018.5.31（5）
技能脑图：
官网脑图：
自己脑图：
任务总结：
任务一从散修开始做起,因为没有网页的基础,所以基础知识都是慢慢学,花的时间比较长.到了线下之后才提交了任务一.从html的声明,标签,元素开始,到后面学习了css的基本语法包括注释,与html的结合方式,基本选择器,盒子模型,浮动.最后完成了任务一.
css-task-2任务总结
任务名称：CSS=TASK2
成果链接：https://helloimyhe.github.io/web/css1/task1.html
任务耗时：2018.5.31-2018.6.1（2）
技能脑图：
官网脑图：
自己脑图：
任务总结：
任务二主要学习了git部分,git可以管理并分享你的code,主要流程为先在本地git init一个版本库,git add一个文件, git commit一个文件,这样本地的工作完成。之后必须要有ssh,新建一个远程库,然后在本地先add远程库,再push本地库到远程库.clone的话就是将远程库的资料copy到本地,变成了一个版本库.
css-task-3任务总结
任务名称：CSS=TASK3
成果链接：https://helloimyhe.github.io/web/css3/task3.html
任务耗时：2018.6.1-2018.6.3（3）
技能脑图：
官网脑图：
自己脑图：
任务总结：
1.从任务三开始就开始应用到切图工具：photoshop,从切图到颜色,字体大小,我们都可以通过ps获取到,这些信息将是我们在做页面的时候css赋予的值
2.另外就是自适应的布局了,采用全局设定字体百分比+使用rem来完成
3.浮动的应用
css-task-4任务总结
任务名称：CSS=TASK4
成果链接：https://helloimyhe.github.io/web/css4/task4.html
任务耗时：2018.6.3-2018.6.5（3）
技能脑图：
官网脑图：
自己脑图：
任务总结：
1.表单Input以及button的使用
2.position:absolude和fixed的用法,也就是定位的属性需要熟悉
3.其中在position:absolute下如何使得文字居中
a.父元素设定line-height属性
b.利用transform:translateY属性
4.在input左边有块元素的情况如何实现input的自适应
a.left: xrem; width: calc(100% - xrem);
b.在position:absolute加上left: xrem; right:0;
c.width: 100%; 父元素:overflow:hidden;
5.间隔线如何产生
a.建立一个div元素,定义width：1px；height：25px；使用display:inline属性,将其变成行内元素
b.使用伪元素来实现,比如:.phonenumber::after{
content: "";
width: 1px;
height: 60%;
background-color:#eff0f4;
position: absolute;
left: 1.1rem;
top: 20%;
c.利用boder-left属性,比如:1px solid #00F
6.注册的手机号如何限制只能是11位的数字
<input name="phone" type="text" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="11位手机号码" maxlength="11"/>
1.flex是flexible box的缩写,意思是弹性布局,用来为盒状模型提供灵活性,任何一个容器都可以制定为flex布局
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
其中基本属性有
flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
评论