一步一步写web之初识web（六）

这一篇为初识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篇到此就结束了，下个文章见！