一步一步写web之初识web(六)

时间:2022-01-19 04:07:07

这一篇为初识web的总结篇。

首先回顾之前做的内容:

第一步:做一个实现一个滑动门效果,需要给一个边框把几个图片包起来,这时我们用一个div,样式为mainContainer。mainContainer中设置了基本属性,长宽高背景色及position,这个position如果不设置就会靠边,不美观,这里的position设置为relative,在script里我们把它设为了居中。

第二步:1)我们实现了一个三角形的效果,实际项目中会经常用到三角形,这里只是给一个展示示例,具体的三角形还需要实际应用中具体对待,但是原理都是相同的,通过调节border的四个边框属性来设置,需要特别注意的是设置位置,因为它的上部已有数据,要这是margin-top,不然会被滑动门覆盖看不到效果。

      2)在实现了三角形效果后,我们有展示了一段文字的排版效果,这里同样在div中设置样式,这里多加了几个参数:position不能少,margin-top,以及column-count,这个column-count要设置对不同的浏览器兼容。其实我也是初学者,这几篇里写兼容的不多,以后得改,不能误人误己。

第三步:参考百度贴吧实现了一个标题栏,这里的难点在会员图标的下拉列表上,需要实现的效果是鼠标移到“会员”上会弹出下拉选项,移走就会消失。最先实现的效果是只能在会员那两个字上,区域很小,或者在下拉列表上,总之也绕了一下,最后的实现是将下拉列表用display:inline-block属性,当会员下拉俩边展开时会员的区域自动拉伸,这样鼠标移到列表进行选择时也不会消失,当离开这个区域后高度自动回缩(不然下拉列表没打开时那个区域也起了作用)。

第四步:在展示了三角形及分栏之后又做了一个分栏,简单的把一个容器分成两部分。其实我最先接触的布局就是flex布局,这个效果只是随手作的,用flex布局是很简单的,felx默认按row排列,如果分两栏,每个flex设都为1,即二者比1:1。flex会自动填充剩余的部分,如果设为flex:1,flex:2,即两个平分比为1:2。flex:1,flex:2,flex:3各模块占比为1:2:1。一个容器里flex除以flex的和就是自身所占容器的比例。

第五步:最后一个实现的功能是数据滚动,首位相连,这一块的逻辑差点没转过来,当时总想着用JavaScript实现,还好自己转过来了,具体的看一步一步写web之初识web(五-数据滚动实现)吧,这里就不重复了。当然在这之前插了一个小篇幅,简单介绍下自己怎么看百度贴吧的源码的,一般稍微有点基础的都应该会,突然想写就写了,各位勿喷啊。

最后在chrome,Safari和QQ浏览器下做了对比,只要滑动门的效果在Safari没有展示,最后查了原因是webp是谷歌开发的一种图片格式,相对jpg和jpeg压缩率较高,但是Safari不支持,将webp图片换成jpg后可正常显示。这里还遇到一个问题就是图片没显示时alt属性竟然没显示,找了下原因是因为没有设置img的宽高,未加载图片时默认图片框很小,替代文字被隐藏了,调整大小后即可正常显示。

好了初识web篇到此就结束了,下个文章见!