初识定位(标题居然要五个字,我是凑字数的)

原创 15102883200 随笔 HTML学习 121阅读 2017-11-17 19:42:36 举报

今天结束了浮动的相关练习,开始了定位的学习。

其实不是很陌生,自己以前也看过一点相关的知识,不过通过前面一个月的学习,已经认识到了自己以前东拼西凑式的学习导致的基础不牢,收起以前的经验,重新开始学习。

在我感觉定位是一种非常活跃(或者说自由)的属性,相比于浮动的高度塌陷、margin的传递和叠压,它显得很温顺,给人的感觉就是想让标签元素去哪,就可以用定位让它去哪。

不过,过度的自由绝对是有害的,想了想平时见过的网站结构,只有合理的使用标签和属性,才能搭建出一个健壮的网站。
毕竟····定位如果用的过多,可以想象到最后肯定是坑自己。
越来越明白,有一个好的合理的结构,后续的各种编码肯定会省很多功夫。

关于今天的练习,由于是初学,所以留了四个比较简单的练习,其中两个不用定位也能做,写的时候还暗自怀疑是不是老师留的什么坑没看出来,结果最后发现,就是不需要 =_=···

先来个案例图:
图1:

初识定位(标题居然要五个字,我是凑字数的)

图2:

初识定位(标题居然要五个字,我是凑字数的)

图3:

初识定位(标题居然要五个字,我是凑字数的)

图4:

初识定位(标题居然要五个字,我是凑字数的)

具体实现过程中的关键点:

练习1:
主要需要注意鼠标悬停时,四条边都要变色,按照前几天的方法,进行常规布局以后,要在鼠标悬停时给选中元素添加position:relative属性,使得当前元素层级提升,这样才能实现叠压在一起的边框也显示变色。

练习2:
没什么难点,只是在1的基础上加了一些其他布局元素,顺利完成。

练习3:
这个练习当时写的时候想多了,毕竟上一个练习不用定位也能写,所以习惯性思维觉得这个练习总该用定位了吧,然而···
所以还是要自信点,先写嘛,不行了再改,想的多不如动手试一试。
这个练习的关键点在于鼠标移入后,下边框消失,并且不能在缺口的地方出现非矩形。
具体实现方法是通过下面的兄弟元素margin-top为负解决的,两个模块的边框叠压在一起,鼠标移入地时候取消掉当前元素的底边框就行,因为有互相叠压,所以测量头部高度时需要注意。

练习4:
说个题外的感想,学了一个多月了,以前看网站都是看内容,现在看网站直接看布局,脑子里下意识的就会想怎么写结构 =_=···

遮罩是个很常见的样式,学定位前并不知道它的实现方法,今天学会了。
关键点在于要写成无论怎么调整背景的透明度,字的透明度都不能受到影响,所以实现的时候要分开来写,将文字写在背景遮罩层的同级,这样就可以了。

今天的作业难度不高,但是都是一些网页里很常见的效果,做出来也是挺好玩的。

代码如下:
案例1:
html 代码

案例2:
html 代码

案例3:
html 代码

案例4:
html 代码

最后传个附件,留待以后参考。

初识定位(标题居然要五个字,我是凑字数的)

PS:周末作业还没做,只是想了想结构,下次再说。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复