《小白H5成长之路12》网页布局纵横之术
2017-11-27 本文已影响101人
老炉传说
老朱一大早口中念念有词：“折冲樽俎之间,决胜千里之外”，小白摸不清头脑问道：“这是什么意思？”
“没事！我正在想今天怎么跟你说网页布局的事，因为网页布局也分横布局和纵布局，因此我就想到了古人这句话，今天咱就探讨一下网页布局的纵横之术吧！”
“好的，听上去很高大上啊！”，小白笑嘻嘻的说道。
“小白，你经常看网页，有没有发现，无论一个网站多复杂，它都是由三大块组成的：头部区域、主体内容区域和底部区域。头部区域主要放导航、logo、用户登录等内容。主体区域就是整个网页的主要内容。底部区域会放版权信息、联系我们等等。这三块由上至下竖着排列，这就是网页的第一纵。”
“在每个区域里面我们又会放置横排的容器。比如我们在中间的主体区域里面分三个左中右横排的块。”
“你看我给你的这个布局里面，在中间区域的右侧容器里面，我右放了三个竖排的容器，当然这三个子容器里面你还可以进行横竖分块的排列，直到达到你的布局要求。”
“我这里都用的是div层布局，具体css怎么写的你先不用管，今天主要是了解纵横布局的思想。如果相同的子容器都按照同一模式排列，也可以把某些容器改为ul-li布局，这个后面我们碰到再详细说，现在你只需要了解div布局就可以了。html代码中父容器和子容器是互相嵌套的，每个容器我都给了一个id名，这是为了方便我们通过jQuery对它进行控制。”
“哦！那我不了解css代码怎么写的，怎么练习呢？”
“你可以去看各种类型的网页，看看是不是都符合纵横布局术。一来可以加深你对纵横布局的了解，二来多看看比较好的布局学学他们的精髓。”
想学H5的朋友可以关注老炉，您的关注是我持续更新《小白H5成长之路》的动力！
