发表于: 2018-07-04 22:43:00
2 770
今天完成的事情:
1. 重新巩固了魔镜介绍页面任务。
2.查找资料,了解表单元素与CSS定位。
3.下载任务资源 切图,完成登录页任务。
明日计划:
学习flex布局,完成护工页面任务。复习前面的内容
遇到的问题:
今天写登录页任务的时候没有用正确的用好相对定位,在写输入栏与密码栏的时候全部套用相对
定位与DIV命令,写完之后结果是BODY盒子的右边被撑开来了一块,在下方又出现了滚轮。后
面改成与绝对定位相搭配才解决问题。
收获总结:
1.在巩固魔镜介绍任务的时候的收获:1.在HTML中插入图片的时候,如果需要调整图片的大小,只
需输入长度或者宽度其中一个尺寸就行了,否则会影响图片的比例,导致图片变形。2.在使用CSS定
位的时候,要先考虑清楚父对象,不然则会导致定位失误,定位不准确。
2.了解了CSS中各种定位的作用,引用人家的总结吧:
relative:生成相对定位的元素,相对于其正常位置进行定位。
元素的位置通过left、right、top、button属性进行规定,
可以通过z-index进行层次分级。
元素元素仍保持其未定位前的形状,原本所占的空间仍将保留。
如果没有定位偏移量,对元素本身没有任何影响
absolute:生成绝对定位元素。使元素脱离文档流,并相对于其包含块进行定位,包含块可能是文档中的另一个元素或者是初始包含块,
元素原先在正常文档流中所占的空间会会被后面元素占据;
元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框;
绝对定位元素的包含块由离它最近的 'position' 属性为 'absolute'、'relative' 或者 'fixed' 的祖先元素创建。只要父级元素设置了position并且不是static(默认既是static),那么设定了absolute的子元素即以此为包含块(最近的)。如果都没有定义,那么就相对于整个文档body定位(注意不是相对于浏览器窗口定位)
相对定位一般都是配合绝对定位元素使用
fixed:生成绝对定位元素,相对于浏览器窗口的定位。通常配合z-index一起来使用。比如说网页上悬挂的聊天图标或者广告就是用了fixed。
3.了解了表单的内容:表单包含<input> 元素,<select> 元素,<button>元素,等;其中input是最重要的元素,根据
不同的type属性可以编写输入输入栏,密码栏等等;
4.通过写登录页面任务,知道了将之前学的东西灵活组合应用很重要,不然写一个会重复写好多代码,而且达不到效果,主要还是对于
之前内容不熟练吧,今后还是要多多练习,将多种命令结合起来。
评论