发表于: 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。

太棒了!又是调试软件,我简直恨透了调试软件,百度了半个小时见识了各种转换方法结果各种版本不一样还找不到,我真是一遇到调试软件就想爆炸,最后终于放弃向师兄求助,说明天会传给我一个相应的方法,今天先存疑。

明天要做的事情:

收尾任务四,继续任务五的学习。

遇到的问题:

问题多多,设置之后各种奇葩的网页出来,多到我都懒的截图了,在错误中成长吧

收获:

理清思路再动手,搞清楚某个元素管哪一块儿的。


返回列表 返回列表
评论

    分享到