发表于: 2017-03-05 21:29:26
1 712
今天完成的事情:
复习html与css标签。
学习设置层叠优先级:
在css中有position属性值为absolute、fixed、relative时使用z-index来定义哪个元素显示在更上面,值越大的越靠上,取值为整数且没有单位。
原理,当使用position时,元素脱离了文档流获得新的定位,就相当于在网页的xy平面上多出一个Z轴,z-index的值就是定义元素在z轴上位置,值越大,离我们(相当于俯视角)越近,就越优先被我们看到,而小于它值的元素就被覆盖了。
通过设定z-index属性使得header紧贴浏览器上端且不会被覆盖:
学习设定图片大小:
在ps中打开任务四psd文件,双击左侧放大镜按钮,可使psd百分之百大小显示,右键选中切片工具使用切线切出相同大小的图片。
依照form表格的高度来设定图片高度,利用图片的高宽之比来求出图片应设宽度,使用rem单位确保图片可随不同浏览器大小任意缩放,设定最大宽度100%确保图片不会被拉伸失真模糊。
补漏:
使用ps吸管工具获得颜色16进制代码,或者点击背景色按钮鼠标移到图片相应位置获取颜色代码。(以前都是随便找一个自己看的顺眼的相近颜色就用了,懒得去查代码,以后要严格按照标准步骤来。)
a标签取消url使用“#”代替,原来想着不加网址的话测试的时候看不出来加没加成功啊,于是就随便加了个,囧......
使用border:none来取消输入框边框。
使用font-weight:bold来设定输入网文字加粗。(这个忘记设定了.....)
存疑:
为输入框图片和输入内容之间加竖线:因为我是把输入框作为一个整体,把图片设为背景然后不平铺,然后padding出图片宽度的位置后定位输入栏,结果使用border定义竖线就变成直接定义整个输入框了,就像昨天任务里展示的那样,囧......
推倒重做的话感觉在这个知识点上就要再耗一天,于是决定“好读书,不求甚解”了,先存疑回过头来再解决它。所以简单粗暴的又切了次图,直接把竖线切进来了。
模块高度与模块间距:图片是我切下来之后本来在ps中描述它为cm的单位就可见为px了,但是模块跟间距也切下来这么量的话感觉自己好蠢,一定有什么简单的解决办法,后来查到可以调试ps的显示方法让它直接显示为px。
太棒了!又是调试软件,我简直恨透了调试软件,百度了半个小时见识了各种转换方法结果各种版本不一样还找不到,我真是一遇到调试软件就想爆炸,最后终于放弃向师兄求助,说明天会传给我一个相应的方法,今天先存疑。
明天要做的事情:
收尾任务四,继续任务五的学习。
遇到的问题:
问题多多,设置之后各种奇葩的网页出来,多到我都懒的截图了,在错误中成长吧
收获:
理清思路再动手,搞清楚某个元素管哪一块儿的。
评论